Here’s a demo video
Just go to http://Witty.local/ on any device with a browser.
- Websocket connection with ESP8266 board
- LDR, RGB LED and button
- HTML page hosted from ESP8266 SPIFFS
This HTML page needs the whole
\data folder to be uploaded to the SPIFFS. Just keep it in the same folder as your sketch as in this repo and use Tools > ESP8266 Sketch Data Upload, which will copy all the files to the SPIFFS, and these will be accessible to your sketch. If you do not see this menu option, try installing the SPIFFS tool.
You’ll need to modify this line in
menuinterface.js to match you’r boards IP addres. Ideally this should work with
var connection = new WebSocket('ws://'+location.hostname+':81/', ['arduino']); but today I didnt have any luck getting it to work. You can try, might work in your setup.
This sketch is based on two examples FSBrowser.ino and WebSocketServer.ino. It’s basically running a HTTP server and Websocket server. The HTML/JS files are loaded from the SPIFFS. When it recieves certain commands on the websocket connection, it responds with a specific message. So this websocket connection is essentially working in a ping-pong fashion and it should work as fast as possible. I’ve seen it work consistently at around 230Hz, your mileage may vary. When testing at home with my Apple Airport Extreme, for some reason the connection keeps dropping every 30 sec to 1 min. To make it stable I had to add such delay statements to throttle it down. I’ve been playing with WireShark to analyse this problem with Markus’s help, if you have any idea let me know! Basically here’s what happens:
 Disconnected!  Disconnected!  Connected from 0.0.0.0 url:  Disconnected!  Connected from 0.0.0.0 url:  Disconnected!  Connected from 0.0.0.0 url:  Connected from 192.168.1.10 url: /  Got message: ping LmacRxBlk:1 LmacRxBlk:1 LmacRxBlk:1  Disconnected!  Disconnected!  Connected from 0.0.0.0 url:  Disconnected!  Connected from 0.0.0.0 url:  Disconnected!  Connected from 0.0.0.0 url:
The connections drops, the browser tries to reconnect but the IP is strangely 0.0.0.0. Becauce of these multiple connection requests, the ESP8266 throws a
LmacRxBlk:1, saying its TCP buffer is full. I got it to work on a non-Apple router by disabling Wifi sleep mode. But with an Apple Airport Extreme, the only thing that seems to work is throttling it down. I know for sure that this is not an ESP8266 issue because of this video. Let me know if you have any ideas!
- HTML page rendered on desktop browser
<img src="http://AdityaTannu.com/images/Websockets3.png" align="middle"alt=Fountain>
- Arduino IDE 1.6.7
- ESP8266/Arduino Core (latest form git, but the 18.104.22.168 release should work too)
- arduinoWebSockets library
- As explained above, the connection drops every now and then
- Websocket connection doesn’t work with mDNS or
location.hostnamefor some reason
- Cannot handle multiple clients
- Try to use AngularJS and Bootstrap to make the pge look better as suggested by @nikil511.
- Not use jQuery if not absolutely necessary