2024-01-29
3307
#node#react
Avanthika Meenakshi
1936
Jan 29, 2024 â‹… 11 min read

WebSockets tutorial: How to go real-time with Node and React

Avanthika Meenakshi First, solve the problem. Then, write the code.

Recent posts:

How to eliminate render-blocking resources — CSS and JavaScript

How to eliminate render-blocking resources — CSS and JavaScript

Use Lighthouse to eliminate render-blocking resources, which block the first paint of your page, in both CSS and JavaScript.

Anna Monus
Apr 4, 2025 â‹… 8 min read
Mocking Complex APIs With Mirage JS

Mocking complex APIs with Mirage JS

Mock complex APIs with JavaScript’s Mirage JS library including JWT authentication, relational data, role-based access control, and more.

Emmanuel John
Apr 4, 2025 â‹… 10 min read
8 best Go web frameworks for 2025

The 8 best Go web frameworks for 2025: Updated list

Looking for the best Go frameworks? Compare the top 8 Go web frameworks for 2025, including Gin, Fiber, Echo, and Beego, with pros, cons, and performance insights.

Victor Jonah
Apr 3, 2025 â‹… 15 min read
Making Your First Game In Excalibur.js

Game development for frontend: Building with Excalibur.js

Build your first 2D browser game using JavaScript and the Excalibur.js library, covering essential game development concepts.

Yashodhan Joshi
Apr 3, 2025 â‹… 25 min read
View all posts

9 Replies to "WebSockets tutorial: How to go real-time with Node and React"

  1. Great, post have you come across any issues in real-world scenario, where a single server has exposed a port on node.js server and multiple clients~80 has seen a deadlock and websocket blockage?

  2. Hi Avanthika , great post.
    Do you know if I can set the header with authentication tokens in the handshake.I mean using W3CW websocer api.
    Apparently the W3CW websocket api only support 2 arguments in the cosntructor.
    there is any way to do that?
    Thanks.

  3. FYI the code block under “Sending and listening to messages on the client side” is the same as the setup block earlier in the article and doesn’t show the example of using client.send.

  4. It’s the same in “Sending and listening to messages on the server side”. The server side was never updated to explain how the editorContent is stored, its scope, nor how to store active users. Very good article otherwise. I like that it isn’t a complete code project and one must dissect it a bit to make it work for any situation. In my case, I integrated this into a new app using react hooks (useState and useEffect).

  5. SSE doesn’t make developers tired. LOL. WebSockets dev is, in fact, far more complicated. The maximum 6 browser connections for SSE also no longer exists with HTTP/2, while WebSockets continue to be blocked by some proxies and load balancers. And most chat apps are actually a perfect use case for SSE because users generally aren’t posting 60 messages per second. There is useful example code on DigitalOcean and Marmelab.com.

  6. “we can’t send data directly from the client (frontend) to the server (backend) without implementing workarounds such as polling”

    Are client and server switched up here? You can send data directly to the server in a post request.

Leave a Reply