Websocket and Mbed

As explained in this webpage, the WebSocket protocol allows full-duplex, bi-directional communications between a server and clients.

The websocket server

In this tutorial, we will be using a public server provided by mbed for testing purposes.

So you just have to program your mbed!

If you want more information regarding the server side code, see Websockets Server

This tutorial is divided into three parts:

Part 1 - Setup
Part 2 - Sending Hello World over a WebSocket communication over WiFi
Part 3 - Sending Hello World over a WebSocket communication over Ethernet

You may wish to skip to the relevant section after you have chosen whether you are using WiFi or Ethernet

1 - Set up

1.1 - Protocol used by the server

The url format to establish a connection with the server is: ws://sockets.mbed.org/ws/<channel>/<mode> (Don't try and go here, it will not work)

The WebSockets are divided into channels.

There are 3 connection modes:

wo: write-only: the user can write on a certain channel but cannot receive messages
ro: read-only: the user can read messages on a certain channel but cannot write messages
rw: read-write: the user can read and write messages over a channel

When the server receives a message from a client in a certain channel who is not in 'ro' mode:

it will broadcast the message to all clients connected to this channel who are in 'rw' or 'ro' mode

1.2 - Javascript part

This code is very similar to the one presented in second part of this tutorial.

Take note!

You can skip this section if you don't want to write yourself the javascript code.

We present this code for you to modify as you wish, but if you want to just go to the webpage of your own channel:

For instance, to view all messages on the 'samux' channel, visit:
http://sockets.mbed.org/samux/viewer.

If you adapt the last part of the previous url, you can see the activity on your own channel ;)

Code

<!doctype html>
<html>

  <head>
    <style type="text/css">
      body {
        text-align: center;
        min-width: 500px;
      }
    </style>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
    function log(m) {
		d = document.getElementById("log");
        d.innerHTML = m + "<br/>" + d.innerHTML;
    }

    $(document).ready(function () {
	  
	$("#open").click(function(evt) {
        evt.preventDefault();

        var channel = $("#channel").val();
        var ws = new WebSocket("ws://sockets.mbed.org/ws/" + $("#channel").val() + "/rw");

        ws.onopen = function(evt) { 
			$("#channel").css("background", "#00ff00"); 
			document.getElementById("title").innerHTML = "Websockets streaming on channel: " + $("#channel").val();
		};
        ws.onmessage = function(evt) { log("message: " + evt.data); };
        ws.onclose = function(evt) { log("socket closed"); };
        });

    });

    </script>
  </head>

  <body>
    <h1 id="title">Websockets Streaming</h1>
    <label for="channel">channel:</label>
    <input type="text" id="channel" style="background:#ff0000;"/><br />
    <input type="submit" id="open" value="open" />
    <div id="log"></div>



  </body>
</html>

On this webpage, you must associate your connection with a 'channel'. In this example, I will use the channel samux, but I could use anything. So I fill in the channel field and press open
If the connection is established:

we change the background of the channel field from red to green
we change the title according to the channel
When a message is received:
we print the message received below

So the WebSocket is opened, now the Mbed part!

Part 2 - Sending data from the Mbed: Wifi

Materials required

For this part you need:

an mbed ;)
a Wifly module like this
a router

2.1 - Schematics

Schematics

2.2 - Code

Libraries required

For this part you need to import these libraries:

WebSocket
Wifly
EthernetIf. You must import the program as a library
DNSResolver

You may wish to skim the page on the WiFly module.

The main code:

Code

#include "mbed.h"
#include "Wifly.h"
#include "Websocket.h"

DigitalOut l1(LED1);

//Here, we create an instance, with pins 9 and 10 connecting to the
//WiFly's TX and RX pins, and pin 21 to RESET. We are connecting to the
//"mbed" network, password "password", and we are using WPA.
Wifly wifly(p9, p10, p21, "mbed", "password", true);

//Here, we create a Websocket instance in 'rw' (read-write) mode
//on the 'samux' channel
Websocket ws("ws://sockets.mbed.org/ws/samux/rw", &wifly);


int main() {
    char recv[40];

    while (1) {

        //we connect the network
        while (!wifly.join()) {
            wifly.reset();
        }

        //we connect to the websocket server
        while (!ws.connect());

        while (1) {
            wait(0.5);

            //Send Hello world
            ws.send("Hello World! over Wifi");

            // if a message is available, print it
            if (ws.read(recv)) {
                // show that we receive messages
                l1 = !l1;
            }
        }
    }
}

» Import this program websockets_hello_world_wifi

Websocket Hello World over a wifi network

This code is very simple:

connection to the router
connection to the WebSocket server
send Hello World! over Wifi to the server
try to read a websocket message
- If a message is available, toggle the LED1 (as we are connected to the server in rw mode, we should receive all messages sent to the server. In particular, we should receive all messages sent by the mbed). With the mbed LPC1768, you can print the messages received and check that they are the echo from the server. You cannot do that with the mbed LPC11U24 because it only has one serial port.

ssid, key, mode, channel

Don't forget to adapt:

the ssid and the key of your network in the Wifly constructor
the mode and the channel of your choice in the WebSocket constructor

