Socket to Me
How to level up your applications using WebSocket.
As someone who is new to the world software development, sometimes learning everything you have to learn to be able to just do the job can feel a bit like trying to take a sip of water from a fire hose. There’s a lot of sputtering, and sometimes things come out of your nose.
So, you’re learning how to build applications and you’re probably taking on a few languages at the time. You’re doing tutorials and eventually you start to make things that users can interact with: Tic-Tac-Toe! (Noughts and Crosses for my UK brethren), Tip Calculators! Break Out games!
Before too long you realise there’s a performance gap between the apps you’re making and the apps you regularly use.
Chances are, this is where WebSocket is going to come in.
WebSocket you say?
The way we interact with applications has come a long way from static pages to dynamic, real-time experiences. Users now expect applications to respond instantly, update content without refreshing the page, and provide seamless collaboration features. So how can we achieve this?
All hail the rise of WebSocket, a powerful communication protocol that enables ‘bidirectional, full-duplex communication between client and server’.
AKA for anyone who’s been around a while, like myself:
We all hate talking on the phone, but it turns out that level of communication (being able to speak over the person you’re talking to, essentially — like every call centre job I had in my twenties), is a very useful thing when it comes to building more sophisticated applications. That’s what is meant by ‘bi-directional, full-duplex’.
Bi-directional = both ways, full-duplex = at the same time.
WebSocket allows you to create a persistent connection between a client and a server, allowing both to send and receive data in real-time. Unlike traditional HTTP, WebSocket eliminates the need for repeated requests (GET this, GET that) and responses, enabling instant data transfer.
It also supports two-way communication, enabling data to flow in both directions simultaneously.
What Came Before?
Before WebSocket was invented, the interactivity on websites relied heavily on traditional methods: sending repeated requests and receiving responses using HTTP protocol. When a user interacted with a web application, the browser would send a request to the server, which would process the request and send back a response containing updated content.
But as users started expecting real-time updates and seamless collaboration features, it was easy to see some limitations to this approach. And that’s where WebSocket comes in.
Ever had to collaborate in Google Docs, or on Asana? Seen that Anonymous giraffe spot the typo in your copy before you even get a chance to fix it? Ever been on Twitch or Slack? Yep, you’re starting to get the huge impact that WebSocket had compared to what came before.
Because WebSocket provides real-time data transmission, it eliminates the need for frequent polling or refreshing the page. This leads to improved performance, reduced network traffic, and a better user experience.
I’m sold. How can I use WebSocket in my own work?
Thankfully, it’s pretty easy to implement WebSocket in your own applications, and even some handy tutorials if you want to get to grips with how to implement it in a controlled environment before moving on to your own projects.
Most modern programming languages provide libraries and frameworks that simplify WebSocket integration. In JavaScript, libraries like SockJS, WS, and Socket.IO, the example this article will primarily deal with, to do a lot of the work for you
Socket.IO Example
Socket.IO provide a tutorial that helps users get to grips with some of the concepts around WebSockets. You can make a chat app using their ‘Get Started’ page and start to familiarise yourself with some of the code required to make your WebSockets functional.
It’s important note there are some key differences between Socket.IO and WebSocket in general: Socket.IO is a library that builds upon WebSocket to provide additional features, fallback mechanisms, and an easier-to-use API for real-time communication.
Emit and Broadcast
Two keys concepts that can help to unlock your understanding of how to use Socket.IO in your application are emit and broadcast.
The emit method is used to send a message from the server to a specific client or to all connected clients. It allows you to define custom events and send data along with the event.
On the server-side, you can use socket.emit(event, data) to send a message to a specific client identified by the socket object. Here's an example:
socket.emit('event-name', data);On the client-side, you can listen for the event using socket.on(event, callback) to handle the received data.
socket.on('event-name', (data) => {
// Handle the received data
});The next part of the puzzle is the broadcast method, which is used to send a message from the server to all connected clients except the sender. It allows you to broadcast events and data to multiple clients.
On the server-side, you can use io.emit(event, data) to broadcast a message to all connected clients.
io.emit('event-name', data);Then, on the client-side, you can listen for the broadcasted event using socket.on(event, callback) to handle the received data.
socket.on('event-name', (data) => {
// Handle the received data
});It’s important to note that the broadcast method excludes the client that triggered the event. For example, if a client sends a message and the server wants to broadcast it to other clients, the sender will not receive the broadcasted message. This can be useful to prevent echoing the message back to the sender.
To delve deeper into Socket.IO and WebSocket development, you can explore the official documentation, tutorials, guides, and other resources mentioned below.
Resources
Socket.IO Official Documentation
The official documentation for Socket.IO provides comprehensive information, guides, and examples to help you get started and explore advanced features.
The Mozilla Developer Network (MDN) offers a detailed guide on WebSockets, covering topics such as implementation, security considerations, and advanced techniques
FreeCodeCamp | A Beginner’s Guide to WebSockets
