Hi.
You’re right. That’s not the expected behavior.

Open two web browser windows on the web server IP address.
Open the javascript console in both windows.
Drag the slider in one window. Tell me what do you get in the javascript debugging console for each browser window.

At the same time, check if you’re getting any error messages on the ESP32 board.

Regards,
Sara

Sara,
Thanks for your response!
Can you tell me how to attach a screen shot file on this forum? Apparently you cannot just copy and paste.
 
Ed Wilson

Hi.
You need to upload the pictures to a server and then share a link to them.
You can use google drive, dropbox, imgur, or other.
Regards,
Sara

Ok, Sara, you should be able to download a screen shot (javascript.jpg) of two windows at the local IP address of Project 2.4 with the javascript console enabled at the following URL:
k0kc.ddns.net/uploads
As you can see, there is nothing to indicate a problem. I used the Google Chrome browser but I get similar results from Firefox.
 
When you mention error messages on the ESP32 board, do you mean compiler errors?
 
Thanks!
 
Ed Wilson

Hi.
 
I’ve taken a look at the project, and it’s working as it’s supposed because it doesn’t have the required sections of code to update all clients simultaneously. 
I don’t know why at the time I created the eBook I didn’t do that.
 
To update all clients, there are a few modifications you need to do on the main.cpp and script.js files.
On the main.cpp you need to include a function that notifies all clients:

void notifyClients(String sliderValue) {
  ws.textAll(sliderValue);
}

 
Then, on the handlwWebSocketMEssage() function you need to call the notifyClients() function to update all clients whenever we receive a message via websocket:

void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {
  AwsFrameInfo *info = (AwsFrameInfo*)arg;
  if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
data[len] = 0;
    sliderValue = (char*)data;
    dutyCycle = map(sliderValue.toInt(), 0, 100, 0, 255);
    Serial.println(dutyCycle);
    notifyClients(sliderValue);
  }
}

 
On the Javascript file, you need to update the slider values when the client receives a message via websocket protocol:

function onMessage(event) {
  console.log(event.data);
  var sliderValue = event.data;
  document.getElementById("pwmSlider").value = sliderValue;
  document.getElementById("textSliderValue").innerHTML = sliderValue;
}

 
Here are links to the modified files:

• main.cpp: https://gist.github.com/sarasantos/00208ce745b24f9ebb54edacaf2e28d1
• script.js: https://gist.github.com/sarasantos/be179720497958b3798347d7342002f5

 
Regards,
Sara
 

Sara,
 
Thank you so much! I certainly would have not figured this out on my own as I have not yet started trying to understand the code. I was starting to question my own abilities.
 
The project is working as expected now and I can move forward.
 
The link to the screen shot that I sent you is no longer active.
 
Ed Wilson

Great!
I’ll mark this issue as resolved. If you need further help, you just need to open a new question in our forum.
Regards,
Sara