ESP8266 WebSockets

I worked on web sockets on a Wemos D1 mini using an ESP8266 chip and it worked fabulously. I have designed an "HTML" file which can initiate a connection with my D1 mini to control the onboard LED.

Any board with ESP will work here. In my application, I can switch on and switch off the onboard LED of the board. A continuous connection was also made to see the real-time calculation going on the ESP board with my browser.

However, I faced some problems like socket timeout which I haven't solved yet. The problem is that when the ESP is connected to the browser, it shows the real-time data for some minutes after which the connection is stopped. I still have to figure out the reason to solve this issue.

WebSockets have helped me to a great extent. I can use the serial monitor over wifi now. I can even update the values over wifi and get back the current readings.

I began with the web socket library by "Ipnica" at GitHub. Click here to download the library. After installing ESP board on Arduino IDE and the above-downloaded library I was good to go.

The code for a simple WebSocket connection is here

I am assuming readers know most of the commands here.

WebSocketsServer webSocket = WebSocketsServer(81);

This will create an instance of WebSocket server at port 81. Your address will be like ws://192.168.5.2:81/

Do remember that "ws" here represents WebSockets. Its the representation of a web socket url. Similarly "wss" is for WebSocket Secure just like HTTPS.

void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length)

This void method is very important. The payload will contain the data that has to be sent or is being received. The length is the length of the payload. "type" indicates the type of data i.e TEXT of Binary. Num contains the data about the IP address of the connected client.

case WStype_DISCONNECTED:

• When the socket is disconnected this condition is fired up.

case WStype_CONNECTED:

• When the socket is connected successfully this condition is fired up.

case WStype_TEXT:

• When the data received is of type TEXT

case WStype_BIN:

• When the data received is of type Binary !!

webSocket.sendTXT(num, x, strlen(x));

• When the user wants to send a data to the browser of type TEXT. The first argument is the details about the ip address of the connected client. The second argument is a const char * type data. The third argument is the length of const char *x.

It can also be used like this.

webSocket.sendTXT(num, "Yay It works!!", strlen("Yay It works!!));


Incase when we want to send normal string then the command should be

String s = String(a);

char const *x = s.c_str();

char const *x = s.c_str();

Here s can be "Hello" or any integer converted into a String.

String _payload = String((char *) &payload[0]);

• This will store the incoming character array inform of string into the payload.

The HTML file 

con = new WebSocket('ws://192.168.1.5:81/',['arduino']);

• A new websocket connection is initiated with the mentioned ws address and the following protocol. The first argument can be variable too. My Wemos has the wsIP ws://192.168.1.5:81/

con.onopen = function(event){ console.log("Opened"); };

Whenever a new Web Socket connection has opened this property "onopen" is initiated. You can put any conditions in the curly braces. If you are using Chrome then press Ctrl + Shift + I and then click console tab above to see the message that will be logged in console, once a connection has been opened.

con.onmessage = function (evt) {

var received_msg = evt.data;

document.getElementById("message").innerHTML = evt.data;};

Whenever a new message arrives on the browser this property is fired up. An event is raised that contains the data received. 

con.onclose = function(){

console.log("Masakaaaa!!!");};

Whenever a WS connection is closed the above function is fired up which may or may not log events depending upon the user choice. I have logged a string on the console here.

function SwitchON() {

var toSend = "ON";

con.send(toSend); };

This is a function named SwitchON. Whenever this function is called, a string is sent to the server.

<input type="button" onclick="SwitchON()"> Turn LED Off

This will create a button which when clicked will call the SwitchON function which in turn will send data.

Here is the working of the WebSocket.

So Long