ESP32 LoBo MicroPython WebSocket Server with ReactJS & MST

In this tutorial a LoBo MicroPython WebSocket server will broadcast temperature data from a DS18b20 sensor connected to an ESP32. A web page built with React and MobX State Tree on a Raspberry Pi will be the client.
All the code, schematics, notes and updates are available on my website: www.rototron.i...
My GitHub repo for this tutorial: github.com/rda...
Previous tutorials in this series:
Part 1: www.rototron.i...
Part 2: www.rototron.i...
Part 3: www.rototron.i...
Part 4: www.rototron.i...
Part 5: www.rototron.i...
Playlist for all videos: • ESP32 MicroPython Tuto...
LoBo MicroPython Wiki: github.com/lob...
The author of the WebSockets server Jean-Christophe Bos has more information available at the following site: microwebsrv.hc...

[@rdagger]

Unfortunately, it looks like LoBo MicroPython has been abandoned by the author. I recommend using regular MicroPython: www.micropython.org. Help is available on the MicroPython forum: forum.micropython.org The MicroWebSrv library used in this video also works on the regular version: microwebsrv.hc2.fr

[@jeffreychow8853]

Is the regular Micropython firmware still the way to go? I'm new (and have followed all your tutorials up to this point) and Lobo sounded great with all the built in stuff to work with the ESP32 wirelessly, has anything filled that hole? Also, there's MicroWebSrv2 now, any changes using that? Love your tutorials, they're the best I've seen!

[@rdagger]

@@jeffreychow8853 Both MicroPython and CircuitPython are great. I would not use LoBo anymore I have not tried the new version of MicroWebSrv. It looks similar to the original but with a lot more features. I do all my MicroPython development now in VS Code. There are great extensions for VS Code to work with MicroPython (Pymakr for the ESP32 and Pico-Go for the Raspberry Pi Pico). In terms of wireless, I use the FTP library by RobertHH if I need to do a lot of file management or if I need to update a deployed project.

[@JohnoScott]

Totally excellent excellent excellent video. I love your pace and the fact that you walk through the code. Keep up the great work

[@davesemmelink8964]

This is a great series of tutorials. I can't wait for the next installment!

[@tech-dips]

Just wow! Too many information to grasp but thanks a lot for the nice tutorial, much appreciated!

[@TheOleHermit]

That's why I watch his videos at 75% playback speed.😎

[@cam_DA_Hawkdriver]

You have a talent for teaching! Great work! I’m really liking these videos.

[@101AndyBear101]

Loving your videos! Clear and intuitive!

[@Jakub1989YTb]

Sir, you just earned my subscription.

[@cad3175]

Excellent, tanks v much

[@marcinsobiecki5656]

Super ! Thx 😉

[@ernestojimenez6085]

Nice!

[@foadyousefi]

Great tutorials. Could you please make a video about led matrix (or more specific max7219) with esp32 using micropython please.

[@rdagger]

Thanks. There are several existing MicroPython libraries on GitHub for the Max7219 with great examples: github.com/mcauser/micropython-max7219 github.com/adafruit/micropython-adafruit-max7219

[@foadyousefi]

rdagger68 thanks for your fast reply. I'm using the first one. But finding the right pins is pain. I used the pins mentioned for esp8266, but it just turn all the Leds on. The one from adafruit is old. For ex changing the state of a pin done by calling "pin.value(1)" now, but that repo uses "pin.low". It might not be that hard to update these. Still I highly appreciate if you make a video, also if you make tutorial about finding the right pin numbers for right job, especially for spi. Thanks again

[@rdagger]

Did you check out my ESP32 OLED tutorial? It has a lot of info on using SPI:. www.rototron.info/raspberry-pi-esp32-micropython-oled-tutorial/

[@foadyousefi]

