Stap 4: Let's rock deze aansluiting!
Nu dat we een fundamentele webserver om mee te werken hebben, zijn we gonna strooi in sommige WebSocket magie. We zijn met behulp van Socket.IO voor het beheer van onze WebSocket mededeling, die heel mooi met Express speelt.
De inhoud van uw app.js wordt vervangen door de volgende code. Wijzigingen worden toegelicht om uit te leggen wat ze doen.
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). }) Nu zullen we te integreren van Socket.IO in het HTML-bestand die wij omhoog serveren. Open uw 'public/index.html' bestand en plak in de volgende code, waar 0.0.0.0 het IP van uw Edison is.
<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> Opmerking: Wij zijn kiezen voor het gebruik van Socket.IO van gehoste script, dat een gemak voor deze tutorial is. In de praktijk, zou u waarschijnlijk wilt dit bestand host zelf.
Commit en push van uw wijzigingen, trek ze af op uw Edison, dan voert u de app opnieuw, zoals aangegeven in de laatste stap.
Op dit punt, u moet zitten kundig voor Navigeer naar uw Edison's IP-adres op poort 8080, en moet zien uw Edisons console logboek dat een client verbinding heeft. Bovendien, als u vuur opwaarts de Web Inspector, moet u zien te depêche aangemeld die console ook.
We hebben een socketverbinding werken, maar we niet daadwerkelijk om het even wat over de aansluiting nog verzendt zijn. Laten we dat nu te veranderen. Open het bestand 'app.js', en voeg de volgende code na het inloggen het bericht 'client verbonden'.
socket.emit('test_message', 'some data') In het bestand index.html, voeg de volgende code direct voordat het script sluit tag.
socketConnection.on('test_message', function(data) { console.log('received data:', data) }) Plegen en duw uw wijzigingen, trek ze af op uw Edison, dan de app opnieuw uit te voeren.
Als u de pagina opnieuw wordt geladen, zal onze applicatie een bericht van de socket genaamd 'test_message' bij een instantie van "enkele gegevens" uitzenden. Om te controleren of dat alles werkt zoals verwacht, opent de Web Inspector en controleren om te zien dat onze boodschap werd geregistreerd aan de console.
Dit geeft ons een Stichting voor real-time communicatie, en we zijn nu klaar sommige knoppen en sensoren te integreren in het project.
