DEV Community

Cover image for Building a chat app with Socket.io and React Native 🤯

Building a chat app with Socket.io and React Native 🤯

Nevo David on October 17, 2022

I wrote before on how to build a chat app with React, it got 1660 likes and 52955 views 🤩 So I have decided to make another one for React Native. ...
Collapse
 
liviufromendtest profile image
Liviu Lupei

Thank you for the tutorial!

Alright, so Novu is open-source, but how will it generate revenue?

Because it seems like it's a for-profit company from Israel, and not just "some cool guys from the community".

crunchbase.com/organization/novu-1a6b

I've seen open-source solutions where the developers install it and integrate it deep into their system, and suddenly some features become Enterprise-only and the company has to pay or go through the painful process of removing that solution from their stack.

Collapse
 
combarnea profile image
Tomer Barnea

Hey Liviu :)

My name is Tomer, I am one of the co-founder of Novu, and hopefully I am also a "cool gut from the community" 😅

First of all you are correct, Novu is indeed a commercial solution as well as an open-source standard. I think you dead on about what you wrote about monetization, the way we try and build to solution is so it will be clear as to what's going on to be an open-source offer, and what's going to be a commercial one, so no one will implement an open-source library and then be surprised by a "hidden" license or a feature that was pay-walled all of a sudden.

As both my co-founder and my self, and most of the team as well for that matter, are developers we take that very seriously, I would love to have deep conversation about that.

I believe if an individual or company chose to use Novu as an open-source solution this is perfectly fine, and they are making the whole community and the open-source standard stronger by being a part and suppling valuable feedback.

As mentioned I happy to jump on call and get some more ideas and thoughts as to how to do it properly :)

Collapse
 
codingjlu profile image
codingjlu

I don't see why just because SSE exists means you shouldn't be using websockets. Websockets are designed for the specific purpose of client-server-client messaging, and it's good at that. It's also not difficult to secure or firewall at all, and I don't get your point about SSE being easier to monitor. Care to expound?

Collapse
 
eminarium profile image
Merdan Durdyyev

Awesomely constructed story blog. I honestly loved it, Nevo.
Keep writing such interesting and detailed posts.

Collapse
 
nevodavid profile image
Nevo David

Wow, Thank you very much @eminarium !

Collapse
 
nevodavid profile image
Nevo David

Do you think React native is a good alternative to Swift / Java(Androind)

 
nevodavid profile image
Nevo David

I think it's time to make an article about SSE, it's not as popular as Websockets and it's a shame :)

Collapse
 
varshithvhegde profile image
Varshith V Hegde • Edited

Awesome project bro🔥⚡✨

Collapse
 
nevodavid profile image
Nevo David

Thank you very much @varshithvhegde :)
Share your chat project when you can :)

Collapse
 
varshithvhegde profile image
Varshith V Hegde

Yeah sure github.com/Varshithvhegde/Whatsapp... this my project it's just like a whatsapp chatting still have some flaws though😅

Thread Thread
 
nevodavid profile image
Nevo David

That's awesome! If you want some contribution, just join our community!
People would love to help you out!
discord.gg/C2yvXfpQ

Thread Thread
 
varshithvhegde profile image
Varshith V Hegde

Yeah sure i would love to 👍

Collapse
 
nevodavid profile image
Nevo David

Have you ever build a chat app before?

Collapse
 
varshithvhegde profile image
Varshith V Hegde • Edited

I have built something like this but it was using firebase and java

Collapse
 
nevodavid profile image
Nevo David

Just wrote you on the other thread ❤️

Thread Thread
 
varshithvhegde profile image
Varshith V Hegde

Yeah 👍

Collapse
 
nevodavid profile image
Nevo David

Do you have anything to share? 🤩

Thread Thread
 
varshithvhegde profile image
Varshith V Hegde

github.com/Varshithvhegde/Whatsapp... this is the project in my intermediate days of learing android development so it's not so super working but still it's great 😅😂

 
liviufromendtest profile image
Liviu Lupei

That's awesome!

Collapse
 
empe profile image
Emil Pearce

Keep up the good writing!

Collapse
 
nevodavid profile image
Nevo David

Thank you Emil!
Happy Holidays!

Collapse
 
rinat profile image
Rinat Shay.

Use server-sent events

