DEV Community

Building a chat app with Socket.io and React 🚀

Nevo David on August 15, 2022

Check out Postiz - the open-source social media scheduling tool. What is this article about? We have all encountered chat over the we...

Read full post

Nevo David • Aug 15 '22

What should I write about next?

JoelBonetR 🥇 • Aug 15 '22

You could fork the same project and just change the implementation details to "vanilla" websockets to see the differences with socket.io! 😁

Nevo David • Aug 16 '22

It's good to understand vanilla websockets, but I don't think it's so practical 🤣
You would now use it in production most chances 🙈

JoelBonetR 🥇 • Aug 16 '22

Hahaha it depends on the case, here I found a good TL; DR on that 😁

Nevo David • Aug 16 '22

Don't forget that in socket.io they also implemented long polling for old browsers :)

JoelBonetR 🥇 • Aug 16 '22 • Edited

The way socket.io actually works is by assuming those are AJAX requests and once some communications had been exchanged it switches the protocol, thus it's not a protocol downgrade but an upgrade (you can check that in the network tab of chrome dev tools), also check the link in the last comment for more details. Is it convenient?

Well, web sockets has a good browser support so It depends on the use case of this "workaround" being more or less harmful.

Also note that socket.io has 4 different versions and both client and server need to implement the same version as far as I can remember, hence as soon as v5 appears you'll need to provide both v4 and v5 versions to avoid current clients software breaking and to provide latest stable version for new customers or customers that want to migrate (thinking on the use-case of providing just a backend as service).

Alexander B.K. • Aug 16 '22

I think I need to start writing a real-time app, so this article is interesting. Although I may have seen other real-time sample apps, this one still is still worth reading.

Nevo David • Aug 16 '22

Thank you Alexander! In the next one I will continue this article on how to use Browser Notification on a new chat message, what do you think?

Alexander B.K. • Aug 16 '22

That is interesting too, but it would be better if you use standard Web API whenever possible, unless you think it will need specific library for that purpose.

Nevo David • Aug 16 '22

What do you mean by "standard Web API whenever possible"? :)

Alexander B.K. • Aug 16 '22

Because you mentioned about browser notification, I searched in MDN if there was a tools for that purpose. So I mean like this one : developer.mozilla.org/en-US/docs/W...
Of course, you are free to use other tools, library you have found suitable for that purpose.

Nevo David • Aug 16 '22

It will probably be "web-push" library that wraps all those tools

topninja • Aug 15 '22

Hi, novu team.
This is so great.
I also checked your packages on github, 7.3k stars - so amzing.
Btw I want to know about nove.co platform's pricing.
This is free platform? I signed on platform but there's no payment setup.

Nevo David • Aug 15 '22

Hi Michael! We are currently on an open beta, we will introduce pricing very soon :)

Renan Franca • Aug 15 '22 • Edited

Could it be self hosted for free at heruko?

Nevo David • Aug 16 '22

Not sure about Heruko, but I imagine you can.
It uses Mongodb, Redis :)
Try and let me know if it works for you!

MinaProgrammer • Aug 21 '22 • Edited

useEffect(() => {
socket.on('messageResponse', (data) => setMessages([...messages, data]));
}, [socket, messages]);
You put messages is an array that maybe cause an infinite loop

useEffect(() => {
socket.on('messageResponse', (data) => setMessages(mess=>[...mess, data]));
}, [socket]);

Sachin Chaurasiya • Aug 15 '22

This is amazing, thanks for sharing @nevodavid

Nevo David • Aug 16 '22

Thank you Sachin!
Are you planning on building one? :)

Sachin Chaurasiya • Aug 16 '22

Yes , planning to build one in this weekend:)

Murtuzaali Surti • Aug 15 '22

this is awesome! I might build one in the future, and might use novu as a notification system!! 👀

Nevo David • Aug 15 '22

Haha that would be cool!
Maybe we can collaborate on a project :)

Raita Dezideriu • Aug 16 '22

Wooow

Raita Dezideriu • Aug 16 '22

Indeed love 💕 it very much it can be somehow Unicorn 🦄 you know !!

Nevo David • Aug 15 '22

If you are building a chat app, make sure you post it here?

Raita Dezideriu • Aug 16 '22

Could you tell me what really difference is between Facebook chat Messenger and your Chat that you just created please ?

Nevo David • Aug 17 '22

A lot, but I can't tell you for sure as I don't know the facebook architecture.
But for starter, they are probably using a database 😅

iamndeleva • Aug 17 '22

Great article Nevo

Nevo David • Aug 18 '22

Thank you, iamndeleva!
How are you? :)

iamndeleva • Aug 18 '22

I'm doing good ! Actually building similar chat application only that I'm incorporating a database and messaging will depend on whether the user is authenticated or not

Nevo David • Aug 22 '22

Hi Everybody!
I have released the second part here:
dev.to/novu/building-a-chat-browse...

Kingsley • Aug 16 '22

Super project. Thank you for posting. Tremendous work

Nevo David • Aug 17 '22

