What are Web Sockets?
Web socket real time apps are more useful than might you think. Let’s see the examples.
What are Web Sockets
“WebSockets” is an advanced technology that allows real-time interactive communication between the client browser and a server. It uses a completely different protocol that allows bidirectional data flow, making it unique against HTTP.
How does HTTP work?
If you are a developer, you probably know what HTTP (or HTTPS) is. It is seen every day, in your browser. A request is needed to respond; you to constantly ask the server if there are new messages in order to receive them.
You should also know that HTTP allows you to have different types of requests such as post, get or put, each with a different purpose.
Web Sockets
Web Sockets on the other hand don’t need you to send a request in order to respond. They allow bidirectional data flow so you just have to listen for any data.
You can just listen to the server and it will send you a message when it’s available. Seems more practical, right? And it is…
What is the web socket good for?
- Real-time applications
- Chat apps
- IoT (internet of things)
- Online multiplayer games
When you should avoid them
The answer is almost never. The only reason I could think of against using Web Socket is the current compatibility, although you can see here that 95% of users have a compatible browser.
In some cases, you will not even need web sockets. I don’t think you will need a real-time app if you are building a simple CMS, unless you want some kind of a specific real-time feature. For a RESTful-API I would advise not using Web Sockets as HTTP GET, POST, DELETE, PUT and many other requests are awesome for that.
Web socket practical examples
Both examples are written in node.js on the server side and javascript on the client side. Intended to be VERY simple, so you can understand. It would not be used like that in practice but you get the idea.
Equivalent in HTTP
Because HTTP needs to constantly check if there are new messages (in order to make it real-time), I used dirty checking, meaning that the program will ask if there are any new messages every x seconds, in this case every 0.2s (or 200 ms).
I used a library called Axios, so I don’t have to confuse you with a XMLHttpRequest . It is very declarative and lightweight, so you should be able to understand it if you haven’t already used it.
Demo
To test how it works, you can just copy and paste the files to your computer, install all the required modules and have fun. If you are currently on a phone however or you are too lazy to do it, I made a GIF (using screen to GIF) that shows you how amazing this could actually be:
HTTP API debugging made easy
If you ever tried to debug a HTTP restful API, you know how painful it is without any tools. If you want a really good tool, try postman. It is one of the most popular tools that do the job quickly and efficiently - it even saves the history to your google account so you can load them later. I use the chrome extension, but you can get all versions for all platforms here.
Conclusion
Web Sockets are currently one of the ‘next big web technologies’ adopted by many developers. Great for real-time interactions, even including online games. They are so useful you could be amazed you haven’t heard of it before, but did you know that libraries like Firebase are already using Web Sockets?
I hope that the article helped you in understanding the Web Socket protocol, and if you enjoyed it, why don’t you click the 💙 button and follow me on medium? It motivates A LOT.
You might also like:
- Angular vs react vs vue — the deal breaker
Code Hybrid is my most recent project with a goal to bring programmers together, so if you would like to contribute or even write stories visit Code Hybrid publication website and find something interesting.
