Websockets compatibility/Implementation HTML5 vs Socket.io

[hallard]

Hi Markus,
I developed my test environment with my html/javascript and nodejs server to be easier to test my html/js code before putting it into ESP8266. I used websocket socket.io library. All on my environment is working fine, but now I'm trying to put all thing into ESP and here is my problem :

although your sample code html/js are working fine with ESP8266, as soon as I'm trying to connect to ESP8266 with socket.io it does not work or even connect.
I was thinking websockets was "standard" but it seems libraries may have different implementation.
At startup I wanted to use the HTML5 one on client side (the native one in browser, same as your examples) but for the same reason I didn't not succeed to connect with this one from my client broswer to my nodejs server running socket.io

I love socket.io because it implements all disconnect/reconnect mechanism (and other) but Im' afraid may be I need to use the basic HTML5 one to get it working with you lib ?

Any hints or explanation would be useful for my understanding because I'm lost on websocket jungle.
Thanks for your help

[Links2004]

socket.io is a protocol on top of websockts.
yes its very nice, have some socket.io client code for the AVR, and use it for communication in all my nodejs projects.
Have a mesh of nodejs processes running on it :)

the protocol basics are here:
https://github.com/socketio/socket.io-parser/blob/master/index.js#L147

[hallard]

Thanks, I will take a look onto this one.
Are you able to do websocket to ESP8266 with a js socket.io client on browser ? If so which lib are you putting into ESP8266 ?

[Links2004]

i have done the other part connecting the ESP/AVR to a socket.io server (nodejs).
to get it working the other way around some Implementation for the socket.io protocol is needed.
for the Basics it will not be that hard (if you skip the different channel and subscribe stuff).

[hallard]

Oh by the way I reverted to HTML5 browser integrated websocket and I'm able to talk with your ArduinoWebSocket compiled into ESP8266 ;-)
But for testing I needed also to change my nodejs to npm install websocket instead of socket.io
Like this my browser client code can work with ESP8266 and Nodejs test server with no modification ;-)
No more socket.io to put into spiffs system also, so things are keeping simple, like this :-)

[hallard]

anyway, amazing what we can do with this little chip, really cool
thanks for the websocket library

[Links2004]

looks nice, is it bootstrap?

[hallard]

Yes bootstrap + some goodies such

• Chartjs to graph
• bootstrap-slider for advanced sliders
• bootstrap-switch for nice on/off switches

all framework minified+gz to be positionned in spiffs FS ;-)

[Vitorbnc]

Hey, could you guys share some of your socket.io for Arduino code?

[Links2004]

i plan to create 2 classes for server + client out of it and add it to this repo,
butt will need some time.
first I will allow to use this lib async on ESP.

[hallard]

@Vitorbnc
I wasn't able to talk to ESP with socket.io client (on browser) to ArduinoWebSocket due to different implementation as Markus said. So I used Markus ArduinoWebSocket Lib on ESP (classic Websockets) with HTML5 classic socket on browser, one advantage, I do not need to put socket.io client js code on SPIFFS ;-)
Here is my websocket event on ESP (based on Markus example)

/* ======================================================================
Function: webSocketEvent
Purpose : Manage routing of websocket events
Input   : -
Output  : - 
Comments: -
====================================================================== */
void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t lenght) {

  switch(type) {

    case WStype_DISCONNECTED:
      Debugf("--- [%u] Disconnected!\n", num);
      client_state = CLIENT_NONE;
    break;

    case WStype_CONNECTED:
    {
      IPAddress ip = webSocket.remoteIP(num);
      Debugf("+++ [%u] Connected from %d.%d.%d.%d url: %s\n", num, ip[0], ip[1], ip[2], ip[3], payload);

      // send message to client
      //webSocket.sendTXT(num, "Connected");
    }
    break;

    case WStype_TEXT:
    {
      String msg = String((char*)payload);

      if (msg=="system") {
       client_state = CLIENT_SYSTEM;
      } else if (msg=="config") {
       DebuglnF("config");
       client_state = CLIENT_CONFIG;
      } else if (msg=="log") {
       DebuglnF("log");
       client_state = CLIENT_LOG;
      } else if (msg=="spiffs") {
       DebuglnF("spiffs");
       client_state = CLIENT_SPIFFS;
      } else if (msg.startsWith("sensors:") && lenght >= 9 ) {
        int val = msg.substring(8).toInt();
        DebugF("sensor=");
        Debugln(val);
        client_state = CLIENT_SENSORS;
        if (val>=2 && val <=300)
          client_refresh = val;
        else
          client_refresh = 2;
     }

      // send message to client
      // webSocket.sendTXT(num, "message here");

      // send data to all connected clients
      // webSocket.broadcastTXT("message here");
      Debugf("ws [%u] msg[%d][%d]: %s\n", num, lenght, client_state, payload);
    }
    break;

    case WStype_BIN:
      Debugf("[%u] get binary lenght: %u\n", num, lenght);
      hexdump(payload, lenght);

      // send message to client
      // webSocket.sendBIN(num, payload, lenght);
    break;
  }

}

and the client side I'm using ReconnectingWebSocket lib (to allow automatic re connection) but it's not mandatory
On browser side, I just let some WS code

window.onload = function() {  

    // open a web socket
    socksrv = 'ws://'+location.hostname+':8081';
    ws = new ReconnectingWebSocket(socksrv);

  // When Web Socket is connected
    ws.onopen = function(evt)   {
        console.log( 'ws reconnect');
        $('#mdl_wait').modal('hide');   
        $('#connect').text('connected').removeClass('label-danger').addClass('label-success');  

        elapsed=0;
        clearInterval(el_timer);
        refreshPage();
    };

    // When websocket message
    ws.onmessage = function (evt) { 
        var obj =  eval( "(" + evt.data + ")" );
      var msg = obj.message;
      var data = obj.data;
      appendLog('ws msg:'+msg+' => '+ JSON.stringify(data) );
      if (msg=='sensors')   refreshSensors(data);
      if (msg=='system')    refreshSystem(data);
      if (msg=='log')   appendLog(data);
    };

    // When websocket is closed.
    ws.onclose = function(code, reason) { 
        $('#connect').text('disconnected').removeClass('label-success').addClass('label-danger');   
    };

  // When Web Socket error
    ws.onerror = function(evt)  {
        appendLog( 'ws error');
    };
}

[hallard]

@Links2004
Like that, I can't wait to test ;-)

[Links2004]

@hallard async one for testing:
https://github.com/Links2004/arduinoWebSockets/tree/async

[hallard]

@Links2004
thanks, just in few words, I'm not sure to understand all deep work done inside, what's the "async" version does better than the sync (I'm using it as server, client is browser), just to be sure that I'm understanding well?
Thanks

[Vitorbnc]

@hallard thanks for sharing code! I'd like to know what exactly the async lib does too.

[Links2004]

the sync version do handle all stuff in the arduino loop (the loop call of the lib) and one client after a other.

the async version is event bases,
this means it can handle clients in parallel and independent form what ever the arduino loop doing right now.
by this its possible to get more performance and the websocket not stop working when long stuff is done in the other arduino code some where.

but keep in mind the webSocketEvent callback will work like an interrupt then so no delay in there.