DEV Community

Building a chat app with Socket.io and React 🚀

Nevo David on August 15, 2022

Like this article? Follow me on X: https://x.com/nevodavid What is this article about? We have all encountered chat over the web, tha...

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).

Raita Dezideriu • Aug 16 '22

Wooow dude that’s so very Amazing 98% ? That says a lots mate

JoelBonetR 🥇 • Aug 16 '22

Basically any browser version released in 2012 or newer (more or less) except from Opera Mini which I don't even know why they keep adding it to the metrics 😅

Nevo David • Aug 17 '22

It's true and not true, it's like saying that compare to the population of the world, you child will be chinese, it's most likely not true :)
So while it's true that if you target the whole world with your app that might be the case.
But try to do the same for old enterprise companies, and I promise you, you will find some Windows XP :D

JoelBonetR 🥇 • Aug 17 '22

😂😂
Well, that it's compatible with any browser version released in 2012 or newer is absolutely true. Some people around the world using older versions is a completely different topic 😁

I'd rather prefer the connection to be tested with the "newest" protocol and downgrade it if there's any incompatibility instead doing the opposite. It will add a delay to people with very very old devices and software and speed up the rest.

My logic is that people with very very old devices and software are already used to the slowness 😳I know it by experience, had a Pentium II with a 56Kb modem for more than 10 years, on those waiting times 100-200ms won't harm much, it's a little % overall 😅

Jmaglinte • Aug 18 '22

Integrate *MongoDB * :D

Nevo David • Aug 18 '22

Haha, that's a good idea!

Jmaglinte • Aug 18 '22

Thank you! can't wait for the next one.

Kumar Deepanshu • Aug 18 '22

Trpc with next js

Radu-Alexandru B • Aug 19 '22

how to build a 3 paged app using Sanity.io and Next.js

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?

Raita Dezideriu • Aug 16 '22

Ya Da Best Mate well done 👍 I love 💕 your talent

Nevo David • Aug 17 '22

Thank you Raita! How are you? :)

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

Alexander B.K. • Aug 16 '22

Nice, I am waiting for that.
Actually, I also want to see how you handle global state management if there are cases for that. Specifically, how you use Redux, because I am learning Redux with the recommended way mentioned in the Redux doc, i.e using Redux Toolkit (RTK) and RTK Query.
But it is just fine if you don't use it in that app.

Nevo David • Aug 16 '22

Anything specific you would like to build with Redux?

Alexander B.K. • Aug 16 '22

In my last project, I didn't use it, because I didn't learn it, it would take longer time before I could really use it. For global state management, I used a lib named reactN by Charles Stover which was easy to use.
But now that I realize in what case Redux is suitable for, I think I am going to use it for my nearest project.

Michael • 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!

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:)

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]);

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

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 !!

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 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 :)

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]);

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

Victoria Mostova • Sep 26 '23

Thanks for sharing your article on building a chat app with Socket.io and React! Your detailed walkthrough and code examples make it easy to understand how to make a messaging app with these technologies. It's a valuable resource for developers looking to implement real-time chat functionality in their projects.

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 ?

DolliePerry • Aug 29 '22

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

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])

Khushbu11-web • Mar 7

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

Diwash Dahal • Jun 6 '23

Well written article, Nevo.
Very insightful

Fabricio Carvalho • Aug 24 '22

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

Devang Tomar • Sep 12 '22

Great content.. thanks for sharing 🙌

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

Kasi Viswanadh Duvva • Feb 13

Can i get live link

Khushbu11-web • Mar 7

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

charumehta0215 • Aug 27 '22

Wow! Its so amazing.

Mainak Mukherjee • May 20 '23

thanks sir , you were really a lifesaver

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.

Alain • Nov 30 '23

This is very useful example to integration websocket.

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?

Blaze • Oct 8 '22

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