Example04

Adding html buttons to control LED via web socket (ws: a Node.js WebSocket library)

The HW setup is the same as in the previous two examples. In this case we will first control only one of the LEDs. In order to communicate between client and server with permanent connection the socket library will be applied. In this case, we will have two files, one file will be example04.js with server code and example04.html with client side code. The client side code is transmitted to the client when we first contact the server by entering IP and port in the browser. Since we need ws, i.e. a Node.js WebSocket library for permanent connection between client and server we use require:

const WebSocket = require('ws'); // for permanent connection between server and client

On established connection over socket, we wait for the message. In the case, that client sends the message to server, we read it's value ("0" or "1") and accordingly switch the LED ON/OFF:

wss.on('connection', function (ws) { // start of wss code

    ws.on("message", function (value) {

       if(value == "1") {

           board.digitalWrite(13, board.HIGH); // write high on pin 13

       else if(value == "0") {

           board.digitalWrite(13, board.LOW); // write low on pin 13

});

}); // end of wss code

Html part of the code includes the buttons and socket messages to the server:

<button id="buttonOn" onClick="on()">On</button>

<button id="buttonOff" onClick="off()">Off</button>

We establish the connection with server over the WebSocket:

let ws = new WebSocket("ws://192.168.254.149:8888"); // // create socket - connect to it

On button click we trigger the functions, which pass the message "commandToArduino" with parameter 1 or 0 to the server:

function on() { // when button "on" is pressed we

    ws.send("1"); // send number 1 via websocket

function off() { // when button "off" is pressed we

    ws.send("0"); // send number 0 via websocket

Two button plain html GUI is rather spartan but it is important, that it works. The hardware was exposed to the web interface which has many possible applications. The interface could be significantly enhanced by e.g. css:

example04.js

var http = require("http").createServer(handler);

var fs = require("fs"); // variable for file system

var firmata = require("firmata");

const WebSocket = require('ws'); // for permanent connection between server and client

const wss = new WebSocket.Server({port: 8888}); // websocket port is 8888

var board = new firmata.Board("/dev/ttyACM0", function(){ // ACM Abstract Control Model for serial communication with Arduino (could be USB)

    console.log("Connecting to Arduino");

    console.log("Activation of Pin 13");

    board.pinMode(13, board.MODES.OUTPUT); // Configures the specified pin to behave either as an input or an output.

});

function handler(req, res) {

    fs.readFile(__dirname + "/example04.html",

    function (err, data) {

        if (err) {

            res.writeHead(500, {"Content-Type": "text/plain"});

            return res.end("Error loading html page.");

    res.writeHead(200);

    res.end(data);

});

http.listen(8080); // server will listen on port 8080, html page will be served to client

wss.on('connection', function (ws) { // start of wss code

    ws.on("message", function (value) {

       if(value == "1") {

           board.digitalWrite(13, board.HIGH); // write high on pin 13

       else if(value == "0") {

           board.digitalWrite(13, board.LOW); // write low on pin 13

});

}); // end of wss code

example04.html

<!DOCTYPE html>

<meta charset = utf8>

<html>

<head>

    <title>Example with buttons</title>

</head>

<body>

<button id="buttonOn" onClick="on()">On</button>

<button id="buttonOff" onClick="off()">Off</button>

<br>

<script type="text/javascript">

let ws = new WebSocket("ws://192.168.254.149:8888"); // // create socket - connect to it

function on() { // when button "on" is pressed we

    ws.send("1"); // send number 1 via websocket

function off() { // when button "off" is pressed we

    ws.send("0"); // send number 0 via websocket

</script>

</body>

</html>

Page updated

Google Sites

Report abuse