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:

useActionState in React

useActionState in React: A practical guide with examples

Discover how React’s useActionState Hook makes it easier to handle user actions, especially form submissions and async state changes.

Rishi Purwar
Apr 25, 2025 â‹… 5 min read
three js vs babylon js

Three.js vs. Babylon.js: Which is better for 3D web development?

Compare two libraries that support creating 3D experiences in the browser. Learn how to get started with each, their core features, and key differences.

Elijah Asaolu
Apr 24, 2025 â‹… 7 min read
how to use the Next.js Image component to optimize images

How to use the Next.js Image component to optimize images

Explore automatic image optimization using Next Image, the built-in image optimization solution for Next.js.

Adebiyi Adedotun
Apr 23, 2025 â‹… 7 min read

The right way to implement AI into your frontend development workflow

Discover how to integrate frontend AI tools for faster, more efficient development without sacrificing quality.

Wisdom Ekpotu
Apr 23, 2025 â‹… 5 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