... and then send messages from client to server using REST API calls, or what? It will be slow as hell, especially for chat-like applications. There is absolutely no problems with securing, monitoring or "firewalls" (whatever you mean by that) in WebSockets.

Collapse
 
rinat profile image
Rinat Shay.

I'm actually should note that there is a problem with WebSockets — load balancing, but since you haven't mentioned that in a first place, I can assume you haven't run WS on scale.

For everyone here: base your technical decisions on your own (or someone else's) researches. Not by categorical statements in comments from strangers.

Collapse
 
nevodavid profile image
Nevo David

How are everybody today? Did you register to HackSquad yet?

Image description

Collapse
 
modelhusband01 profile image
Model Husband 👑

Wow, this is Awesome

Collapse
 
nevodavid profile image
Nevo David

Thank you Model Husband!
Let me know if you use it :)

Collapse
 
dhruvjoshi9 profile image
Dhruv Joshi

Such a detailed and helpful blog!!! Thanks!!

Collapse
 
nevodavid profile image
Nevo David

Thank you very much @dhruvjoshi9 🤩
Let me know if you read it :)

Collapse
 
nevodavid profile image
Nevo David

Hard about it a few times!
Any good wrapper library for that like Socket.io?

Collapse
 
mouseroot profile image
Mouseroot

This is amazing work, when I get the chance I will use this post to re-visit react and react -native.

Collapse
 
nevodavid profile image
Nevo David

Awesome!
Let me know if you find some free time for it!

Collapse
 
lamhoanghg profile image
Lam Hoang

very detail! keep up

Collapse
 
nevodavid profile image
Nevo David

Thank you, Lam!
Let me know if something’s missing!

Collapse
 
sauain profile image
Saurav Jain

Amazing writing :)

Collapse
 
nevodavid profile image
Nevo David

Thank you 😍😍

Collapse
 
rutamhere profile image
Rutam Prita Mishra

It is a great tutorial. Absolutely loved reading this. 🚀

Collapse
 
nevodavid profile image
Nevo David

Thank you so much Rutam!
How are you today?

Collapse
 
sohrab09 profile image
Mohammad Sohrab Hossain

Thank you for this amazing blog 😍

Collapse
 
nevodavid profile image
Nevo David

Happy that you like it 🥰
How are you today? :)

Collapse
 
anandicon profile image
Anandkumar

Thanks for the post. Great article on explaining a chat app with Socket.io and React Native. Awesome tips and very easy to understand. Let's learn how to build a React Native chat app with simple guidelines that help you to implement it easily on any Android or iOS app.

Collapse
 
mansa62 profile image
Mansa

I want to display the list of online users (I managed to do this). But in this list I want to see all users except myself (I didn't manage to do this).
The problem is that we cannot create elements in React Native and inside function sockets
Please guide me how to do this

Collapse
 
mateusfernandes profile image
Mateus Fernandes

Firstly congrats 4 the great work. I am very happy to see commons use cases of novu. It would be awesome an example of app with map integrated and novu notifications using expo. Kind a small uber, user share they location and driver get it

Collapse
 
adrienbaston profile image
Adrien Baston • Edited

Great write up, thanks for sharing - also recommend checking out this amazing React Native Chat

Collapse
 
gouravnainwaya profile image
GouravNainwaya

This Application not working that saying [TypeError: Network request failed] this error i code and even your code this application is not running its fake article

Collapse
 
jcmaciel profile image
José Carlos Maciel

me too

Collapse
 
sahilbhosale0808 profile image
SahilBhosale0808

Instead of localhost in "localhost:4000/api" replace it with your development device IP

Collapse
 
olipliche1 profile image
Paka 🇬🇭🇨🇬

Awesome. Thank you!!!

Collapse
 
mansa62 profile image
Mansa

socket.to(result[0].name).emit("roomMessage", newMessage);
roomMessage event in client havenot listener!

Collapse
 
codewithgulam profile image
Laraib Khan • Edited

*I have saved the article but not reflect to the hacksquad dashboard
*

Collapse
 
itay_lador_390b7032ba1501 profile image
Itay Lador
const socket = io.connect("http://127.0.0.1:4000");
Enter fullscreen mode Exit fullscreen mode

is not doing anything for me serverside or clientside

Collapse
 
riyashahmyulogic profile image
riyaShahmyulogic

Hi,I am unable to fetch the real time messages in my application ...please help me