Finally I figured out how to make it work, thanks to your oled tutorial. Also forked mcauser's repository and made some additions here: github.com/7kmCo/micropython-max7219 I will try to add even more to this repo. Any comments on my repo is highly appreciated. Looking forward to see more from you :-)

[@AbuElameen]

can you make a video about ESP32 WebSocket server transmitting capacitive liquid level readings to a React client on a tablet.? thnx

[@craigburnett4327]

Would you have a tutorial on the water level react setup on esp32, it looks amazing, Thanks.

[@rdagger]

I added download links to my website. It's not a tutorial, but the implementation is identical to the thermometer.

[@craigburnett4327]

Thank you, works great. Do you have plans to do any more tutorials on websockets and react? Can you recommend a book/course to a beginner to go further. Regards, Craig

[@rdagger]

I have 2 projects in the planning stages that will probably incorporate WebSockets and React. In terms of learning, www.reactjs.org is a good place to start. Also www.leveluptutorials.com has some recent React tutorials but I haven’t watched them. Michel Weststrate (the creator of MobX) has a great tutorial: egghead.io/courses/manage-complex-state-in-react-apps-with-mobx It’s difficult to know where to start. The best way to learn for myself, is just to dive in and start coding (preferably a project that will motivate you). Then when you get stuck check out GitHub or NPMJS for code examples.

[@gmarf1]

Great series of tutorials - keep them coming. Vastly improved my knowledge of micropython and web sockets. MY main issue now is to get the power down on the websocket. The esp32 doesn't have much of a handle on low power modes apart from total oblivion (i'm using esp32-20181012-v1.9.4-632-g11bc38d55.bin from the mp.org forum at present). I was wondering whether a websocket would survive a full reset? Best Regards

[@rdagger]

Sorry, I don't know. You would have to experiment. You could also ask Jean-Christophe the creator of Micro WebSrv: github.com/jczic/MicroWebSrv Also Loboris might have some recommendations: loboris.eu/forum/index.php Thanks for the feedback.

[@tihogro4350]

Thank you for your video. Great explained, you have to keep doing this, hope will got more subscribers with time. I have a questing. If I open this thermometer from another computer in the same time, will it update the same way - in real time?

[@rdagger]

As long as the computer is on the same network, it should work the same. However, I don't think this application will support multiple simultaneous connections.

[@BillXT11]

Amazing! You are great with your tutorials! Keep it up with such a good work!!! Maybe more videos of advance use of peripherals? what about ESP-NOW? or ESP-MESH? Regards!

[@rdagger]

Thanks, I don’t think ESP-Now or ESP-Mesh are implemented in MicroPython yet. I’m pretty sure they are on the roadmap for the standard and LoBo builds. I’ve been waiting for low power wireless and I will definitely make a video when MicroPython adds support.

[@BillXT11]

@@rdagger Do you have any example that the values can be showed in a table instead of using a React app? I want to have a simple example, to see my sensor value updating, just like the web server video you have. Thank you!

[@rdagger]

I was considering doing a video on logging sensors over the network to a database such as a MySQL server running on a NAS or an online hosted database such as MongoDb.

[@BillXT11]

rdagger68 that would be great too!! In my project I use the ESP32 as AP and connect directly with my phone (remote location, no router). I got your webserver example working, however I will like to improve the reading speed. That is why I started looking at websockets, but React apps are too much based on my current knowledge. Therefore the simple example with a html table or plot maybe? Regards and great job! I appreciate your knowledge sharing :)

[@BillXT11]

This is what I would like to do in micro python canvasjs.com/html5-javascript-dynamic-chart/ any idea it is possible?

[@rahulkhokhariya2686]

I have ESP8266. But Script code available till power on. Meaning that it not run after restart device. So, I want to run my script on boot time.

[@TheOleHermit]

The LoLin D32 Pro board has been discontinued?! But, but, but, only 2 days ago, I ordered v2.0.0 Rev1 from Amazon, thinking that it is the latest and greatest 🤦‍♂️. So, what is the latest ESP32 flavor of the month? Thanks for your series. Excellent delivery and guidance. 😎

