Complete React Native Chat App Course: www.udemy.com/... Learn how to build a simple chat app using React Native and Socket.io Github: github.com/Hyl...
Hi tanks for the video. I'm face some problem using socket.io, totaljs(server), and react native. How to still listening the socket server even if my application is closed ? tanks
One of my students pointed out a issue he was having with a yellow warning box in React Native saying "Received data was ot a string or was not recognized encoding" You can get rid of the error by using this in your App.js instead: this.socket = io("192.168.0.10:3000", { transports: ["websocket"] }); Now you will receive another kind of warning message about Unrecognized WebSocket connection option(s) `agent`, however ou can ignore this one. You can ignore the yellow warning by putting this in your index.js, so you won't be seeing it all the time when you're working on the app. console.ignoredYellowBox = ["Remote debugger"]; import { YellowBox } from "react-native"; YellowBox.ignoreWarnings([ "Unrecognized WebSocket connection option(s) `agent`, `perMessageDeflate`, `pfx`, `key`, `passphrase`, `cert`, `ca`, `ciphers`, `rejectUnauthorized`. Did you mean to put these under `headers`?"]); Those two things are what you need, and you should be good to go. I'm not sure why I haven't seen this warning before! Anyway this should solve your issue now, I was able to send some chat messages and see them in the backend! Thanks to Carlos Flores for writing to me about it so other students won't be stuck by it!
thank you very much. The part where you cannot use "localhost:3000" to connect was where i was stuck. Once i replaced with IP address started to work for me. !!
@Ashwin Datye I am sry if I am being silly but I am brand new to this so I don't know how to use the app on my physical mobile device. Can you please help me out?
@@prashinmore2251 i used my own phone as dev device while doing react native development. or else you can create an apk file using android studio to install on devices
@@ashwindatye8156 thanks a lot I was confused because he was using it without connecting it directly but all the tutorials I looked up showed usb connections, I did not know about the apk. Thanks again
Good morning sir, very very good video. I use it to make my own chat cyphered otpimized best then whatsapp signal...But i have a problem. My phone can't connect from not local network. Is it a problem of internet port on my smartphone samsung android with telephonic operator. Could you please help me sir?
I was wondering why you kept talking about "new ES6" and then I saw the date. I was thinking "damn this guy must be really out of the loop, ES6 came out right when I started coding" lol
what if I need the messages to be displayed to a destined user .... meaning user 1 chats with user 2 without user 3 getting any messages from the socket
@ReactNativeTutorial can i ask you something? I want to create a chat on my app just as if it was Whatsapp, where you have all the list of chats with the people in 1:1 relation (for now) and then when you tap on one of the items, it will display the chat message screen. Where should I import the socket.io-client? anywhere? or have it globally in my app by using something like redux?
@@marian_tsx Socket io can help you with fetching the realtime data. What you need to do is use some kind of database to store chat messages that happened between users.
@@marian_tsx Also based on your app you need to set socket io specific to two users at a time when the message sending or receiving happens. The one in this video broadcasts the message to every user that uses the app.
github.com/RyanLeulmi/E2E-Encrypted-Chat check out my End to End encrypted chat app using react-native + nodejs / socket-io ( I check the client's token on every event ) . Eg :( Client) socket.emit("getRooms",token) --- (Server) socket.on("getRooms",token=>{check if the user is authenticated ..... get the rooms})
Appreciate any ideas on how to solve my issue. I cloned the repo and created an apk for samsung. The server is running on port 3000. My phone and wireless lan are on the same network. I replaced the ip address with mine. I do not see a user connected message nor are any chats being sent to the server.Thanks
@@meowmeowmeow5332 I run the server, I first tried using the IP address of the computer running the server but then also tried using the IP of my network and portforwarding the 3000 port as well(it's port forwarded correctly, I checked.)
is there a github to this? I also have another weird question, since i was surprised you just added an external library that easy, can we yarn add any javascript library and it will be adapted to Android? I guess you have to check on github if it supports react-native? how do you check which libraries can be transformed to native code? I heard some people say you need to put the library inside the code cause they werent explicitly using webpack, its confusing to me how a globally installed library gets sucked onto apk
Hi Erick! 1. Github of finished chatapp can be found here: github.com/Hyllesen/TaxiApp/tree/01_SocketIoChat 2. You can usually add JavaScript-only packages that easy using either the yarn add or npm install --save ... I usually check how compability is with some Googling, but if it's a pure JavaScript implementation, there's a good chance it will work fine. It's all about trying to use the package and seeing if it works. You can see some examples of how I install a package with some native code for a map component for Android here: ua-cam.com/video/WGtW14z4KDQ/v-deo.html It is a little more difficult, because the command "react-native link" doesn't work. However on the iOS platform you can see here: ua-cam.com/video/-0VBOoPtGFQ/v-deo.html it is a lot easier because we can use the "react-native link" command, and all the native code bindings is done for us. I hope that somewhat answers your question? In the end it's all about adding the packages, which you will get lots of experience with, and trying to get it to work :). In the end you'll get a hang of it and how it's done!
would you recommend ec2 or fargate? i am thinking of hosting it on free tier of aws ec2 t2, but i realised you cant really set a "hault order" in case this bills up, only some notofication, was thinking of using a RPi to host a server, what are your thoughts? u know if theres any way of haulting this server from getting out of free tier aws or know of any free hosting service for deploying this? i guess heroku with 1 dyno? do you think using a reverse proxy is lagging too much the chat 2?
I've used heroku for small hobby and test projects, works pretty well for me and I enjoy how easy it is to push changes and deploy from the console with heroku.
@@reactnativetutorial651 what do you recommend for a free deployment project when it comes to authentication? i heard u said to authenticate with express? some people recommend firebase or meteor, i heard meteor uses cordova which is discontinued? do you only have to authenticate when you start the connection? or with each emit? any tutorial of JWT that could be applied to this project? heard you can use express to generate the cookie and then pass it onto socket.io? but the passport library seems very outdated and non-maintained. would you start another server instance to handle the authentication? or put both projects on the same virtual machine server? do you use different ports for each chat room?
@@ericklestrange6255 Hi Erick, check out this package: www.npmjs.com/package/socketio-auth There's also an article here: medium.com/@rwillt/authenticating-socket-io-clients-f1e6f39a25fe I intend to get to authentication in socketio at some point but it's gonna take a while
The looping of the chatMessages via the map() function to display the chatMessages didn't work for me as shown in this tutorial. I had to put a 'return' statement, in order to get the List of chatmessages to display. Like this: const listChatMessages = this.state.chatMessages.map((message) => { return {message} // need to add 'return' to get this to render })
Bro, I get a problem.. actually the code of server is going well but once I make tap on the button to send the data to server, the server doesn't show anything even using the console.log(), May you help me to discover why is happening this please!
hi thank you for the video I have made a some app using socket.io and react native and it works as well on emulator but it cant send message on real android devices can you tell me what is the problem
Hmm I'm not sure barnama, but following this tutorial I was able to get it working on my physical android easily as well. Let me know if you figure it out.
@@reactnativetutorial651 I figur it out correctly even I can send message from real device to emulator but it cant send message from emulator to real device and also from one real device to other real devices cant send messages
@@reactnativetutorial651 I figur it like this import io from 'socket.io-client'; const SocketEndpoint = '192.168.43.172:31872/'; this.state = { socket: io(SocketEndpoint, { transports: ['websocket'] }) }
@@barnamam Hi, did you follow the tutorial or is it your own project? If you followed the tutorial, feel free to upload your work to Github and I'd be happy to check it out.
tnx 4 d vid, n plz make it complete, How to send message private for example: home tab: 1. user 1 tom 2. user 2 david 3. user 3 john here if I click on [ 1. user 1 tom ] then it should navigate to chat page on chat page any message I write it should be send just to [ 1. user 1 tom] not others here is a lot of videos of socket.io but allo them are just messaging or group chat not private chat
That's a pretty cool idea, but right now I'm focused on building a tutorial for a taxi app. Soon I'm going to make something where you connect and show realtime location of driver, perhaps you can draw a parallel to that and private messaging in chat.
@@barnamam yeah I've seen it but his tutorial seems pretty outdated and people seem to get stuck on it. Don't worry I'll get back to making a real chat app some time :)
I installed the app in 2 devices from a pc within same network, Now when i send message it reaches the server but the impact is only see is the mobile i send message from but not on the other mobile
@@reactnativetutorial651 I have the same problem .I work on two emulators. I send message with "chat message" event name to server as below. my client code related part is ; componentDidMount(){ this.socket=io("192.168.1.3:8088"); this.socket.on("chat message",msg=>{ this.setState({chatMessages:[...this.state.chatMessages,msg]}); }) } submitChatMessage(){ this.socket.emit("chat message",this.state.chatMessage); this.setState({chatMessage:""}); } My server code related part is; io.on("connection",socket =>{ console.log("A user connected to sockect server");
@@reactnativetutorial651 Ok ok no panic:) I made a mistake at server part. I used "socket.emit" instead of "io.emit" everythink works now thanks a lot.
Hi @Rahul Shakya maybe you made same mistake with me. I used "socket.emit" instead of "io.emit" when ı used "socket.emit" ı see the message only sender phone not the others.(I think this cause of that the socket for every connections are individual) but ı user "io.emit" ı see the message two emulator.
hey, this video clears my doubts, and now I understand how to start when we expect another video on the same with some of the features like User 1 And User 2 can chat and no other User can connect that chat like the room concept.
Hey Code Man, you are right. Though there will always be things you can add, so it's never complete ;-). I'm kinda worried if anyone has the patience to follow along step-by-step in a 12 hour course for 1 project. I was thinking the 6-7 hours are plenty so far. But payment option sounds like a good addition.
Hey Nadir, when I started React Native there was no Expo. When I tried it, I found it to be slower than react-native cli, and at some point when you need third-party packages, you're going to need to eject anyway. Those are my main reasons I'm sticking with react-native-cli. However, I would not tell people to go away from Expo if it works for them already.
![[UA] NAVI vs MOUZ | BO5 | IEM Rio 2024](http://i.ytimg.com/vi/CMBYk0cbGoA/mqdefault.jpg)
Hi tanks for the video. I'm face some problem using socket.io, totaljs(server), and react native. How to still listening the socket server even if my application is closed ? tanks
Great tutorial. Will this work on the current version of react native and socket ?
One of my students pointed out a issue he was having with a yellow warning box in React Native saying "Received data was ot a string or was not recognized encoding"
You can get rid of the error by using this in your App.js instead:
this.socket = io("192.168.0.10:3000", { transports: ["websocket"] });
Now you will receive another kind of warning message about Unrecognized WebSocket connection option(s) `agent`, however ou can ignore this one.
You can ignore the yellow warning by putting this in your index.js, so you won't be seeing it all the time when you're working on the app.
console.ignoredYellowBox = ["Remote debugger"];
import { YellowBox } from "react-native";
YellowBox.ignoreWarnings([ "Unrecognized WebSocket connection option(s) `agent`, `perMessageDeflate`, `pfx`, `key`, `passphrase`, `cert`, `ca`, `ciphers`, `rejectUnauthorized`. Did you mean to put these under `headers`?"]);
Those two things are what you need, and you should be good to go. I'm not sure why I haven't seen this warning before! Anyway this should solve your issue now, I was able to send some chat messages and see them in the backend! Thanks to Carlos Flores for writing to me about it so other students won't be stuck by it!
thank you for the notes on the constructor vs componentDidMount for initiating the websocket connection
thank you very much. The part where you cannot use "localhost:3000" to connect was where i was stuck. Once i replaced with IP address started to work for me. !!
@Ashwin Datye I am sry if I am being silly but I am brand new to this so I don't know how to use the app on my physical mobile device. Can you please help me out?
@@prashinmore2251 i used my own phone as dev device while doing react native development. or else you can create an apk file using android studio to install on devices
@@ashwindatye8156 thanks a lot I was confused because he was using it without connecting it directly but all the tutorials I looked up showed usb connections, I did not know about the apk. Thanks again
Good morning sir, very very good video. I use it to make my own chat cyphered otpimized best then whatsapp signal...But i have a problem. My phone can't connect from not local network. Is it a problem of internet port on my smartphone samsung android with telephonic operator. Could you please help me sir?
I was wondering why you kept talking about "new ES6" and then I saw the date. I was thinking "damn this guy must be really out of the loop, ES6 came out right when I started coding" lol
You are a very good teacher and I love your style and thanks for this
Hello Sir, what the conditions to use your code for commercial puporse please? Is it free?
Thank you so much bro great video
Hello , can you tell me how to convert a binary data (live stream) coming from a websocket into React native UI .
what if I need the messages to be displayed to a destined user .... meaning user 1 chats with user 2 without user 3 getting any messages from the socket
Just subscribed your awesome channel ,little help needed how will we specify that the msg is ours and put it on to the right hand side pls reply
what a simple and clear video of introduction socket io!
That Logitech MX518 from the early 2000!!!! Pure epicness of a mouse.
@ReactNativeTutorial can i ask you something? I want to create a chat on my app just as if it was Whatsapp, where you have all the list of chats with the people in 1:1 relation (for now) and then when you tap on one of the items, it will display the chat message screen.
Where should I import the socket.io-client? anywhere? or have it globally in my app by using something like redux?
@@marian_tsx Socket io can help you with fetching the realtime data. What you need to do is use some kind of database to store chat messages that happened between users.
@@marian_tsx Also based on your app you need to set socket io specific to two users at a time when the message sending or receiving happens. The one in this video broadcasts the message to every user that uses the app.
Whats the alternative of this.socket = localhost...... in functional component ? Anyone?
hi
is socket io running in background
if I press home button and go to another app, is still work in background
thank you for this tutorial
I can't connect with backend nodejs on virtual machine ubuntu aws ec2 but yes on local machine, what must I do?
That's awesome tut! Anyway do you have any ideas how to turn it into video chat? What's the requirements?
i wana ask something you are looping through every time in a array if we do 100text so it ll crash the app i think. this is not a good way.
do you authenticate only on establishing connection? or with each emmit? do you use JWT to authenticate?
github.com/RyanLeulmi/E2E-Encrypted-Chat check out my End to End encrypted chat app using react-native + nodejs / socket-io ( I check the client's token on every event ) . Eg :( Client) socket.emit("getRooms",token) --- (Server) socket.on("getRooms",token=>{check if the user is authenticated ..... get the rooms})
Can you create a video how to send message to specific user that we want ,like e commerce chat
Appreciate any ideas on how to solve my issue. I cloned the repo and created an apk for samsung. The server is running on port 3000. My phone and wireless lan are on the same network. I replaced the ip address with mine. I do not see a user connected message nor are any chats being sent to the server.Thanks
Did you run the server?
@@meowmeowmeow5332 I run the server, I first tried using the IP address of the computer running the server but then also tried using the IP of my network and portforwarding the 3000 port as well(it's port forwarded correctly, I checked.)
I understood this. But .. When i add button its making problem on emit
great session
Can we use this for any 2D multiplayer games as well .in React Native
How would i build a App with a private chat, where not every connected device should get the message?
is it possible to use socket.io connecting to firebase?
is there a github to this? I also have another weird question, since i was surprised you just added an external library that easy, can we yarn add any javascript library and it will be adapted to Android? I guess you have to check on github if it supports react-native? how do you check which libraries can be transformed to native code? I heard some people say you need to put the library inside the code cause they werent explicitly using webpack, its confusing to me how a globally installed library gets sucked onto apk
Hi Erick! 1. Github of finished chatapp can be found here: github.com/Hyllesen/TaxiApp/tree/01_SocketIoChat
2. You can usually add JavaScript-only packages that easy using either the yarn add or npm install --save ... I usually check how compability is with some Googling, but if it's a pure JavaScript implementation, there's a good chance it will work fine. It's all about trying to use the package and seeing if it works.
You can see some examples of how I install a package with some native code for a map component for Android here: ua-cam.com/video/WGtW14z4KDQ/v-deo.html It is a little more difficult, because the command "react-native link" doesn't work. However on the iOS platform you can see here: ua-cam.com/video/-0VBOoPtGFQ/v-deo.html it is a lot easier because we can use the "react-native link" command, and all the native code bindings is done for us.
I hope that somewhat answers your question? In the end it's all about adding the packages, which you will get lots of experience with, and trying to get it to work :). In the end you'll get a hang of it and how it's done!
@@reactnativetutorial651 perfect
Nice tutorial, i get all what you are trying to convey, THANK YOU VERY MUCH
What about if i want to send message to different users based on id user. Kind of fb chat one user to many ?
would you recommend ec2 or fargate? i am thinking of hosting it on free tier of aws ec2 t2, but i realised you cant really set a "hault order" in case this bills up, only some notofication, was thinking of using a RPi to host a server, what are your thoughts? u know if theres any way of haulting this server from getting out of free tier aws or know of any free hosting service for deploying this? i guess heroku with 1 dyno? do you think using a reverse proxy is lagging too much the chat 2?
I've used heroku for small hobby and test projects, works pretty well for me and I enjoy how easy it is to push changes and deploy from the console with heroku.
@@reactnativetutorial651 what do you recommend for a free deployment project when it comes to authentication? i heard u said to authenticate with express? some people recommend firebase or meteor, i heard meteor uses cordova which is discontinued? do you only have to authenticate when you start the connection? or with each emit? any tutorial of JWT that could be applied to this project? heard you can use express to generate the cookie and then pass it onto socket.io? but the passport library seems very outdated and non-maintained. would you start another server instance to handle the authentication? or put both projects on the same virtual machine server?
do you use different ports for each chat room?
@@ericklestrange6255 Hi Erick, check out this package: www.npmjs.com/package/socketio-auth There's also an article here: medium.com/@rwillt/authenticating-socket-io-clients-f1e6f39a25fe I intend to get to authentication in socketio at some point but it's gonna take a while
@@reactnativetutorial651 socketio-auth is no longer maintained
@@ericklestrange6255 hmm I'm sorry to hear that :(... I'll get to socket io Auth at some point :)
Hi, I'm trying to implement this with expo. But sadly the client side doesn't connect to the socket. Can you suggest me any solutions?
Don't use expo
The looping of the chatMessages via the map() function to display the chatMessages didn't work for me as shown in this tutorial. I had to put a 'return' statement, in order to get the List of chatmessages to display. Like this:
const listChatMessages = this.state.chatMessages.map((message) => {
return {message} // need to add 'return' to get this to render
})
i know it is too late but if you use curly brackets you need to use return other wise you dont need
Able to send msgs through emulator but unable to send msgs though mobile phone any idea
can you please tell me how to make user
Thank you so much. excellent tutorial, that was a huge benefit to me.
Bro, I get a problem.. actually the code of server is going well but once I make tap on the button to send the data to server, the server doesn't show anything even using the console.log(), May you help me to discover why is happening this please!
Share the code on Github :)
Thank you for this.
Great course! Thank you
Fantastic explanation!
Hello
User not shown connected,please help me out
Thanks a lot man this was very helpful...
hello bro
do you have cupon code for your taxi app ? i wanna buy .... but my problem is that the app is not complete .....
Here you go www.udemy.com/taxi-app-in-react-native/?couponCode=TAXIAPP
If there's anything you'd like to see next in the course let me know :)
By the way, you can't download the lectures on Udemy, that's only possible via. Thinkific react-native-tutorial.thinkific.com/courses/taxi-app
can we implement audio and video call functionality with socket.io?
you need WebRTC along with socket.io to create those functionality
how can we send messages using phone no just like whatsapp ??
hi thank you for the video I have made a some app using socket.io and react native and it works as well on emulator but it cant send message on real android devices
can you tell me what is the problem
Hmm I'm not sure barnama, but following this tutorial I was able to get it working on my physical android easily as well. Let me know if you figure it out.
@@reactnativetutorial651 I figur it out correctly even I can send message from real device to emulator but it cant send message from emulator to real device and also from one real device to other real devices cant send messages
@@reactnativetutorial651
I figur it like this
import io from 'socket.io-client';
const SocketEndpoint = '192.168.43.172:31872/';
this.state = {
socket: io(SocketEndpoint, { transports: ['websocket'] })
}
@@barnamam Hi, did you follow the tutorial or is it your own project? If you followed the tutorial, feel free to upload your work to Github and I'd be happy to check it out.
@@reactnativetutorial651 thank you it is solved
Received data was not a string, or was not a recognised encoding. This is the message Im getting when i try to connect. Could you please help me
Where exactly does this error happen? Have you tried comparing the finished project with your own?
ReactNativeTutorial resolved just now transports:[websocket] resolved issue
Perfectly explained
tnx 4 d vid, n plz make it complete,
How to send message private for example:
home tab:
1. user 1 tom
2. user 2 david
3. user 3 john
here if I click on [ 1. user 1 tom ]
then it should navigate to chat page
on chat page any message I write it should be send just to [ 1. user 1 tom] not others
here is a lot of videos of socket.io but allo them are just messaging or group chat not private chat
That's a pretty cool idea, but right now I'm focused on building a tutorial for a taxi app. Soon I'm going to make something where you connect and show realtime location of driver, perhaps you can draw a parallel to that and private messaging in chat.
@@reactnativetutorial651 thank you, but taxi app is a complete series already exist on youtube by emancode
@@barnamam yeah I've seen it but his tutorial seems pretty outdated and people seem to get stuck on it. Don't worry I'll get back to making a real chat app some time :)
@@reactnativetutorial651 Thank you
@@reactnativetutorial651 Great Bro, we're waiting to do private chat it will be fine!! , please ❤
But not working for me. Nonlog for user connection
I installed the app in 2 devices from a pc within same network, Now when i send message it reaches the server but the impact is only see is the mobile i send message from but not on the other mobile
I'm guessing the receiving phone is missing something in the code? Feel free to share the code if you want me to take a look at it
@@reactnativetutorial651
I have the same problem .I work on two emulators. I send message with "chat message" event name to server as below.
my client code related part is ;
componentDidMount(){
this.socket=io("192.168.1.3:8088");
this.socket.on("chat message",msg=>{
this.setState({chatMessages:[...this.state.chatMessages,msg]});
})
}
submitChatMessage(){
this.socket.emit("chat message",this.state.chatMessage);
this.setState({chatMessage:""});
}
My server code related part is;
io.on("connection",socket =>{
console.log("A user connected to sockect server");
socket.on("chat message",msg=>{
console.log(msg);
socket.emit("chat message",msg);
})
});
@@reactnativetutorial651
Ok ok no panic:) I made a mistake at server part. I used "socket.emit" instead of "io.emit"
everythink works now thanks a lot.
Hi @Rahul Shakya maybe you made same mistake with me.
I used "socket.emit" instead of "io.emit"
when ı used "socket.emit" ı see the message only sender phone not the others.(I think this cause of that the socket for every connections are individual)
but ı user "io.emit" ı see the message two emulator.
bro do you have a tutorial ON Commerce app using react native ?
No sorry, but I do get requests about it from time to time. Is there any particular backend you want to use for it?
@@reactnativetutorial651 may be with php or mongo db
nice video .very clear
hey, this video clears my doubts, and now I understand how to start when we expect another video on the same with some of the features like User 1 And User 2 can chat and no other User can connect that chat like the room concept.
i wonder how you could implement date time into this system, which is rendering only 1 time each day
Excellent video!!!
you are awesome teacher
but please the taxi app is not complete because there is no place where the passengers can pay their money online
Hey Code Man, you are right. Though there will always be things you can add, so it's never complete ;-). I'm kinda worried if anyone has the patience to follow along step-by-step in a 12 hour course for 1 project. I was thinking the 6-7 hours are plenty so far. But payment option sounds like a good addition.
ReactNativeTutorial is a very good idea ..and also user profile ..calling functionality
help me pls ! my nodemon isnt working
Thanks
Awesome. Thanks for the new tutorial. Gonna try it soon.
Very nice
Thanks man!
Good video
Çok iyi birleştirmişsin hacı abi..
e commerce application using react native with mongo db or sql,,, can any body help ?
So you want a nodejs backend you build yourself?
ReactNativeTutorial yes
nice tutorial really good!!! Thank is small for you!
nice tutorial
U r the best!!!!!!!!
Why my connection is infinite
this is very nice, well done very help full tutorial for every one
Thank you ❤️❤️
Why don't you use EXPO?
Hey Nadir, when I started React Native there was no Expo. When I tried it, I found it to be slower than react-native cli, and at some point when you need third-party packages, you're going to need to eject anyway. Those are my main reasons I'm sticking with react-native-cli. However, I would not tell people to go away from Expo if it works for them already.
Expo sucks! react-native-cli all the way
do it in functional components
thank you, that was very clear !
please upload Full stack taxi app
Hey Lokesh, the full stack taxi app is now only available at reactnativetutorial.net/mapsapp
thank you boss
thanks bro this is awesome
nice
12:20 how did the emulator screen come up
Thank you!
sos neidhart
help me someone
Good stuff, thanks!