Node.JS Chat Server on an ESP32 Microcontroller

Chat Demo Mobile Screens

Running a group chat server on the Node.js based Neonious One

The Neonious One is a IoT board which utilizes the ESP32 microcontroller. It’s programmable directly on the chip with an onboard IDE using JavaScript and the Node.JS API.

Neonious One IoT Board

I wanted to create a system for a  group to communicate where there is no internet or mobile phone coverage. The low power usage of ESP32 based microcontrollers means the device could be powered from a USB powerbank or small solar panel.

Code

The files are grouped into two folders. The src folder contains the server-side JavaScript. The www folder contains the resource files for the front end of the application. There’s also a chat-history.json file in the root. This is a JSON formatted file containing previous messages.

IDE File Explorer

WebSocket Library

The app uses the Node.js WS websocket library, This is easily installed using the IDE package manager

Websocket Client Install

Server Side JS

The JavaScript code found in the index.js file in the src folder that runs on the microcontroller. You can see this code in the JavaScript tab here: https://jsfiddle.net/53qL14ko/

Client Side HTML

This the HTML and JavaScript code that  displays the chat on the client browser (the index.html file in the www folder). You can see this code in the HTML tab here: https://jsfiddle.net/53qL14ko/

A download of all the code and assets is here: https://github.com/robotzero1/neonious-chat

I’ve used a simple click your picture to login system. In a finished application this could be replaced with a proper authentication method.

Chat Avatars

Demonstration with Four Users

The video below shows the chat working with four users. Laura, Warren, Tony and Alaska:

There is no security or input checking at the moment but it is completely functional and could be used for group chats in remote locations.

References

Neonious One website: https://www.neonious.com/neoniousOne
Lowjs chat server example: https://github.com/neonious/lowjs/tree/master/examples/chat_ws_webserver
Node.js WebSocket library: https://www.npmjs.com/package/ws https://github.com/websockets/ws
Design inspiration and some CSS: https://codepen.io/drehimself/pen/KdXwxR
Avatars: https://www.flaticon.com/packs/avatars-4

7 Replies to “Node.JS Chat Server on an ESP32 Microcontroller”

  1. Donny says:

    This is great, i have a similar idea i just didnt know where to start. This application of these ESP32 boards is just fascinating this project should have been making waves becz its just super great. Where can i find the link to the source code for this one

    1. WordBot says:

      I’ve added the the full source to the article. You can download it from here: https://robotzero.one/wp-content/uploads/2019/05/neonious_one_chat.zip

  2. Phinch says:

    This is amazing! I would love to play with this but I am a total newbie. I have no idea how to install your software on my esp 32. I am only familiar with aurduino style *.ino files. I wonder if you could point me towards a tutorial or guide to get this loaded.
    Thanks!

    1. WordBot says:

      The tutorial is for a specific ESP32 based board – https://www.neonious.com/neoniousOne If you want to experiment with running JavaScript on your own ESP32 based board, take a look at this – https://www.lowjs.org/ It’s a bit of a step up from just using .ino files but it should be fairly easy.

  3. Phinch says:

    Thank you for the reply. I forgot that I have also used esptool to flash tasmota onto some ESP8266 based sonoffs. This looks like a step up from that tool. I have a Heltec ESP32 OLED, I hope it will work. I appreciate you pointing me in the right direction.

  4. SYJ says:

    Hello, I am a newbie here. I am sorry in advance if I ask something that is already clear.

    I want to ask, in which part did you declare that if someone wants to access the group chat, then he should type “10.10.10.10” on his browser?

    Thank you

    1. WordBot says:

      Hi. That is a good question that I didn’t explain clearly in the tutorial.The IP address in this case was set in the Neonious IDE. You can choose the type of connection in the IDE as well. More info – https://robotzero.one/neonious-javascript-microcontroller/

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.

scroll to top