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.
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.
WebSocket Library
The app uses the Node.js WS websocket library, This is easily installed using the IDE package manager
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.
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
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
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
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!
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.
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.
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
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/