• Skip to main content
  • Skip to primary sidebar

RNTLab.com

The Ultimate Shortcut to Learn Electronics and Programming with Open Source Hardware and Software

  • Courses
  • Forum
    • Forum
    • Ask Question
  • Shop
  • Account
  • Blog
  • Login

[Full Tutorial] ESP32 Remote Control with WebSocket

Q&A Forum › Category: ESP32 › [Full Tutorial] ESP32 Remote Control with WebSocket
1 Vote Up Vote Down
Steph asked 8 months ago

Hey guys!

I’ve been following your work around the ESP32 for a while now. And I continually notice your habit (or preference?) of systematically using the Javascript object XMLHttpRequest. And I must admit that I find it hard to understand this trend, when there are nowadays other, more efficient, lighter and above all faster ways to manage asynchronous interactions between a server and clients. For example, Javascript now offers the more modern Fetch and Async/Await APIs. You can take a look at one of my GitHub project which uses the Async/Await Promises for example:

ESP32 Asynchronous Web Controlled Thermostat

I had made this mini-project for Yves B., following a discussion on RNT Lab, to help him start his own project. I had also posted a reference to my project to share it with your community.

But there is another technology supported by Javascript even more interesting: the WebSocket protocol. Today, I would like to shed some light on how to implement it efficiently for the ESP32. You’ll see that it has only advantages over other techniques. I have recently written a comprehensive tutorial on the subject:

ESP32 Remote Control with WebSocket

I’m sharing it here, because I think it may also be of interest to most of your readers.
If you take the time to read it, feel free to share your opinion with me on this thread.

My intention is not to overshadow your work, quite the contrary, but rather to add to it what I think is interesting. I hope that you’ll welcome my approach.

Best wishes,
Steph

Question Tags: websocket
14 Answers
0 Vote Up Vote Down
Sara Santos Staff answered 8 months ago

Hi Steph.

Thanks for sharing.
I’ve already answered you in our comments section.
We’ll take a look at it and integrate websockets in our projects as it seems a great option for many of our applications.

BTW, great tutorial that you’ve written 🙂

Regards,
Sara

1 Vote Up Vote Down
Steph answered 8 months ago

Yes, I saw your answer (because I answered it myself) 😉
Thank you Sara.

1 Vote Up Vote Down
Jean Pierre Daviau answered 8 months ago

Hi,
 
 
I am trying to get  my card  esp32 wroom on Platformio….  It is not on the list so Platformio refuses to upload the sketch.

Regards,
 
JPD

1 Vote Up Vote Down
Jean Pierre Daviau answered 8 months ago

Hi,
This did the job:
I created   esp32-wroom.json  in  C:\Users\user1\.platformio\platforms\espressif32\boards

---- begin ---
{
  "build": {
    "arduino":{
      "ldscript": "esp32_out.ld"
    },
    "core": "esp32",
    "extra_flags": "node32s",
    "f_cpu": "240000000L",
    "f_flash": "40000000L",
    "flash_mode": "qio",
    "mcu": "esp32",
    "variant": "Node32s"
  },
  "connectivity": [
    "wifi",
    "bluetooth",
    "ethernet",
    "can"
  ],
  "debug": {
    "openocd_board": "esp-wroom-32.cfg"
  },
  "frameworks": [
    "arduino",
    "espidf"
  ],
  "name": "node32s",
  "upload": {
    "flash_size": "4MB",
    "maximum_ram_size": 327680,
    "maximum_size": 4194304,
    "require_upload_port": true,
    "speed": 460800
  },
  "url": "https://www.banggood.com/ESP32-Development-Board-WiFi+bluetooth-Ultra-Low-Power-Consumption-Dual-Cores-ESP-32-ESP-32S-Board-p-1109512.html?rmmds=search&cur_warehouse=USA",
  "vendor": "Aiyarafun"
}
----- end -----

JPD

0 Vote Up Vote Down
Steph answered 8 months ago

Hi Jean-Pierre,

If your board matches the one pointed to by the url property in your JSON descriptor :



It is available in PlatformIO (as in the Arduino IDE) under the name DOIT ESP32 DEVKIT V1 :

0 Vote Up Vote Down
Jean Pierre Daviau answered 8 months ago

I will give it a try

0 Vote Up Vote Down
Steph answered 8 months ago

This is precisely the config I used in my tutorial. Watch the project setup video:

https://m1cr0lab-esp32.github.io/remote-control-with-websocket/platformio-ide/

Too bad… you can’t embed a video :-/

0 Vote Up Vote Down
Jean Pierre Daviau answered 8 months ago

Hi,

What can I do if platformio does not chosse the right port even is I desabled it?

Wher can I set the port manually?

JPD

0 Vote Up Vote Down
Steph answered 8 months ago

You can have a look in the doc to see the options you can add in the configuration file platformio.ini:

Upload options

0 Vote Up Vote Down
Jean Pierre Daviau answered 7 months ago
Hi,

<div
id="led" class="%STATE%"></div>

How do you call the %STATEPLACEHOLDER% Are they used by javascript(), or
String processor(const String &var) {
    return String(var == "STATE" && led.on ? "on" : "off");
}
?

Regards,

JPDaviau



REF:https://m1cr0lab-esp32.github.io/remote-control-with-websocket/web-ui-design/
0 Vote Up Vote Down
Steph answered 7 months ago

Hi Jean-Pierre,

It has nothing to do with Javascript…

The %STATE% marker is used by the template processing engine of the ESPAsyncWebserver library. This issue is discussed in Template processing section of Web Server Setup chapter in the tutorial:

Go take a look at it

You can also take a look at the library documentation that deals with this feature.

Cheers,
Steph

0 Vote Up Vote Down
Jean Pierre Daviau answered 7 months ago

“”

0 Vote Up Vote Down
Steph answered 7 months ago

What are you talking about???…
What does this have to do with the tutorial?

0 Vote Up Vote Down
Jean Pierre Daviau answered 7 months ago

Nothing, I took it out . :o)

Primary Sidebar

Login to Ask or Answer Questions

This Forum is private and it’s only available for members enrolled in our Courses.

Login »

Latest Course Updates

  • [eBook Updated] Download Build Web Servers with ESP32 and ESP8266 (2nd Edition) February 8, 2021
  • [eBook Released] Build Web Servers with ESP32 and ESP8266 (version 1.0) October 27, 2020

You must be logged in to view this content.

Contact Support - Refunds - Privacy - Terms - MakerAdvisor.com - Member Login

Copyright © 2013-2021 · RandomNerdTutorials.com · All Rights Reserved