Introduction to WebSockets
In a recent code challenge, I was tasked with creating an application that logs messages as they happen and shares those messages with everyone connected to the app. As a Full Stack Developer, I’m very familiar with working with RESTful API’s and utilizing HTTP requests between a client and server. However, to complete the task at hand, I needed to create a special type of API, a WebSocket.
What is a WebSocket?
WebSockets are a fairly new technology; the first WebSocket protocol was designed by Michael Carter in 2008 for HTML 5 (Topio Networks). MDN Web Docs describes a WebSocket API as “… an advanced technology that makes it possible to open a two-way interactive communication session between the user’s browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply” (Mozilla).
WebSocket Interfaces
Communication with a WebSocket API initially starts as an HTTP handshake. However, if the client and server are able, the connection will continue over WebSockets. When this occurs, we can say that we have a full-duplex (Hackernoon). Meaning that we have a persistent connection or said another way, one that remains open for the complete duration of the session. Moreover, the connection will only end with what is called a CloseEvent.
WebSockets are comprised of three main components; WebSocket, CloseEvent, and MessageEvent.
The WebSocket is the primary interface for establishing a connection to the WebSocket Server and also responsible for “… sending and receiving data on the connection” (Mozilla).
A CloseEvent is simply when the connection between the client and the WebSocket Server closes (Mozilla). Examples of different close events can be found here.
A MessageEvent is “ The event sent by the WebSocket object when a message is received from the server” (Mozilla). Additional information regarding MessageEvents can be found here.
The combination of the WebSocket and the MessageEvent gives “…the server a way to initiate any communication and send off data to pre-subscribed clients, so they don’t have to keep sending in requests inquiring about the availability of new data” (Hackernoon).
For more visual learners, I’ve included a visual provided by Hackernoon.
Thank you for taking the time to learn about WebSockets. I hope this blog has inspired you to try implementing them in an upcoming project. In my next blog, I will show how I solved the code challenge mentioned previously using React, Node.js, Express, and Socket.io. If you are in immediate need, I have included a recommended tools list provided by Mozilla.
Tools for Building WebSockets
- HumbleNet: A cross-platform networking library that works in the browser. It consists of a C wrapper around WebSockets and WebRTC that abstracts away cross-browser differences, facilitating the creation of multi-user networking functionality for games and other apps.
- µWebSockets: Highly scalable WebSocket server and client implementation for C++11 and Node.js.
- ClusterWS: Lightweight, fast and powerful framework for building scalable WebSocket applications in Node.js.
- CWS: Fast C++ WebSocket implementation for Node.js (uWebSockets v0.14 fork)
- Socket.IO: A long polling/WebSocket based third party transfer protocol for Node.js.
- SocketCluster: A pub/sub WebSocket framework for Node.js with a focus on scalability.
- WebSocket-Node: A WebSocket server API implementation for Node.js.
- Total.js: Web application framework for Node.js (Example: WebSocket chat)
- Faye: A WebSocket (two-ways connections) and EventSource (one-way connections) for Node.js Server and Client.
- SignalR: SignalR will use WebSockets under the covers when it’s available, and gracefully fallback to other techniques and technologies when it isn’t, while your application code stays the same.
- Caddy: A web server capable of proxying arbitrary commands (stdin/stdout) as a websocket.
- ws: a popular WebSocket client & server library for Node.js.
- jsonrpc-bidirectional: Asynchronous RPC which, on a single connection, may have functions exported on the server and, and the same time, on the client (client may call server, server may also call client).
- cowboy: Cowboy is a small, fast and modern HTTP server for Erlang/OTP with WebSocket support.
- WebSocket King: A client tool to help develop, test and work with WebSocket servers.
Resources
“Michael Carter, Founder and CEO, Game Closure.” Www.topionetworks.com, www.topionetworks.com/people/michael-carter-5799ac941433a1d9df00004f.
Srushtika. “Everything You Ever Wanted to Know about WebSockets, Literally!” Hacker Noon, 30 Nov. 2020, hackernoon.com/everything-you-ever-wanted-to-know-about-websockets-literally-a05f36432999.
“Web Technology for Developers.” Web APIs | MDN, Mozilla, developer.mozilla.org/en-US/docs/Web/API/WebSockets_API.
