image
Ryan Sass

NOTE: I have pulled my MQTT ChatBot offline for the time being. If you’d like to experience the demo, please email me to set up a demo.

The website will still connect to test.mosquitto.org with WebSockets, however my ESPP8266 is disconnected, meaning you will not get a response.

If you subscribe to [chatbot/demo/webpage/message] channel, you can see your messages sent from this webpage 🙂

MQTT & ESP8266 Simple ChatBot

MQTT & ESP8266 Simple ChatBot

Send a Message:
Connection Status: Not Connected
Last ESP8266 Response:

How to Use

  1. Type a message in the input box
  2. Click on Send
  3. The message is sent to the ESP8266 via MQTT/Websockets/TCP/IP
  4. Read the response from ESP8266 in the Response Section
  5. If disconnected, try refreshing the page.

What is this demonstrating?

This showcases my ability to successfully build and deploy code in multiple languages (HTML, CSS, JavaScript, and C++) and successfully send data across the internet with feedback to confirm.

Commands to Send ChatBot:

  • Hello
  • Time
  • Time of Day
  • Location
  • Origin
  • Sing
  • [Pose a question]?
  • Heart Beat
Read Project Description
Return Home

What is happening?

When SEND is pressed, the information in the message window is packaged into MQTT protocol, which is then packaged into a WebSocket Message (with SSL security) and then sent via TCP/IP over the internet to the MQTT Broker. When the MQTT client is connected, it receives the message from the Broker and unpackages the message layers. From there, it is decoded (each character comes in as ASCII code) and processed in the ESP8266 depending on the message input, and the process is then performed in reverse from the picture for the MQTT to respond. The response message is packaged, sent back, unpacked, and displayed in the response window of the web browser you’re looking at. Magic!

Skeptical?

  1. Connect your own MQTT client to IP: [91.121.93.94]
  2. To send messages, publish to topic: [chatbot/demo/webpage/message]
  3. To see responses subscribe to topic: [chatbot/demo/webpage/response]