Uncategorized

SocketIO/ Websocket

Problem#

The problem, which we are addressing here, is to demonstrate the benefit of WebSocket / SocketIO over AJAX or HTTP calls. Idea is to let browser render the data automatically after an update happens at backend. Instead of client refreshing its screen.

We are developing a simple application for demo, which has a button, and underneath that, a text displaying latest data value from backend.

Traditional approach#

In order to retrieve the latest data from back-end, client (browser) needs to perform some action like a button click, which will fetch the latest data. This was not client friendly as explained below.

Tech Stack used#

  • Node# As a backend server to expose APIs for landing page and API to retrieve latest data.
    • Node modules used are fs & express. fs is used for file reading and express to ease routing.
  • JQuery# For making Ajax calls to retrieve latest data.

Implementation#

Install node js.

Install express if not already installed.

Create a project structure as below with (note node modules and package.json are added as we installed express)

  •   index.html represents landing page and
  •   app.js is backend Node server.

Index.html# is a simple html page which has Button Click me, clicking on the button invokes an ajax call at backend that retrieves latest data from backend and renders data on the text underneath the button.

App.js# is a java-script which represents node server, the core logic here is to

  • Read index.html
  • Once the file is read, expressjs registers http://localhost:8082/  to send this file to browser whenever http://localhost:8082/  is accessed from browser.
  • setInterval() JavaScript function is used to update the data at the backend every 1 second.

Now start the node server, As you can see the data is incrementing every second.

Now access the browser, current value is 0.

Press button Click Me, you will see latest data. 159

Git Location#

https://github.com/gotechmind/Miscellaneous/tree/master/SocketIO_Old

SocketIO/ Websocket approach#

We will solve the same problem by removing the button and letting the websocket render the html whenever data changes at backend. AJAX is replaced by websocket.

Tech Stack used#

  • Node# As a backend server to expose APIs for landing page and API to retrieve latest data.
    • Node modules used are fs, http, socket.io & express. fs is used for file reading, http & socket.io for websocket capabilities and express to ease routing.
  • JQuery# For making Ajax calls to retrieve latest data.

SocketIO is a powerful java script library which is being created on top of websocket which provides various features like fallback etc.

Install socket.io & express, if not already there.

Create a project structure as below with (note node modules and package.json are added as we installed express)

  • index.html represents landing page and
  •  app.js is backend Node server

Index.html# is a simple html page which loads jquery and socket.io javascript files. Listens on socket for data, once the data is received the html is dynamically updated with latest data.

App.js# is a java-script which represents node server, the core logic here is to

  • Read index.html
  • Once the file is read, expressjs registers http://localhost:8082/  to send this file to browser whenever http://localhost:8082/  is accessed from browser.
  • Registers a server socket with httpServer.
  • setInterval() JavaScript function is used to update the data at the backend every 1 second.
  • Whenever the data is updated a message is emited with event name data and value data.

Now start the node server, As you can see the data is incrementing every second and User is also connected.

Check the browser data is automatically updated every second.

Behind the scene if you see F12, you will notice that the protocol is switched to ws:// from http whenever a connection is established between client and server. And connection remains active until browser is closed.

Git Location#

https://github.com/gotechmind/Miscellaneous/tree/master/SocketIO_New

Conclusion#

We demoed how websocket removed the dependency on client taking actions for latest data from backend server. Websocket works over a lighter protocol ws:// or wss:// compared with http:// to refresh the clients when updates happen at backend via sockets. It keeps the tcp connection open between client and server for communication.

Leave a Reply

Your email address will not be published. Required fields are marked *