How to Make an Arduino WebSocket Server with an ESP32

I'm working on a project that requires fast communication between an Arduino and a browser say on a computer or a phone I ultimately want the Arduino to act as a server and I need data to be able to be transmitted from the server to the client without the client making any requests so a WebSocket is a good tool for this job the WebSocket protocol has been around since 2010 and it provides full duplex communication over TCP it operates outside of HTTP but it can work on ports 80 and 443 which is good if you're behind a firewall that blocks other ports a WebSocket does not have a lot of the overhead normally found in things like HTTP which makes it great for things like browser-based multiplayer games but of course I want to get it working on an Arduino to make the networking side easy I'm gonna use an ESP 32 specifically an Adafruit hazaa 32 but any ESP 32 that's supported in the Arduino IDE should work open up the Arduino IDE make sure you have the ESP 32 board manager URL from espresso Flis 'td and install the ESP 32 board package in the boards manager in the library manager search for and install the WebSockets library from Markus Sattler I've installed version 2.1 point 2 just in case things change from the time I made this video at the top include the Wi-Fi and WebSockets server libraries will store our Wi-Fi SSID and password in some strings and create a WebSocket server object note that we're telling the server to listen on port 80 here the interesting part of the WebSockets server is that we'll need to create a callback function which is called inside the WebSockets library the library is looking for a function with specific parameters num is the assigned number of the client that has connected I believe the library can handle up to 5 clients it wants the type of message which we'll use to determine how to handle each message the payload which is just the data as raw bytes and finally it needs to know how many bytes are in the data whenever a new piece of data or client requests arrives the library will matically handle parsing it or assigning the client a new number then we'll get the option of doing an additional something in our code here if a client disconnects we'll just print it to our serial console we'll do the same if we get a new client connection but we'll also print the clients IP address finally while WebSockets supports raw binary data transmissions we'll just worry about handling text transmissions which will print to the console to test our server we'll just echo this text back to our client with the WebSocket send txt for this test we'll just ignore the other types of messages in setup we need to start our serial port and connect to the Wi-Fi access point once connected we'll print out the server's IP address to the console after that using the WebSockets library is pretty easy just call WebSocket dot begin to start the server and assign our callback with on event in loop we add WebSocket loop which looks for and handles any incoming WebSocket data from clients it also calls our callback with any new transmission received that's it select our ESP 32 board and the correct serial port upload it and open a console once the ESP 32 connects to your local access point it should print out its own IP address save that because we'll need it for the next part a good way to test the server is to create a web page with some WebSocket code in it but that's a pain so let's just whip something up in Python in a new terminal enter pip install web socket - client this assumes of course that you have Python already installed on your computer in a new text document import the WebSocket module create a new web socket and assign it to a handle then connect to the IP address we got from the server to test our simple echo server we're just going to ask the user for input and send that out over the WebSocket connection then we wait to receive the response and print it to the screen after that close out the connection make sure your computer is connected to the same network as your ESP 32 I'm going to use this wrt54g to create a test network because reason I'm gonna fire up wireshark in the background so we can see what's going on with the WebSocket server running start your python script in the server console you should see a message stating that a new client has connected in Wireshark you can see the TCP handshake followed by the WebSocket handshake which means we have a connection type a message in the terminal and it should be echoed right back at you the server console should show you this message and you can see it in plain text on Wireshark as well the Arduino Wi-Fi and WebSocket libraries are pretty robust when it comes to dropped connections for example let's start a new connection from our client to our server and then let's pretend the network goes down oops I'll plug the router back in and wait for the wireless LAN to come back up make sure your computer is connected to the network again and try sending your message it should fail if you look at the server console you should see that it gracefully dropped the client without us having to do anything try the Python script again and you should have no problem connecting to the server and sending a message I did all this without interacting or restarting the ESP 32 this shows that the ESP 32 can handle packet and connection losses without a problem which is great news for my project if you've been following along and you'd like to see the complete code check out the link in the description I'll continue posting updates as I make progress on my project happy hacking

Channel: Shawn Hymel

Views: 41,823

Keywords: Arduino, electronics, IoT, ESP32, WebSocket

Id: ZbX-l1Dl4N4

Length: 5min 58sec (358 seconds)

Published: Thu Nov 01 2018