Étape 4: Let's rock cette prise !
Maintenant que nous avons un serveur web de base pour travailler avec, nous allons à saupoudrer dans quelque magie WebSocket. Nous utilisons Socket.IO pour gérer notre communication WebSocket, qui joue à merveille avec l’Express.
Remplacez le contenu de votre app.js avec le code suivant. Changements sont commentés pour expliquer ce qu’ils font.
var express = require('express') var app = express() var server = require('http').Server(app) var io = require('socket.io')(server) // pass our http server to Socket.IO app.use(express.static(__dirname + '/public')) server.listen(8080) io .of('/soundsocket') // establish a route to connect to using the Socket.IO client .on('connection', function (socket) { console.log('client connected') // each time a client establishes a connection, log a message to the console that the app is running on (on the Edison). }) Maintenant, nous aurons besoin d’intégrer Socket.IO dans le fichier HTML, que nous servons jusqu'à. Ouvrez votre fichier « public/index.html », puis collez-le dans le code suivant, où 0.0.0.0 est l’adresse IP de votre Edison.
<html> <script src="https://cdn.socket.io/socket.io-1.3.4.js"></script> <script type="text/javascript"> var socketConnection = io.connect('http://0.0.0.0:8080/soundsocket') socketConnection.on('connect', function () { console.log('connected to socket') }) </script> <body> Hello world! </body> </html> Remarque : Nous choisissons d’utiliser script hébergé de Socket.IO, ce qui est pratique pour ce tutoriel. Dans la pratique, vous souhaiteriez probablement d’accueillir ce fichier vous-même.
Commettre et poussez vos modifications, tirez-les vers le bas sur votre Edison, puis réexécutez l’application, tel qu’indiqué dans la dernière étape.
À ce stade, vous devriez être capable de naviguer à l’adresse IP de votre Edison au port 8080 et devriez voir le journal de la console de votre Edison qui un client s’est connecté. En outre, si vous lancez l’inspecteur Web, vous devriez voir un message enregistré pour cette console ainsi.
Nous avons une connexion de socket de travail, mais nous n'allons pas réellement envoyer quoi que ce soit sur le socket encore. Nous allons changer cela maintenant. Ouvrez votre fichier « app.js » et ajoutez le code suivant après la coupe, le message « client connecté ».
socket.emit('test_message', 'some data') Dans votre fichier index.html, ajoutez le code suivant directement avant le script de fermer la balise.
socketConnection.on('test_message', function(data) { console.log('received data:', data) }) Commettre et poussez vos modifications, tirez-les vers le bas sur votre Edison, puis relancez l’application.
Si vous rechargez votre page, notre application émet un message de prise appelé « test_message » avec un corps de « certaines données ». Pour vérifier que tout fonctionne comme prévu, ouvrir l’inspecteur Web et vérifiez pour voir que notre message a été connecté à la console.
Cela nous donne une base pour la communication en temps réel, et nous sommes maintenant prêts à intégrer quelques boutons et des capteurs dans le projet.