[@rdagger]

There are many ESP32 boards now. I still use the Lolin32 Pro. MicroPython now supports psRAM so any board you get that comes with at least 4MB of psRAM should be OK. I haven’t tried them, but the TTGO boards are only $10 on eBay. I've heard good things about the M5Stack but again I haven't used them. I’m been focusing on the nRF52 lately so I’m not current with the latest ESP32 boards. You might get a better answer by posting your question to the MicroPython ESP32 forum: forum.micropython.org/viewforum.php?f=18&sid=94ada61a5cca0dcfc8a67e9df1af2f4e

[@TheOleHermit]

@@rdagger Thanks for the reply. Yeah, I also have the M5STACK (MS VStudio IDE) an Adafruit ESP32 board (CircuitPython IDE) and a few ESP8266 boards. Too many IDEs and flavors. So, my priority is staying mainstream with Thonny, microPython, and compatible hardware. After a few months' research and several learning curves, I'd really like to get on with some actual projects. I will be following your lead and videos. Thanks for the excellent service that you are providing for the maker community. nRF52, eh? Sounds interesting. See you there.😎

[@mohammedabujarad7854]

i have a problem, whenever i rest the esp32 it shows me this: I (1528) phy: phy_version: 3960, 5211945, Jul 18 2018, 10:40:07, 0, 0 WLAN connection succeeded! MicroPython ESP32_LoBo_v3.2.24 - 2018-09-06 on ESP32&psRAM board with ESP32 Type "help()" for more information. >>> W (11558) wifi: alloc eb len=76 type=2 fail, heap:272 W (11559) wifi: m f probe req l=0 W (12559) wifi: alloc eb len=76 type=2 fail, heap:272 W (12559) wifi: m f probe req l=0 W (13560) wifi: alloc eb len=76 type=2 fail, heap:272 W (13560) wifi: m f probe req l=0 ^X and whenever i ping the esp32 , i does not response and says : ping: mpy.local: Name or service not known thanks

[@rdagger]

Unfortunately, it looks like LoBo MicroPython has been abandoned by the author. I recommend that you use regular MicroPython: www.micropython.org. Help is available on the MicroPython forum: forum.micropython.org The MicroWebSrv library used in this video also works on the regular version: microwebsrv.hc2.fr

[@ajilful]

Esp32 over internet, is there a standalone way other than port forwarding? At the moment I'm using a workaround for which a server like raspberrypi needs to be always on. Any direct method to access esp32 over internet using micropython that you know?

[@rdagger]

It depends what you mean by access. You could use an easy online service such as Adafruit IO to log data. Or there are more challenging approaches such as a cloud based P2P server where the ESP32 would be a web client obviating the need to open any router ports.

[@ajilful]

@@rdagger Currently I run the broker on raspberry pi as I choose micro python for esp32. That gives some direction with adafruit io broker or similar available for micropython framework to explore. Thanks. 👍🙌

[@tubeDude48]

at 4:00 you entered dmesg | grep ttyUSB This gave a "grep" error msg, I also tried sudo as well, that didn't work either.

[@rdagger]

Do you have an ESP32 connected to a USB port on the Pi? What version of Raspbian are you running? What is the error message?

[@igotsixright]

Excellent tutorial! What if I had 50 ESP32s connecting to one web server (as they are avalaible) each delivering temperature and humidity and this data should display in real-time. Would you have any pointers on this configuration? I am using react and I have the components displaying currently, but only with static values as I am flabbergasted on how to make the connection between the ESP32s and web server. Tried POST requests and now trying web-sockets. Any ideas would be appreciated.

[@rdagger]

