This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision | |||
|
blog [2013/08/15 00:44] jap |
blog [2013/08/15 00:45] jap [WebSocket experimentation with BeagleBone [2013-08-14]] |
||
|---|---|---|---|
| Line 26: | Line 26: | ||
| This is how the "web server" is implemented. Whenever a client is connected and sends any GET command, the static socketclient.html file is read from local the flash disk at beagle, and send to the browser. | This is how the "web server" is implemented. Whenever a client is connected and sends any GET command, the static socketclient.html file is read from local the flash disk at beagle, and send to the browser. | ||
| - | function httpserver (req, res) { | + | function httpserver (req, res) { |
| - | fs.readFile('sockserv/socketclient.html', | + | fs.readFile('sockserv/socketclient.html', |
| - | function (err, data) { | + | function (err, data) { |
| - | if (err) { | + | if (err) { |
| - | res.writeHead(500); | + | res.writeHead(500); |
| - | return res.end('Error loading index.html'); | + | return res.end('Error loading index.html'); |
| - | } | + | } |
| - | res.writeHead(200); | + | res.writeHead(200); |
| - | res.end(data); | + | res.end(data); |
| - | }); | + | }); |
| - | } | + | } |
| + | | ||
| When WebSocket connection is established, and some data received, the following callback will parse the message, whether the LED should be switched ON or OFF. As an acknowledgement, the same message is transmitted back to the client. | When WebSocket connection is established, and some data received, the following callback will parse the message, whether the LED should be switched ON or OFF. As an acknowledgement, the same message is transmitted back to the client. | ||
| - | io.sockets.on('connection', function (socket) { | + | io.sockets.on('connection', function (socket) { |
| - | socket.on('led', function (data) { | + | socket.on('led', function (data) { |
| - | console.log(data); | + | console.log(data); |
| - | if (data == 'on'){ | + | if (data == 'on'){ |
| - | b.digitalWrite(led, b.HIGH); | + | b.digitalWrite(led, b.HIGH); |
| - | socket.emit('led', 'on'); | + | socket.emit('led', 'on'); |
| - | }else{ | + | }else{ |
| - | b.digitalWrite(led, b.LOW); | + | b.digitalWrite(led, b.LOW); |
| - | socket.emit('led', 'off'); | + | socket.emit('led', 'off'); |
| - | } | + | } |
| + | }); | ||
| }); | }); | ||
| - | }); | ||
| **Client side** | **Client side** | ||
| At the socketclient.html page, there is one button to toggle the state of the LED. When the button is clicked, this function transmits JSON message over WebSocket to server. | At the socketclient.html page, there is one button to toggle the state of the LED. When the button is clicked, this function transmits JSON message over WebSocket to server. | ||
| - | function toggleLed(){ | + | function toggleLed(){ |
| if ( document.getElementById("ledButton").value == "Switch On" ) { | if ( document.getElementById("ledButton").value == "Switch On" ) { | ||
| socket.emit('led', 'on'); | socket.emit('led', 'on'); | ||
| Line 61: | Line 62: | ||
| socket.emit('led', 'off'); | socket.emit('led', 'off'); | ||
| } | } | ||
| - | } | + | } |
| + | | ||
| If acknowledgement is received, it it processed by this callback function, which changes the state of the button, confirming successful operation to user. If you see the label of the button changed, you know the message has travelled back and forth. | If acknowledgement is received, it it processed by this callback function, which changes the state of the button, confirming successful operation to user. If you see the label of the button changed, you know the message has travelled back and forth. | ||
| - | socket.on('led', function (data) { | + | socket.on('led', function (data) { |
| console.log(data); | console.log(data); | ||
| if (data == 'on'){ | if (data == 'on'){ | ||
| Line 72: | Line 74: | ||
| document.getElementById("ledButton").value= "Switch On"; | document.getElementById("ledButton").value= "Switch On"; | ||
| } | } | ||
| - | }); | + | }); |
| + | | ||
| There is one flaw in beauty in this code. Once the page is loaded, the button is not initially synchronized with the actual state of the physical LED. Only after clicking the button for the first time, the UI and the LED are in sync. I made this decision by purpose, as I want to keep the example as simple as possible. | There is one flaw in beauty in this code. Once the page is loaded, the button is not initially synchronized with the actual state of the physical LED. Only after clicking the button for the first time, the UI and the LED are in sync. I made this decision by purpose, as I want to keep the example as simple as possible. | ||