What are WebSockets?
For my final project at Flatiron School, I created an web app called what2eat. The concept for the app is to help you decide on what to eat, by randomizing a restaurant based on your location. I knew I wanted to add a social aspect to it. The user can create groups that has all the information of the restaurant, the time and date for the event or just a small gathering with your friends. I also knew I wanted to add a chat system so everything can be centralized for any sort of communications. But, I had no idea where to start, all I knew was websockets were going to be involved and because of the time constraints I was not able to implement it before the presentation day.
So…What are WebSockets?
Before diving into what WebSockets are, we need to understand how standard HTTP/HTTPS work. HTTP stands for Hypertext Transfer Protocol. It is an application protocol designed to transfer information between two client machines, typically between a client and server. The client machine makes a request to the server, which then the server sends a response. HTTP is stateless — meaning after the initial request is done, the communication is lost between the server and client. In HTTP clients have to make a specific request such as GET/POST/PUT/DELETE.
So, where does WebSockets come into play? Imagine you’re trying to create a a chat with standard HTTP (and also AJAX) and every time you want to send a message to your friend, your friend will have to send a GET request to see the new message. Now, I’m sure you know nowadays that wouldn’t fly. If your friend is a one-line texter imagine how many times you have to push a button just to see all the new messages!
WebSockets
WebSocket is another type of communication protocol just like HTTP, however it’s a full-duplex bi-directional communication channel over a single TCP connection. Unlike HTTP where the connection is closed after every response, WebSockets allow a continuous connection between the server and client. Once the initial handshake is created between the client and server, the client will not have to send a request. Thus allowing a real-time information exchange.
WebSockets also provide a lower overhead per message. With standard HTTP every time information is being requested, there has to be an established TCP connection every time, and with those request, receive responses include all the relevant cookies within the header. With WebSockets, once the TCP connection has been established the server does not have to send back the same load every time a request has been made. Meaning with each exchange of information the header is much smaller since it’s not a ‘new’ connection.
You can also consider WebSockets as an ‘upgrade’ to HTTP.
Downsides of WebSockets
WebSockets sounds great doesn’t it? While WebSockets are great, it doesn’t mean you should implement it everywhere and rely solely on it. WebSockets are amazing when used for the correct things, such as real-time information exchanges(Chat applications, real-time gaming and notifications). Just like any technology there are up-sides and down-sides of it.
Having a connection opened will also increase the demand on the server. In addition, WebSockets are a ongoing connection, it’s harder to achieve a reliable connection, especially for mobile users who may have a weak network coverage. Developers need to find ways to have a strong reconnection method if the connection manages to close. WebSocket is also newer than HTTP and because of that, a lot of the older browsers do not support it. However, there are libraries out there such as Socket.io which is a Node.js module and has fallback techniques when WebSockets are not available.
Conclusion
WebSockets is an amazing piece of technology that is used everyday! While I’m no expert at this, I am excited to learn more about this piece of technology and see what new things we can create with this. If you are interested in implementing WebSockets into your app, I highly suggest you check out Socket.io’s documentation on creating a simple Chat Application. You can check it out here! https://socket.io/get-started/chat
Resources
