Building a ChatApp with React Native and Socket.io

hello everyone in this video I want to show you how you can build a really simple chat app inside of react native using socket IO and the reason why we are starting to build this chat app is sort of to give you a basic introduction to suck at IO I think that building a small chat app is a really good introduction into using WebSockets and socket IO so in the next section I'm going to talk a little about why actually we are using socket IO and not something like rest instead so I turned my camera down on the table because I want to draw a little and explain to you why we actually are using socket IO instead of something like rest so in a normal read situation you would have a client here let's say we have a phone here that is asking a REST API for some chat messages or location so let's say we have a location like we have an uber app it takes taxi app and we ask for a location of the driver so occasions now we have a endpoint that is called API slash locations now the client has to ask all the time our server hey is there new location is there new location is there new location like every second maybe every second and instead of having the server selling the client that the location has updated or there's a new chat message the client is keeping on asking the server is there a new chat message in the room is there a new location is there this is their debt and keep asking all the time is there something it's sort of like calling up a company all the time hey is there any news and you keep on calling the receptionist easy back now is it is the person back again instead of the person calling back to you when they come back to the office that's another example I have instead what is the better way is that you can push an update to the client so that's using rest this example here that's rest now instead we have something where we have a client here and they have a WebSocket connection to our server so this is our server here that's our server we can have it in no chairs in any sort of language but it's using WebSockets instead so we have WebSocket and then all of a sudden let's say or we have a driver who need has a new location and we want to display the new location on the phone then we can as a server we can push an update to the client while we have a WebSocket connection between the client and the server so instead of the client constantly asking the server hey is there new location is there new location and even if there's no updates now we can update the client and say hey there's a new connection here you go instead and again if our driver here it's a new location they can just sent a new location to the server em and then the server sends the new location to the client here so that's using WebSockets instead WebSockets basically mean that you as a server can push updates through your clients if you're using something like rest the only thing you can do as a client is to push updates to the server and ask for new updates you can get post put and so on but the server can't contact the client it's a one-way thing it's only you can talk with the server but this enables you to push updates such as chat messages locations to the clients so that's using WebSockets and there's a raw WebSocket implementation you can use both in react native and in browsers however yeah I would recommend that you use some kind of wrapper for it and that's what we use socket dot IO for so it's a wrapper implementation for rip sockets which makes it a lot easier for you to use web sockets and they have some fallback sorts as if you lose their WebSocket connection they go back to sort of a polling mode sort of like rest instead if you lose the WebSocket connection so lots of good features in it and it makes it easier to use WebSockets rather than using raw WebSockets so that's what we're going to be using is socket IO for this I hope this cleared it out why we are using WebSockets now and what purpose this technology or problems it is solving now on to the next section we are going to start with our project and in with then we are going to start implementing both our back-end server with the socket IO and the client which is connecting to our back-end in nodejs okay so first thing we're going to do is I'm going to make a folder I'm going to call it taxi app for now because we're going to Indian make a taxi app well you can call it wherever you want you cannot chat up I don't care it's just a name and so we go and make a directory called taxi app and I'm going inside the dope tree then I'm going to use react native in it and say mobile so it's going to make a new folder inside of taxi app that's called mobile where we will be having our mobile client and once that is done we're going to make a back-end folder as well now we are going to make a back-end folder so I'm selling the taxi app directory and I make a back-end folder then I go inside of the back-end folder and then I can say NPM in it - yes and then I'm going to say yawn at Express I'm trying to follow the documentation inside of socket IO so just suck at IO you can go on to and using the get started they have a pretty good tutorial for you to get started and make a socket IO chat app just for the web only and I recommend you try and follow that if you want to and you can use this to also be creating the chat app for react native if you follow along here also so you can try and follow this tutorial if you want to first I was having a little issue with this part especially it didn't work so well for me so I found some help online and I did a little modification for it so it works for me so anyway we're going to add the socket IO dependency as well so Express and socket IO okay now we're going to open the directory inside a future studio code you so here we have the react Native Client and mobile and the no chairs inside of back-end so I'm going to make a index.js file in here and now it's going to start importing all the fur and socket IO staff and Express stuff and we're going to build our application basically now we are going to say Const Express require Express this is the Express package for building usually api's and stuff then we're going to have constant F which is just Express you call here and server choir HTTP create server yep and we say Const I Oh choir socket IO and listen and repress in this server here and they will want to set a port here to port 3000 now we can say I owe on connection we get a call back here with a socket object and we can say console.log a user connected and we're happy so then we need to pass let's say we need to say server listen and pass in the port and we have this little constant log here to show that this server is running on the port and passing port here like that that's it that's how you make a socket IO servers super basic of course it's not going to do that besides making a console block with a happy face when the user connects but we can use this to start building on let's try and see how it runs if it wants that's also always a good start now I will use I'll go inside of the pack and folder and I will say note Mon index the chess if you don't have note Mon installed then you can just say npm i chi node 1 and node 1 is good because it's going to awesome actually run the application or started up again if i have to make a change like i have to make a space here or a or semicolon so if i save it now it's going to start up the app again so i don't have to type note index.js all the time that's why i use note 1 anyway we got our back end running already and now we just need to start using the client inside of react native so we can see a constant lock we should see when you start out our react native app now we are going to start running the react native app and i'm just going to start it up in android you can also start it up in iOS that is fine it's going to work either way so i will go inside of the mobile directory with the reg native application that we initialized which react native int react native run android and it should start compiling and it will start running on the emulator first let's go inside of the air chess now that the application is running on our emulator let's remove the comments here in fgs and other things we don't need like this instruction here the props we remove here and that's it so now we just cleaned it up a little bit and we can reload it it's still working now we can add the socket Iowa client dependency through our react native app so that's going to be a bit different from our no js' client it is going to be socket but IO client instead of just socket IO because we only need the client and now we and imported over here so we say import io from socket IO client and now we can start using it inside of dreg native app now we are actually going to connect to the socket IO server so we have imported IO from the package here let's go inside of the component did mount method and we say I Oh HTTP and this is where we put in our our local IP address you should not you cannot use localhost and the port that doesn't work for some reason on the mobile app and so if you refresh the app here you will not see any user connected string here you need to use the IP of your your local IP so go inside I'm you I'm on a Mac if you're on Mac or Linux you can use ifconfig if you're on Windows you can use IP config so ifconfig I'm going to use and find my local IP that is here 192 and so 27 so I will copy that in here and that's my local IP now I say this and I go in here wherever you are running our back end and I will try and refresh it and we see that it's as a user connected so this means that we got a connection to our socket IO server in here inside of the component it mount function I have seen some examples with people doing connections inside of the constructor instead and you should not do that you should not use the constructor like that you should not have any asynchronous functions going on inside of the constructor in react you should try to keep that inside of the component it mount function so just keep that in mind if you happen to come across an example that is doing something inside of the constructor with socket IO you should keep those a cygnus functions inside of component that mount instead and that's just best practice overall and that's what the react native and react team is recommending you do now that we are going to next go and make some sex box in here and somewhere we can display the sex matches text messages and actually send a test text message to the socket IO server so now we are where we have a connection to the socket IO server as soon as we launch our app or reload the app but we are actually not writing any chat messages or just making a console up with a happy face when two users connecting next step now is that we're going to build a little text input box for chess chat message chat messages and then we should be able to at least console.log it inside of our nodejs server and see when we receive a chat message so let's do that now I'm going to remove this platform element here which we're not using and replace it with text input then I am going to remove these two blocks of text here and I'm going to put in a text input element and we will say autocorrect to false because that's annoying so you have and we're going to have a unchanged text which we set here and that's just to set or chat message state inside of the inside of the app so set state and we say chat message and we set the state of our chat message by default to the plank up here like that so we have a chat message state which is just a string and that's what we're setting inside of the text input element and now let's just also set a background style on this text input so Styles I'll just give it an inline style in here to wait a height of 40 and I will say bolder with two and then we should be able to see the text box you can see it here it is pretty small and in the middle or if you remove these two justifying content and then line items we should be able to see it at least up at the top just like that and that's it now I'm also going to remove the two styles here welcome and instructions because we're not using them anymore so I will move those and yeah I think that is about it for now also I'm going to have a on submit editing so that's when we are pressing enter basically inside of the chat box what are we going to call we're going to call this submit chat message it's a function we're going to make now and okay and then we're going to set the value of this textbox to be the state of certain methods so as we are pressing in text inside of the chat box it's going to change the chat message state to be some kind of chat message rewriting then when we press ENTER to submit a chat message it's going to call the function submit chat message which we're going to be right here and do something inside here and inside this function we're going to send the message to socket IO and then we are going to remove clear D chat message state again so so inside of compounded mount we're not going to use current socket because we need to access this socket from anywhere inside of our app so we need to or inside of this component so we need to do it like this that's socket instead just like we have this third state which we can access anywhere inside of our component we can also make a they start socket and access the socket anywhere inside of our app or component so we can say this that's socket dot Amit and Amit is going to submit an event to the socket IO server so we can admit for example a chat message with the current chat message intestate and once we admitted this chat message we can just clear the state of the chat message and it's going to be playing again inside of the chat box okay I hope that is pretty clear to you that mean by now this is pretty fairly basic react stuff react native stuff and it should be okay clear to you what's going on here there's a little es6 feature I'm using here so instead of doing something like this I can just do a basic shorthand and remove this one here because they have the same name so I mean for now it's this just basic reactor 6 or react and es6 stuff we're doing here except for we're doing this this dot socket dot emit which is emitting the check message to the sockets IO server anyway let's see how it works so now if I type something in here test test test test whatever and I press the green button here or return on iOS then it's going to send the message and it's going to plank this one here and now obviously nothing came up here in the console log because we haven't built a listener for this event we are emitting so in order to listen for the chat message amid we need to do a socket on chat message and then you have a mesh object we get here and then we can do a console log of the message so now inside of the console log of the note GS over we should be able to see the chat Mitch's that I'm writing inside of the app so let's see this is from the app and I press the and button here and we get the message from the app inside of our noches index Church index years so that is how you send an event Y socket IO let's see what else we can do now the next thing we need to do of course is to display some kind of chat message list here of all the chat messages we are receiving or the ones we are sending also well we are going to do that in the next section now let's try and have a list of the chat messages displayed inside of the client so it's not just displayed inside of a terminal of our noche server we need an array of chat messages so chat messages is just business initialized as an empty array inside of the state and now we are going to let's see we need to emit the chat message which we do here and then inside of the noches so we emit the chat message to all of the sockets listening to our socket IO server so then we say when we get the message instead of just doing a console log we say IO emit chat message and we sent the message now it's going to emit the chest message to all of the clients listening to this socket IO server and now we just need to write a listener for any events of this chat message so here we are meeting the event and now we need to write a listener for it so we say let's target IO on chat message and we say message and we do something with the message property or the object we get so we say set state and then we say check messages array is equal to the chat messages array as it was before using the spread over radar and then we say add messages on it so this is using disparate operator from ESX so that we can add the message element onto this array and return a new array with the added element and that is then being set as the chat messages array now we need to add the the element or the chat chat messages to our view itself so we say can't chat messages we will do a map over the chat messages array so for each chat message we will return a text element containing D chat message and yeah if you are using react you also need to set a key usually that's best practice for each element in an array so I'm just gonna be lazy here and set the key as a chat message but in real scenario you would put it as a unique key or a unique ID that well unique compared to a chat message now you need to put the chat messages I will just put it down here below the text input like that and that should be it so now we are sending a chat message here on the submit submit chat messages chat message we submit the chat message and we said the chat message should be clear here so there is no text on the input here then the noches server receives the chat message and it emits it again so all of these sockets that is listening on the server then inside the client when we have this listener for a chat message event and we add the chat message to our array so now let's see if you reload the app here if it's going to send or ad the chat message in D below here so we write test and we see the test down here so that it's working all fine like it should post to and now and you can also try and deploy it to your own foam and then you can try and send a message for your phone and you should actually also see the message displayed inside of your emulator and vice versa so let's try and do that now I got the app running on my phone and I'm going to try and write a message from the phone and see if it comes up on the emulator it's actually pretty hard to write without de also correct so I wrote from phone and you see it pops up on the emulator instantly also inside of the noches console.log I don't know if you can see it but so i can also write from the emulator monitor free for example and it pops up on the phone as well now obviously you can build on to this and it's not going to make Facebook shut down messenger anytime soon because you built this chat app but the point is that you got a really good introduction into socket IO on react native and you build a little simple server that is able to receive and send events to clients now obviously the next step you could do is you could build something where you have a username for the clients so someone can enter in a username and they get this username assigned to them you could also build something yeah well you could do make the layout better of course for now it's just a list and it's if it's going to be too long it's not going to fit all of the chat also you could save the previous chat messages insert into some kind of database so that when someone connects to the the chat room again they get this list of databases there's a lot of things you can build onto this but the point has been so far just to give you a basic introduction to socket IO and I think this sort of chat app is a really good example of it so thank you for watching this tutorial and I hope you got something out of it and if you have any more questions about this socket IO and so on then let me know and I will try to answer it best I can

Channel: ReactNativeTutorial

Views: 46,062

Rating: 4.93578 out of 5

Keywords: react native, socket.io, chat app

Id: cfggyE1Ptbc

Length: 30min 49sec (1849 seconds)

Published: Tue Jan 01 2019