Med knappar och sensorer för att göra musik med Intel Edison (4 / 9 steg)

Steg 4: Låt oss rock detta uttag!

Nu när vi har en grundläggande webbserver att arbeta med, kommer vi att strö i lite WebSocket magi. Vi använder Socket.IO för att hantera vår WebSocket kommunikation, som spelar ganska fint med Express.

Ersätta innehållet i din app.js med följande kod. Förändringar är kommenterade för att förklara vad de gör.

var uttryckliga = require('express')
var app = express()
var server = require('http'). Server(app)

var io = require('socket.io')(server) / / passera vår http server till Socket.IO

app.use (express.static (__dirname + '/ offentliga'))
Server.listen(8080)

IO
.of('/soundsocket') / / upprätta en rutt att ansluta till med hjälp av Socket.IO klienten
.på ("anslutning", funktion (socket) {
Console.log ("kund ansluten") / / varje gång en klient upprättar en anslutning, log ett meddelande till konsolen som app körs på (på Edison).
})

Nu kommer vi att integrera Socket.IO i HTML-filen vi tjänar upp. Öppna upp din "public/index.html" fil och klistra in följande kod, där 0.0.0.0 är IP av din 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', funktion () {
Console.log ("ansluten till uttaget")
})
< / script >
< body >
Hej världen!
< / body >
< / html >

Obs: Vi väljer att använda Socket.IO's värd skript, som är en bekvämlighet för den här läraren. I praktiken, skulle du förmodligen vill vara värd denna fil själv.

Begå och skicka dina ändringar, dra ner dem på din Edison, sedan köra app igen, enligt anvisningarna i sista steget.

Vid denna punkt, du ska kunna navigera till din Edisons IP-adress på hamn 8080, och bör se din Edisons konsolen loggen som en klient har anslutit. Dessutom, om du skjuter upp Web inspektören, bör du se ett meddelande loggas till att konsolen.

Vi har en fungerande socketanslutning, men inte faktiskt sänder vi något över uttaget ännu. Låt oss ändra på det nu. Öppna upp din "app.js" fil och Lägg till följande kod efter inloggningen meddelandet "klient ansluten".

socket.Emit ('test_message', 'data')

I filen index.html, Lägg till följande kod direkt innan skriptet stänger tag.

socketConnection.on ('test_message', function(data) {
Console.log ("upplysningar:", data)
})

Begå och skicka dina ändringar, dra ner dem på din Edison, sedan köra app igen.

Om du ladda om sidan, ger vår ansökan ett socket meddelande kallas "test_message" med en kropp av "vissa data". För att kontrollera att allt fungerar som förväntat, öppna Web Inspector, och kontrollera för att se att vårt meddelande har loggats till konsolen.

Detta ger oss en grund för realtid kommunikation och vi är nu redo att integrera vissa knappar och sensorer i projektet.