Project Link (How to debug IoT devices): Github Repo

Introduction

All the IoT hobbyists must have used lot of serial functions for instance “Serial.println()”. This prints the data in the serial monitor.

But can we debug IoT devices without serial ? Yes!

This application will broadcast serial data which can be used to monitor them in real time. Above all the developers can use this data to debug IoT devices without serial connection.

But It has some limitations which are listed below:-

  • Physical connection required between the microcontroller board and computer (Serial monitor)
  • Impossible to debug from remote locations

In this tutorial, you will learn how to debug IoT devices without serial using WebSockets.

I have created a simple real-time serial data monitor web application to view the messages/data.

Let’s Learn & Build 🙂

Motivation

When I was working on an IoT Project. I deployed my solution to production However After 1 month, it stopped working.

After that, to find out the cause of failure I needed to get real-time serial data.

It was only possible through a physical connection. I searched a lot about this issue but no success.

After that I decided to write my own real-time serial debugger over Wi-Fi.

Glossary

WebSockets: WebSocket is a bidirectional, and full-duplex protocol. The connection between client and server will be persistent.

It can only be terminated by either client or server.

ESP12E: ESP12E is an ESP8266 family microcontroller board designed by Espressif.

It has a built-in Wi-Fi module which can be used in two following modes

  • AP:- Access Point Mode
  • STA:- Station Mode
  • AP+STA:- Both Mode Together

Project Requirement

  • Arduino IDE:- To compile ESP12E code
  • Basic idea about IoT devices
  • Programming Languages:- JavaScript, C++, HTML, CSS

Step by Step Procedure

We’ll cover this project by dividing this into the following categories so it will be easy to learn the concepts.

  1. Modifications in standard classes (I have uploaded the modified standard class code on GitHub. Replace them with existing classes inside the directory. There are 2 classes WebSocket and WebSocketServer)
  2. Backend (WebSocket Server & HTTP Server)
  3. Frontend (Debug Application)

Modifications in standard classes

Espressif provides a rich set of classes for ESP8266 development. Click here to visit their GitHub link.

We’ll make changes to the following headers after that in classes to introduce our new features.

  1. WebSocketsServer.h
  2. WebSocketsServer.cpp

WebSocketsServer.h –> Add these new definitions in this class.

./class/WebSocketsServer.h

WebSocketsServer.cpp –> Here we will implement the definitions defined in header class.

./class/WebSocketsServer.cpp

WoW! We have moved a bit to the final results 🙂

Backend

In this paragraph we’ll discuss about how WebSockets work and how they can be used in the publishing and subscribe module.

Below is a gist of the SerialOverWifi class. In addition I have added another functionality like subscribe and unsubscribe.

Users need to click the subscribe button if they want to get the debug messages in the application, after that they can unsubscribe if needed.

Then the server adds the subscribed clients into the list and when there is some debug message event.

It broadcasts those messages to all the subscribed clients. Subscribed clients are those who have clicked on the subscribe button on the UI page.

Clients can easily unsubscribe with just a click of a button which is implemented in the front end.

./src/SerialOverWiFi.ino

Frontend

In the frontend, I created a simple application that makes connections to the above running WebSocket server using JavaScript.

Then if you want to listen to the incoming serial data you have to click on the subscribe button.

How to debug IoT devices without serial connection.

As you know serial data comes in great length so I have put a clear message button in the application which will clear the previous messages.

What you have learned

  • WebSockets
  • Making custom changes in standard classes
  • IoT devices serial connection over Wi-Fi
  • Debug remote applications over Internet Connection

Search Terms

  • Serial monitor over Wi-Fi
  • Debugging application with web sockets

Learning Tools

We have used some of the tools in this tutorial. You can learn more about them from the below links.

Arduino IDE:- https://www.arduino.cc/

ESP12 Documentation:- https://arduino-esp8266.readthedocs.io/en/latest/esp8266wifi/readme.html

WebSockets Server:- https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

Learning Strategy

To start this project I had to learn about web sockets. Then I went through all the documentation available on the internet thereafter I got to know enough about WebSockets to start building the application.

I faced some issues in broadcasting the web socket message. Then I spent some time learning about making changes in existing standard classes to implement that specific functionality.

Reflective Analysis

Before this project I had a less understanding of WebSockets, I used them only to keep the connection open for a while.

After this project, I got to know the strength of WebSockets in terms of real-time data transfer between systems.

Now I can build any real-time application on the upper layer of WebSockets.

Conclusions and Future Directions

In conclusion We have overcome the limitations we faced in Serial.println() Function.

  • We can now debug the application without a physical connection.
  • We can debug applications from anywhere just with the application server IP Address

In which you can make further changes to my code available on GitHub.

There are other real-time protocols for IoT devices like MQTT, COAP. Those are short in terms of packet size.

In my spare time, I will try to make the same project on the upper layer of those protocols.

Citations

Image Links