Microcontroller Tutorials

Arduino, Raspberry Pi, PIC, Beaglebone Resources

Web Server with NodeMCU WebSocket

Uploading sensor data to web servers is one of the core ideas for Internet of Things (IoT). Such data are often small-sized and are continuously updated over time. And while HTTP performs satisfactorily for simple applications, like how I showed in my NodeMCU web server tutorial, there is a need for a much better method when speed and data-size are critical factors. I’ve already shown how to use MQTT as a faster and lightweight alternative to HTTP. In this tutorial, I will demonstrate how to use NodeMCU WebSocket.

Introduction to WebSocket

WebSocket, like HTTP, is a communications protocol over TCP. The key differences between WebSocket and HTTP is that the former operates full-duplex, bi-directional and at single TCP connection.

Full-duplex means two objects communicating with each other can send and receive messages simultaneously, like when you’re talking over the telephone. In contrast, half-duplex is non-simultaneous messaging, like when you’re using a walkie-talkie. A full-duplex system is faster than a half-duplex system.

websocket vs http
WebSocket vs. HTTP via DevCentral

As a consequence of being full-duplex, WebSocket is also bidirectional. The client always initiates the communication in HTTP. The client or the server can initiate the communication in WebSocket.

Finally, WebSocket is established in a single TCP connection. The request-response pattern needs to be repeated for every HTTP request by the client.

 

NodeMCU WebSocket Library

A WebSocket library for NodeMCU using the Arduino IDE can be downloaded in this repository.

Extract the library to the Arduino libraries folder and then restart the IDE (if it was open when you were downloading the library).

The library has plenty of examples (File -> Examples ->WebSockets). I will create my own code here that is similar to the one on the NodeMCU web server tutorial via HTTP:

Upload the code to your NodeMCU and, if successful, open Arduino's serial monitor to see something like this:

Then go to your preferred web browser and type in the address of the NodeMCU (shown in the screenshot above) on the address bar. You should see something like this:

To see what this code does, wire a LED to D7 (which is GPIO #13) on your NodeMCU.

Then click the buttons on the web page. The LED should respond to the button press:

nodemcu blink

Explaining the Code

There are a few differences here with my code using HTTP. First is the declaration of the WebSocket object:

The WebSocket server must be on a different port to HTTP (which is 80). Here it’s on port 81. Then we need to start the WebSocket connection using begin()

The onEvent() function calls the webSocketEvent() function when data is received via WebSocket. The webSocketEvent():

This function simply prints the data via WebSocket to the serial port. Here, we are waiting for a text type response but there are other types of responses:

We also need to add a  webSocket.loop() call on the loop() function to keep the connection alive.

Another advantage of using WebSocket is that you can send or receive data on the server without refreshing the page, like in the NodeMCU Ajax tutorial but easier. I will discuss this on my future tutorials.

I suggest you explore all the given examples on the library to learn more. Also, feel free to drop a comment if you want a solution for a problem you are experiencing on a project related to this topic. Have fun!

 

9 thoughts on “Web Server with NodeMCU WebSocket

  1. Hi,
    Thank you so much for this tutorial.
    I'm working on a project where I sould read data from DHT22 and send it to a web server via websocket and the web server will store the data to a Database. I can't seem to find any pattern so if you can help me I will appreciate it.
    Thanks.

  2. Amazing tutorials. I am looking to set it up and have a magnetic door switch so it can sense when the door/window closes/opens. I would like it to have its current status (live) in a web page and also send it to a server its status. I would like to ask if you guide me, please.

  3. Turning the LED on and off works fine but how do I send data from the NodeMCU to the client?
    For instance, I want to send a double integer that contains 24 bits of data data from a 24 bit ADC every few milliseconds continuously. Can it be done?

  4. Hi Roland!

    Thank you for this tutorial. It works now, but at the beginnig I had problems because the code did not compile. I am using Windows 8.1, Arduino 1.6.8 with the websocket library you added as a link. The error was:

    exit status 1
    'webSocketEvent' was not declared in this scope

    After some research I found out that I must add to the init part of the code
    void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t lenght);

  5. Thank you so much for your amazing tutorial.
    As you wrote "Another advantage of using WebSocket is that you can send or receive data on the server without refreshing the page, like in the NodeMCU Ajax tutorial but easier. I will discuss this on my future tutorials". Would you please send me or post a tutorial about how to send and display an A0 analog pin data on the webpage together with the above buttons: on and off by using the webSocket without refreshing manually the webpage.
    Thanks a lot!

  6. Hello ,
    That's exactly what I would like to do to control a relay remotely : my huge difficulty lies on phone side.. I want to write small app with AppInventor 2 , but I do not know how to set it up to make the initial connection and switch to Websocket afterwards ( maybe I need a specific component on AI2 ..) , and this possibly is because I do ignore the very basics of websockets.
    Any suggestion or... should I give up ?
    Thank you so much ,
    Fabio R.

      1. Hi ,
        Thank you for your kindness , I'll give it a try and will ( eventually ) post a feedback if everything goes well .

        My best regards ,

        Fabio R. - Italy

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.