Hello welcome back to my story.
In this story I’ll explain how to implement websocket in express (node js).
What is web socket ?.
WebSocket is a computer communications protocol, providing full-duplex communication channels over a single TCP connection. The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011, and the WebSocket API in Web IDL is being standardized by the W3C.
The WebSocket protocol enables interaction between a web browser (or other client application) and a web server with lower overhead than half-duplex alternatives such as HTTP polling, facilitating real-time data transfer from and to the server. This is made possible by providing a standardized way for the server to send content to the client without being first requested by the client, and allowing messages to be passed back and forth while keeping the connection open. In this way, a two-way ongoing conversation can take place between the client and the server. The communications are usually done over TCP port number 443 (or 80 in the case of unsecured connections), which is of benefit for those environments which block non-web Internet connections using a firewall. Similar two-way browser-server communications have been achieved in non-standardized ways using stopgap technologies such as Comet.
Source: Wikipedia.
So when a client connected to a websocket the client can listen to specific event and the client will get real time data from that event.
Example:
- There are 2 clients connected to a websocket and listen to event named EventOne.
- Client 2 call api endpoint which emit data to EventOne, example: the websocket emit data with key message and given value is “hello”.
- The client 1 and client 2 will receive a message from EventOne which has key message and value “hello”.
Okay that’s enough for websocket. Next I’ll implement it on express (nodejs). There are so many library to use. But in this story I’ll use Socket.IO
I’ll start from creating a new folder named socket-io-express.
Then in that folder I’ll create 2 separate folders for server and client.
In server folder I’ll init a new node js project and install some needed dependency like:
- Express
- Nodemon
- Socket IO
Then I add start script in package json scripts object.
Then creating 2 files named app.js and routes.js.
In app.js I’ll import the socket.io and codes some configs.
*Explanation on codes.
Then in routes.js.
*Explanation in codes
In “/send-notitification” endpoint it will be test endpoint for sending data to clients which listen to “notification” event.
Time to run the server.
Then on client folder I’ll create index.html file.
Codes in index.html will like below.
*Explanation on codes.
The client listen to “notification” event on websocket.
Then open index.html in browser.
It only show empty page.
But when I check in terminal there a message “someone connected”. So, the client is successful connected to the server.
Then open “send-notification” api endpoint from the server which created earlier. And add some query parameter to message.
Then in client tab.
It success receiving a message from the websocket.
Conclution:
Using websocket as a real time data communication is a good option. Using a websocket library like socket.io make the implement of websocket in express (node js) server is easy.
Thank you ~.