Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for WebSocket vs Server-Sent events
AlessandroMinoccheri
AlessandroMinoccheri

Posted on • Originally published atminompi.Medium

     

WebSocket vs Server-Sent events

Usually, I have heard more times the term WebSocket than server-sent events.

The reason could be thatWebSocket is used more, but not always is the ideal approach.
Sometimes Server-sent events approach is better to solve problems and create good applications.

It’s very important to understand differences, limits, and ideal cases for both to solve your problem with the right solution.
Sometimes we have a cognitive bias that doesn’t allow us to take the right decision.
Cognitive bias is a systematic error in thinking that occurs when people are processing and interpreting information in the world around them and affects the decisions and judgments that they make.

(Image fromhttps://uxdesign.cc/how-to-improve-experience-design-by-managing-cognitive-biases-d7b360d35b0a)

So, for example, if we have solved a problem using WebSocket, next time with a similar problem we could think that, again, it’s the right approach without considering the big picture, all information about the problem to solve.
For that reason, understanding deeply bot approaches can help us to reduce the cognitive bias and make the best decision.

Let’s try to explain both approaches and their characteristics.

Websocket

It’s a computer communications protocol, that provides full-duplex communication channels over a single TCP connection (Wikipedia). The protocol was standardized in 2011.

The WebSocket approach is used in many contexts and projects because has many benefits and pros in its favor.

Bidirectional communication

The client and server can both send data to the other part.
The client creates a TCP connection to the server and keeps it open as long as needed.
Both server and client can close the connection easily whenever they want.
To exchange data there is ahandshake process that verifies the communication, and if it’s all ok, they can exchange data using the custom WebSocket protocol.

(Image from:https://www.onlyfullstack.com/polling-vs-server-sent-events-vs-websocket/)

Advantages

  • Bidirectional communication in real-time, connections can both send and receive data from the browser(example: chat).
  • Generally don’t use XmlHttpRequest and headers are not sent every time, so it reduces the expensive data loads being sent to the server.
  • Can transmit both binary data and UTF-8 format.

Limits

  • When connections are terminated, WebSocket doesn’t automatically recover them, you need to implement a reconnection system by yourself.
  • Browsers older than 2011 don’t support WebSocket connections.
  • Some enterprise firewalls with packet inspection have trouble dealing with WebSocket.
  • It cannot be placed behind container-based authentication methods with header-based security, it has to be query parameters (or hopefully, a token-based authentication where the token is established outside the WebSocket path).

Ideal cases

  • Chat: both client and server exchange data to send and receive messages
  • Multiplayer games
  • Collaborative editing/coding
  • Social feeds
  • Sport updates
  • … a lot more …

Server-Sent Events

It’s a server push technology enabling a client to receive automatic updates from a server via an HTTP connection.
It was born on September 1, 2006, so it’s been a while since it’s available.
It provides a memory-efficient implementation of XHR streaming.
Unlike a raw XHR connection, which buffers the full received response until the connection is dropped, an SSE connection can discard processed messages without accumulating all of them in memory.

Monodirectional communication

The client sends a request to subscribe to a specific channel and the server will send event/data into that request, so only the server can send data and the client receive automatically those events in the same HTTP connection.

(Image from:https://www.onlyfullstack.com/polling-vs-server-sent-events-vs-websocket/)

Advantages

  • Transported over simple HTTP instead of a custom protocol
  • Simpler protocol
  • Built-in support for re-connection and event-id
  • No troubles with corporate firewalls doing packet inspection

Limits

  • It’s limited to UTF-8 and does not support binary data.
  • When not used over HTTP/2, Server-Sent events approach is subject to limitations with regard to the maximum number of open connections. This can be especially painful when opening various tabs as the limit is per browser and set to a very low number (6).
  • It’s mono-directional
  • It doesn’t have native browser support. However, there are available workaround with poly-fill (replicate an API) in Javascript that simulates the SSE functionality to solve this issue. All modern browsers support server-sent events: Firefox 6+, Google Chrome 6+, Opera 11.5+, Safari 5+, Microsoft Edge 79+.

Ideal cases

  • Stock client updates: the client receives updates from the server when a stock changes its value
  • Twitter feed updates: the client receives a new tweet every time one is sent
  • push notifications

Conclusion

In conclusion,both approaches are valid and can be used to build specific software.
Websocket is more used and can be used also to develop an application that can use Server-sent events.
Server-sent Events have fewer ideal cases but for them, it’s very useful with less configuration and less time to create the updating system.

I have used both of them and no one is better than another, it depends on the specific context and what you need at that moment.

Knowing WebSocket and Server-sent events can help you in deciding which approach is better for every application.

Top comments(4)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
bobbyiliev profile image
Bobby
I am a professional DevOps Engineer with a demonstrated history of working in the internet industry. I am an avid Linux lover and supporter of the open-source movement philosophy.
  • Work
    DevEx @ Materialize | Community Manager @ DigitalOcean | Co-Founder @ DevDojo | Docker Captain
  • Joined

This is a great post! Well done!

CollapseExpand
 
minompi profile image
AlessandroMinoccheri
Software developer @FlowingYou can follow me on Twitter @minompi

Thanks a lot!

CollapseExpand
 
didof profile image
Francesco Di Donato
Grant me the serenity to accept the scripts I cannot change, courage to change the scripts I can, and wisdom to know the best way to refactor them.
  • Email
  • Location
    Bari
  • Education
    Bachelor Degree in Biotechnology
  • Work
    Software Development Engineer II
  • Joined

Thanks man, on point!

CollapseExpand
 
minompi profile image
AlessandroMinoccheri
Software developer @FlowingYou can follow me on Twitter @minompi

Thanks!

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Software developer @FlowingYou can follow me on Twitter @minompi
  • Location
    Italy
  • Work
    Senior software developer
  • Joined

More fromAlessandroMinoccheri

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp