Member-only story
Managing and Analyzing WebSockets
Hands-on tutorial for Socket.IO and WebSocket
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 December 2011, and the WebSocket API was specified by the W3C in December 2009. As of today, all major browsers support the WebSocket API.
WebSocket is developed to overcome the limitations of HTTP-based technology. It provides two-way communication, comparing to HTTP that is a one-way protocol. Most browsers limit HTTP/1.0 or HTTP/1.1 to 6–8 TCP connections for each origin. Fortunately, WebSocket needs only one connection.
WebSocket sends and receives data much faster than HTTP. It is even faster than AJAX. WebSocket requests are not restricted by the same-origin policy. It is more flexible, while it is subject to cross-site WebSocket hijacking attacks.
Socket.IO is a library that enables real-time, bidirectional, and event-based communication between the client and the server. It is a “slight” wrapper around the WebSocket API. While WebSocket is the bare minimum standard, Socket.IO provides enterprise-grade WebSocket.
In this article, we are going to see how to use WebSocket/Socket.IO, and how to analyze them using the Network Panel.
About Socket.IO
We are going to take a look at Socket.IO first.
Why?
It is because Socket.IO provides enterprise-grade WebSocket, where a lot of implementation details have been taken care of.
Set up working environment
As we have described in Exploring Socket.IO in a React Working Environment, the Socket.IO example is built in the Create React App environment.
npx create-react-app react-socket
cd react-socketIn the working environment, we need to have one client and one server to communicate with each other. To simplify the task, we set up both the client and the server in the same repository.
Install the server package: npm i socket.io.