Thank you Kingsley, feel free to fork it :)

JoelBonetR 🥇 • Aug 15 '22

Nice one! Liked reading that post, recommending it right now 👌😁

Nevo David • Aug 16 '22

Thank you very much Joel!

Nevo David • Aug 15 '22

Did you build your native chat in your app, or used something like intercom?

Nevo David • Aug 17 '22

Just a quick reminder if you can help me out with a star on Novu ❤️❤️❤️❤️
github.com/novuhq/novu

Amadi Godwin • Jun 27 '23

Thanks for this , it was really helpful .

while building, if you want to remove user name that's typing on the body of that chat, setup another event with an empty string as its data , listen on both ends

 useEffect(() => {
    socket.on("typingResponse", (data) => setTypingStatus(data));
    setTimeout(() => {
      socket.on("noTypingResponse", (data) => setTypingStatus(data));
    }, 5000);
  }, [socket]);

Abirami Elangovan • Sep 13 '24

This one is worth reading! There is an excellent guide and information throughout the article. I know the MirrorFly API that I've been using for years for chat and other communications. This also seems like a great idea.

Kevin Guo • Aug 28 '23

Scaling Socket.IO apps on Azure. 🥳⚡️📣
Azure now officially supports Socket.IO. No more deploying and managing "adapter" component on the server side. Simplified architecture for the happy developer.Learn more about Socket.IO on Azure

Sahil Atahar • May 15 '24

Nice article, I have build a Realtime code editor project using socket.io called Code-Sync.

It offers a real-time collaborative code editor featuring unique room generation, syntax highlighting, and auto-suggestions. Users can seamlessly edit, save, and download files while communicating through group chat

EthoraOfficial • May 13 '24

It is very detailed article. Your product resonates with our 'supper app' Ethora Engine. ethora.com/

Ethora engine is built using React Native for iOS & Android as well as React.js (web / desktop version). Additionally, we use our server-side platform infrastructure which includes EVM (Ethereum) compatible L2 chain, API layer and messaging infrastructure for chat and push notifications.

Open source is available at github.com/dappros/ethora

If you relate our app with your application we appreciate your feedback or engagement on GitHub,

Aditya Das • Jan 12 '25

On the server, index.js cors is set to the localhost 3000 port.

But in the client, App.js cors is set to the localhost 4000 port. While setting port 4000,
I'm getting errors in the browser console.

While setting client cors to localhost port 3000 these errors are gone.

DolliePerry • Aug 29 '22

Is WebSocket good for chatting? دعاء جلب الحبيب في ثانية واحدة

Andrew Baisden • Aug 28 '22

Superb article thanks for sharing! Socket.io and React is a good combination.

JohnRuss • Jan 28 '23

hi everyone 🖐
i have a question about where i can host express socket.io app ?
as i find out i can't on vercel or netlify. One another choise was heroku but heroku has ephemeral fs disk storage when i need persisted one. At this point i'm reading about "render" where i can buy persisted disk storage and i think it even supports socket.io 😎
So have anyone any advice ?

Devang Tomar • Sep 12 '22

Great content.. thanks for sharing 🙌

Fabricio Carvalho • Aug 24 '22

I tried to replicate this on Vue 3 and is working good!

Raccoon • Aug 18 '22

Thank you for the great article. I have one question. When someone is typing it shows the message but I can't figure out how to remove the is typing when the person isn't typing. Do you have an idea?

AlexanderShpilka • Oct 1 '23 • Edited

I just did this:

useEffect(() => {
    const timer = setTimeout(() => {
      if (typingStatus) {
        setTypingStatus('')
      }
    }, 3000)

    return () => {
      clearTimeout(timer)
    }
}, [typingStatus])

Diwash Dahal • Jun 6 '23

Well written article, Nevo.
Very insightful

sharans • Oct 30 '23

Well, the explanation is quite amazing, it took only 30 min to build the app as u gave me all the resources and stuff, I signed in to this site especially to thank you

Khushbu11-web • Mar 7 '24

Hello, In server side (index.js) please correct http.listen otherwise server is not getting socket.ID

Samuel Akong • Oct 8 '22

Please I want to get the direct source code link for download.

Kasi Viswanadh Duvva • Feb 13 '24

Can i get live link

Khushbu11-web • Mar 7 '24

I am getting this error and I can not find a solution for this :
Uncaught TypeError: Cannot read properties of undefined (reading 'on')

Sơn Vũ • Aug 19 '22

ádasdsad

Ministry of JavaScript • Aug 19 '22

Anyone wants me to create a video series on it? Btw great post.

sugandi06 • Nov 24 '22

what if i use laravel for ther server and the client is react js? is it possible?

Asad • Aug 19 '22

Hey, its an awesome project and I learned a lot, just needed to ask what if I want to deploy it and test with my friends? where should I deploy the server?

Mainak Mukherjee • May 20 '23

thanks sir , you were really a lifesaver

Alain • Nov 30 '23

This is very useful example to integration websocket.

charumehta0215 • Aug 27 '22

Wow! Its so amazing.