I don’t think running the websocket server on the ESP32’s (like I did in the video) would be the best solution for such a large quantity of sensors. I haven’t set up anything on that scale but I think a technology like MQTT would be better suited for the transmission of sensor data. You can use MQTT over websockets and probably want to store the data in a database that is accessible to the web server and exposed to your client via a backend.There are online solutions that could be helpful such as mLab or Adafruit IO. Connecting a real-time React web server to a database back end is not a trivial task but there are several technologies that do a lot of the heavy lifting for you such as MongoDB Stitch, Firebase, Meteor JS, Apollo and Socket IO. There are probably several newer frameworks too, but I haven’t been doing much web programming this last year. An easier approach is to run an MQTT broker on a Raspberry Pi which could consolidate all the data from your sensors. Then the single Raspberry Pi could transfer the data to your web server using a web-socket or just a Rest-API.

[@igotsixright]

@@rdagger Thank you so much for the MQTT awakening! I went down that route and it does seem to be the better one with the situation I have. Performed: 1. I coded the Arduino/ESP32 dongle as a MQTT client USING: #include "WiFi.h" #include #include 2. I created an Ubuntu Server and have MQTT Mosquitto (BROKER) installed and running 3. I installed MQTT Explorer on my computer and connected with the MQTT Broker on the Ubuntu Server I can see that this constellation works because I see the "Topics" and "Messages" I coded into the ESP32. BUT....nothing in my life goes absolutely smooth! My problem now is trying to get the data from the server to display on my webpage using REACT. All the pages I looked into indicated there being 2 options. 1. MQTT over Websocket 2. MQTT directly Since I tend to go the simplest way with least resistance I tried the 2 option and so far with no luck. Not sure why. Any IDEAS??? COMPONENT: class Station01 extends React.Component { constructor() { super(); this.state = { temp: "0", level: "0", endpoint: "mqtt://192.168.1.10" }; } componentDidMount() { const {endpoint} = this.state; var client = mqtt.connect(endpoint); client.subscribe('dongle/station1/stateofcharge'); client.subscribe('dongle/station1/temperature'); client.on('message', function (topic, message) { if(topic.toString() === 'dongle/station1/stateofcharge'){ this.setState({level: message.toString()}) } if(topic.toString() === 'dongle/station1/temperature'){ this.setState({temp: message.toString()}) } }); } renderTempField01(v) { return React.createElement(TempField01, {value : v}); } renderLevelField01(v) { return React.createElement(LevelField01, {value : v}); } render() { const {temp} = this.state; const {level} = this.state; return ( React.createElement("div", { className: "station" }, this.renderTempField01(temp), this.renderLevelField01(level))); }}

[@igotsixright]

It is done :) I changed over to MQTT over Websockets and used mqtt.js and now my life is complete! AWESOME!

[@rahulkhokhariya2686]

I have ESP8266. But Script code available till power on. Meaning that it not run after restart device. So, I want to run my script on boot time. Any Solution ?

[@rdagger]

You can create file named main.py. It will run automatically on boot.

[@jrborba]

This change a little bit. There's no more flash.sh file inside the ".ZIP" file. Try Micropython.bin, and was unsucessful.

[@rdagger]

I just downloaded all 6 prebuilt firmwares from the LoBo wiki and they all still contain flash.sh. Are you sure you are downloading from the correct site?: github.com/loboris/MicroPython_ESP32_psRAM_LoBo/wiki/firmwares#download-links-to-the-latest-firmwares

[@jrborba]

You are right. The flash.sh file is not INSIDE the directory, it's in the up directory. Thanks for clearing this. Keep up the excellent work.

[@xyottax4925]

Module RPI.GPIO please

[@magraz_gaming]

does this work on a ESP8266?

[@rdagger]

Sorry LoBo MicroPython is only for the ESP32.

[@RanjanUpadhyay]

hey .. how can i contact you i have project you might like to work on

[@rdagger]

www.rototron.info/resources/contact/

[@jpedrodiastubee]

Line 34 ( time 10:00) The word dict is a reserved word in Python and is been used as a variable name.