Internet of Things,  Tutorials

Create awesome Wifi Chat with Captive Portal using NodeMcu ESP8266

In this tutorial, you will learn how to create a wifi chat with a captive portal using NodeMcuESP8266. You will also learn how to read and write to files in NodeMcu SPIFFS and to serve a web server.

Video Demonstration

 

Requirements

NodeMcu ESP8266
Arduino IDE
Arduino ESP8266 filesystem uploader
Download the Source Code Here:  ChatApp with Captive Portal Node Mcu Source Code (722 downloads)

 

Environment Setup

We need to add NodeMcu ESP 12 to our Arduino IDE. Open up your IDE then go to “File -> Preferences” or simply hit “Ctrl + comma”

Paste http://arduino.esp8266.com/stable/package_esp8266com_index.json in additional board manager URLs.

Go to “Tools -> Board -> Boards Manager” search and install esp8266

Close and restart your Arduino IDE

Plug in your NodeMcu to your computer.

Selecting Port and Board

Go to Tools -> Port and select the COM Port of your NodeMCU. If you are not sure what port your NodeMcu is plugged in, go to Device Manager -> Ports (COM & LPT)

Now select NodeMcu 1.0 (ESP-12E Module) by clicking Tools -> Board. Scroll down until you find it.

 

Arduino ESP8266 Filesystem Uploader

Download Arduino ESP8266 Filesystem Uploader (direct link)  Unpack the tool in your sketchbook directory (the path will look like <sketchbook directory>/tools/ESP8266FS/tool/esp8266fs.jar).

Restart your Arduino IDE (If opened). You will notice an option in Tools drop down. (ESP8266 Sketch Data Upload)

If you want to learn more about the NodeMCU File System. You can visit this documentation. Arduino File System

 

Source Code

Unpack the downloaded source code.  You will notice the data folder. This is where we will put all codes/files that we want to upload to the file system.

Open the ChatApp.ino into your Arduino IDE.

The first thing you should do is to upload the HTML file and messages.txt in your File System.

Go to Tools -> and click (ESP8266 Sketch Data Upload).  Uploading the file may take awhile.

After uploading the file. Upload the ChatApp.ino. The code will compile and will be uploaded to your NodeMcu.





Connect to your WIFI. Notice that a notification, sign in to Wifi Network appears. This is the default behavior of android when connected to wifi with a captive portal.

Now try chatting. The design is responsive so you do not need to worry about its appearance.

To delete the messages. Simply double click the Chat App header. Click the red button that says “Delete Messages”.

You can also change your user name.

 

Code Explanation

Chat.html

 

Spread the love
  • 54
    Shares

Leave a Reply

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