2.3 - You should be ready!

You can now download this program into your mbed
Visit the webpage of your own channel: http://sockets.mbed.org/your_own_channel/viewer

Information

You can join the server, create your own channel, send and view messages over your channel just by visiting:

http://sockets.mbed.org

2.4 - Demo

If you are using the javascript code presented at the beginning of this document, you should be able to see the messages on your channel
demo

You can also check that all is working by visiting the webpage of your own channel: http://sockets.mbed.org/your_own_channel/viewer
For instance: http://sockets.mbed.org/samux/viewer

demo

On the mbed side, you can see all messages received (only with the mbed LPC1768):

/media/uploads/samux/hello_world_wifly.png

Et Voilà! We are able to send data on our webpage over a wifi network!

Part 3 - Sending Hello World from the Mbed: Ethernet

Materials required

For this part you need:

an Mbed ;)
an Ethernet RJ45 jack
a router

3.2 - Code

Library required

For this part you need to import these libraries:

WebSocket
EthernetIf. You must import the program as a library
Wifly - the WebSocket library uses this
DNSResolver

The main code:

Code

#include "mbed.h"
#include "Websocket.h"

Serial pc(USBTX, USBRX);
Timer tmr;

//Here, we create a Websocket instance in 'rw' (write) mode
//on the 'samux' channel
Websocket ws("ws://sockets.mbed.org/ws/samux/rw");

int main() {
    char recv[128];
    while (1) {

        while (!ws.connect())
            pc.printf("cannot connect websocket, retrying\r\n");

        tmr.start();
        while (1) {
            if (tmr.read() > 0.5) {
                ws.send("Hello World! over Ethernet");
                if (ws.read(recv)) {
                    pc.printf("recv: %s\r\n", recv);
                }
                tmr.start();
            }
            Net::poll();
        }
    }
}

» Import this program websockets_hello_world_ethernet

Websocket Hello World over an ethernet network

This code is very simple:

connection to the WebSocket server
send Hello World! over Ethernet each 0.5 second
try to read a websocket message
- If a message is available, print it (as we are connected to the server in rw mode, we should receive all messages sent to the server. In particular, we should receive all messages sent by the mbed.)

Note that the WebSocket API is the same for using a WiFi module or an Ethernet connection

mode, channel

Don't forget to edit:

the mode and the channel of your choice in the WebSocket constructor

3.3 - You should be ready!

You can now download this program into your mbed
Visit the webpage of your own channel: http://sockets.mbed.org/your_own_channel/viewer

Information

You can join the server, create your own channel, send and view messages over your channel just by visiting:

http://sockets.mbed.org

3.4 - Demo

If you are using the javascript code presented above in this document, you should be able to see the messages on your channel
demo

You can also check that all is working by visiting the webpage of your own channel: http://sockets.mbed.org/your_own_channel/viewer
For instance: http://sockets.mbed.org/samux/viewer

demo

On the mbed side, you should see all messages received:

/media/uploads/samux/hello_world_eth.png

Et Voilà! We are able to see on our webpage Hello World over an Ethernet network!

Now, if you want, you can write your own webpage to process and display the data coming in on your channel whichever way you wish!

Conclusion

After this tutorial, you are able to send messages to every webpage connected to a websocket server. You can imagine sending data from sensors and print or display values received in the webpage. Sensors are now accessible all over the world. You can take a look to the Internet Of Things project where data are sent and displayed in real time using another HTML5 feature: canvas.

Websocket and Mbed

The websocket server

1 - Set up

1.1 - Protocol used by the server

1.2 - Javascript part

Take note!

Code

Part 2 - Sending data from the Mbed: Wifi

Materials required

2.1 - Schematics

2.2 - Code

Libraries required

Code

» Import this program websockets_hello_world_wifi

ssid, key, mode, channel

2.3 - You should be ready!

Information

http://sockets.mbed.org

2.4 - Demo

Part 3 - Sending Hello World from the Mbed: Ethernet

Materials required

3.2 - Code

Library required

Code

» Import this program websockets_hello_world_ethernet

mode, channel

3.3 - You should be ready!

Information

http://sockets.mbed.org

3.4 - Demo

Conclusion

11 comments on Websocket and Mbed:

Code

Code

Code

Diego io0set wrote:

Websocket and Mbed

The websocket server

1 - Set up

1.1 - Protocol used by the server

1.2 - Javascript part

Take note!

Code

Part 2 - Sending data from the Mbed: Wifi

Materials required

2.1 - Schematics

2.2 - Code

Libraries required

Code

» Import this programwebsockets_hello_world_wifi

ssid, key, mode, channel

2.3 - You should be ready!

Information

http://sockets.mbed.org

2.4 - Demo

Part 3 - Sending Hello World from the Mbed: Ethernet

Materials required

3.2 - Code

Library required

Code

» Import this programwebsockets_hello_world_ethernet

mode, channel

3.3 - You should be ready!

Information

http://sockets.mbed.org

3.4 - Demo

Conclusion

11 comments on Websocket and Mbed:

Code

Code

Code

Diego io0set wrote:

» Import this program websockets_hello_world_wifi

» Import this program websockets_hello_world_ethernet