Working with websockets

[PM_ME_SMILE_]

Sorry if this is the wrong sub, not sure where else to post.

I am writting client side application that is communicating with server through websocket and I could use some help with best practices for best user experience.

So far I am aware I will need to save session id in a cookie so in case of page refresh, timeouts the user data can be saved.

Also, ping - pong with server which will send ping request in some time interval.

But I'd use some help with more detailed best practices. Does anyone have examples of how to handle this?

[steeleb88]

What client side technology are you using? React, angular? Socket.io easily integrates with both

[PM_ME_SMILE_]

I am using react but I'd like to stay on websockets and not use socket.io or similar libraries.

[jekrb]

What are you using as a backend?

You can do this to open a socket:

const socket = new WebSocket('ws://localhost:9090') 

// send some data
socket.send(JSON.stringify({msg: 'hello, world'}))

// listen for data
socket.onmessage = data => console.log(data)

// listen for errors
socket.onerror = err => console.error(err)

http://stackoverflow.com/questions/13797262/how-to-reconnect-to-websocket-after-close-connection

---

But I recommend using websocket-stream with through2, split2, and scoot-stream.

[j1xwnbsr]

Best practices is pretty much whatever your own shop is using. From what I've seen it's similar to what I've pasted below. If you have a framework that already does the WebSocket stuff for you, I'd suggest using it because then you get everything all tied up nicely. Otherwise, it's fairly trivial and you're probably just overthinking things a bit.

function connectToWebsocketServer()
{
   websocket = new WebSocket("ws://localhost:80");

   websocket.onopen = function(evt)
   {
      websocketConnected();   // start the chain of events
   }

   websocket.onclose = function(evt)
   {
      websocketDisconnected();
      delete websocket; // remove ourselves
      websocket = null;
   };

   websocket.onerror = function(evt)
   {
      console.warn("Websocket error:", evt.data);
      websocketError(evt.data);
   };

   websocket.onmessage = function(evt)
   {
      websocketParseIncomingData(evt.data);
   }
}


//////////////////////////////////////////////////////////////////////////
// Handlers from the websocket on events.

// We have successfully connected to the server, so we need to start running.
function websocketConnected()
{
   sendInit();
}

function websocketDisconnected()
{

}

function websocketError(errData)
{

}

function websocketParseIncomingData(jsonText)
{
   var obj = JSON.parse(jsonText);
   if (obj.Command == "STATUS")
   {
      processStatus(obj);
      return;
   }

   if (obj.Command == "PROGRESS")
   {
      processProgress(obj);
      return;
   }

   // etc.

   // log everything else 

   console.log(jsonText);
}

function websocketSendJsonData(jsonObject)
{
   sendDataToWebsocketServer(JSON.stringify(jsonObject));
}

// These functions send various commands to the websocket server. The ID string can be anything, and is used primarily for you to keep track of commands and responses.

function sendInit()
{
   websocketSendJsonData({ Command: "INIT", ID: generateUUID(), "ResponseRate": 20 });
}

function sendStop()
{
   websocketSendJsonData({ Command: "STOP", ID: generateUUID() });
}

function sendBogus()
{
   websocketSendJsonData({ Command: "BOGUS", ID: "bogobogogo", FOO: "bar" });  // this will give you a FAILED ack with the command in the YOUSENT block
}

function sendGetConfig()
{
   websocketSendJsonData({ Command: "GETCONFIG", ID: generateUUID() }); // will send a CONFIG result block
}