Serial return to WebSocket client.

[indev2]

Hello me-no-dev.

I'm developing an html app that sends short control commands over websocket to serial>arduino. The esp8266 is obvious choice for this. I'm not a seasoned developer with much knowledge of c++ (3 months). My first web app is almost complete and at over 300KB with it's dependencies is quite large and still growing. I have played with the idea of storing this on SPIFFS using libraries and examples from Markus. I could not achieve reliable results. However using a modified version of your ESP_AsyncFSBrowser example and libraries the results are amazing. Well done and thank you. Now to my problem, my app requires full duplex serial <> websocket communication for the best user experience. Preferably as transparent as possible. I modified some code by tzapu https://github.com/tzapu/WebSocketSerialMonitor and this has served me well up to now.

String inputString = ""; boolean stringComplete = false;

void setup() {

Serial.begin(115200); delay(100);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) { delay(100); } Serial.println(WiFi.localIP()); webSocket.begin(); webSocket.onEvent(webSocketEvent);

inputString.reserve(128); }

void serialEvent() { while (Serial.available()) { char inChar = (char)Serial.read(); if (inChar == '>') { inputString += inChar; stringComplete = true; return; } else { inputString += inChar; } } }

void loop() {

serialEvent(); if (stringComplete) { String reply = inputString; inputString = ""; stringComplete = false; webSocket.broadcastTXT(reply); } webSocket.loop(); }

The above goes below the socket handlers in my sketch. I'm trying to include the serialEvent or something similar into your example ESP_AsyncFSBrowser but I'm encountering many problems. I don't yet fully understand the Async protocol and I know that my problem is not really an issue. I thought I would try to get your help anyway as there is next to no information available elsewhere and this could benefit others. Could you please suggest a coding example that would work in this case. Many thanks for now. indev2

[me-no-dev]

ok, let's see if I understand correctly :)

1. You are sending everything you get over the web socket to the serial
2. You read the serial into a string until you reach your termination char > and you send that to the web socket
3. You want to have that same functionality running with the AsyncWebServer

Have you looked at the latest code? It has Async WebSocket built-in :) or maybe that is the trouble you are having?

[me-no-dev]

Here is a fully async WebSocket to Serial implementation to fit in your sketch

AsyncWebServer server(80);
AsyncWebSocket webSocket("/ws");// url will be ws://esp-ip/ws

void onEvent(AsyncWebSocket * server, AsyncWebSocketClient * client, AwsEventType type, void * arg, uint8_t *data, size_t len){
  if(type == WS_EVT_DATA){
    //you have received a message from a WebSocket Client
    for(size_t i=0; i < len; i++){
      Serial.write(data[i]);
    }
  }
}

void setup(){
  //.... your setup before the WebServer stuff
  webSocket.onEvent(onEvent);
  server.addHandler(&webSocket);
  //setup the rest of the server
}

void loop() {
  serialEvent();
  if (stringComplete) {
    String reply = inputString;
    inputString = "";
    stringComplete = false;
    webSocket.textAll(reply);
  }
}

[me-no-dev]

One action you can take to battle large content size is to combine and gzip it. Some cache headers for static content are also good option to use in conjunction. If you have a static HTML file that includes some css and javascript files also served from the server and no other page uses those files, you are better off just combining the code into a single file and gzipping it. You will save lots of space and gain much speed. Compressing the javascript before including it is also a good idea :) I use https://javascript-minifier.com If for example you request /index.htm and /index.htm.gz exists instead, it will automatically be served to the client with appropriate mime-type and encoding headers.

[indev2]

@me-no-dev

Wow. Thank you so much for the rapid response.

Yes you have it right about what I need to do. And thank you for the gzip suggestion for the page and files. I must say your firmware can already serve my 7 files in under 3 seconds so to improve on that would be amazing.

It will be several hours before I can get back to you and test the code (work commitments). Thank you so much for now.

Here is my project discussion at post #1177 http://www.trainboard.com/highball/index.php?threads/introducing-dcc-a-complete-open-source-dcc-station-and-interface.84800/page-59

My Github files are not up to date.

Indev2

[me-no-dev]

Trains! Exciting :) If you are able to minify, combine and gzip the files, I can promise you under 1 second load time ;)

[hallard]

@indev2 Strange we're working on the same thing, I modified te Telnet2Serial sample to have both telnet and ansync websockets working, not best way but works as an example ;-) you can telnet 23 or using html page with async web socket (as @me-no-dev done) or both same time. But code is at home computer now (f**\ onedrive sync bug !!!) I'll post full sample code with html and js file later!!

[me-no-dev]

the included index.htm in the example is actually a WebSocket terminal that you can use to test the data.

[hallard]

hey man, thank you so much, I missed that great one, exactly what I wanted to do I left my memories on old fsbrowser that did not had this great console ;-) shame on me ;-)

[hallard]

@me-no-dev do you have the un-minified version of edit.htm file ? I would like to add text to remind the shortcut keyboard to save edited file ;-)

[me-no-dev]

it's mostly this

[indev2]

@me-no-dev

Many thanks for your help. I set things up as you suggested and got it working first time. Turns out I was very close in my own efforts before asking you here, I'd just not got the .textAll function quite right.

For others who may be interested, the above code examples are a working solution if you need to feed your 'Serial in' data on through the webSocket, at least for short messages.

For now the original issue is resolved and this can be closed.

Thanks again me-no-dev, I shall be moving on to implement your other suggestions regarding file compression. You get a big thumbs up from me for your excellent work here ;-)

I shall be bringing my project files up to date with this major update in the next few days.

Kind Regards

indev2

[me-no-dev]

thanks for the kind words and please let me know what your final results are :)

[hallard]

@me-no-dev I forked your repo, will do a PR for a nice terminal to serial with websocket example ;-)

[me-no-dev]

@hallard note how the current example is made for both platforms and do it the same way even if only for 8266 or the travis build will fail for it :)

[hallard]

@me-no-dev you mean talking about example filename?

[me-no-dev]

there is a .esp31b.skip file inside the ESP8266 example and a similar one for the ESP32 to let travis know not to compile against the wrong core

[hallard]

ok got it, just this file to avoid build test for the wrong platform, thanks

[indev2]

@me-no-dev

for sure I'm always checking in regularly around here ;-)

[hallard]

Hey guys, works fine terminal connected to Serial Monitor talking websocket with nice terminal jquery ;-)

I'm creating PR

[hallard]

Hi Guys, Project is now stored and available on my github, really thanks for this great and serious lib done by @me-no-dev https://github.com/hallard/WebSocketToSerial