Socket.io Connection on Android Kotlin to Node.js Server

today we're going to create an android app in kotlin that uses socket io connection to connect to a node.js server i'm not sure if you saw this video on youtube or you looked at my article but in this youtube video i'll have a link to this article and this article has um the codes that we need for this project and what essentially what this article does is it gives like the theory on how to connect socket i o to your android device but um to make it easier i'm gonna make this video where it's gonna show a practical app which is just a counter app that counts and to show it both working together and that's what this video's purpose is for so at the end of the video what we're gonna get is we're gonna get this app to synchronize together right now you see i'm clicking on this button it's just doing six seven eight nine ten and nine and you see that it's not synchronized together but if we do connect it to the server whenever i click nine ten it should update on the other device and vice versa so that's what we're going to be doing today and i don't think there's anything else i have to say so let's actually get started in installing the stuff we need first thing we need to install is a node.js and i'm assuming that you have some prior knowledge with node.js or else you're going to have some hard time understanding what i'm going to go over as this is not like a beginner's tutorial that is also true for android studios in kotlin but once node.js is installed the ide i'm using right here is visual studios all i did is i just created a folder and i put the server.js file and i you can just copy and paste this code i i will have my link to my github repository and you can if you're lost or something you could just copy and paste this code i wouldn't recommend it but it's an option but uh in short just a brief explanation of what the server does is it's going to connect to localhost 300 3000 my bag and when a socket user connects it's going to print it out on the terminal uh and it's going to say new socket connection and it's going to just put the socket id and whenever a client or your android device sends an event called counter to the server it's going to do count plus plus it's going to increment that the base value of count is going to be 0 but as it increments it's going to go 1 2 3 4. after it increments it's going to admit to all clients under the name of the event counter it's going to emit the va the value of the variable if it's 5 6 7 8 whatever the case is but yes that's what's going to happen now i'm going to help you start up your server so first thing you need to do is going to open up terminal if you have a macbook you could do command j it's a fast shortcut you're going to do npm init uh if this if you get an error or something like cannot found or something like that that means that node.js is not properly installed i would try getting that fixed or else you wouldn't be able to continue with the process but if you're good you just continue return return return return or enter enter enter and great now what we're going to have to do is we're going to have to install some of these dependencies so the first dependency we're going to install is npm i express so it's going to install that we're going to do npm i socket dot io and the last one is npm i fs i'm not sure but i think fs is already pre pre-installed but either way let's just install it in case once that's done i'm just gonna uh yes once that's done we can run our node.js server so you're just going to write node server.js when you click on that the server is running so we can test it out by going to our localhost and pressing enter and even though this cannot get doesn't sound good this is good our server is running because if we don't have if the server isn't running i'm going to the way i cancel the server is by just doing control c uh you can see if the server is not running oh that is not what i meant to do localhost okay if the server's not running you'll get something like this so that was good news when it say cannot get i'm just going to clear this up so no clear okay apart from that now that we have the server ready we can actually go into the android application i did i created a couple of stuff in the application it's literally just an activity main and main activity all i did is i created a text view one text view and one button the button if it's clicked it should just update the text view so if you go to the logic uh this is what i called this is the count this is going to be the button this is going to be the text view and and i created a global variable called counter and essentially whenever the counter button is clicked it's going to increment the global variable and it's going to change that text view and it's going to display that text view right over here which you uh which everyone saw in the application all right so now that you understand what i've done in the android app let's actually install the stuff we need as if you're in a new application i'm going to install the stuff we need to get socket io to connect so the first thing we're going to do is we're going to go to bill gradle and we're going to need to install this right over here so uh don't worry if you look into the article i'll have this code right over there so you can just copy and paste it it'll be in the article or also you can find it my github but yeah and once you do that like i you'll see sync now and you just oh sorry and once you press sync now it should download the in libraries we need second thing we're going to do is we're going to go into android manifest and we're going to and you'll also find this in the article we're going to need to give user permission for internet access and uh huh yes we're gonna need to do that and uh we're also need to give use clear text traffic we're going to need to add that right over here if you don't add this you would not be able to create a socket i connection so you make sure you follow these steps correctly now that that's done we can now okay i think i made a mistake actually i don't think there's a w w here make sure that it should just be android permission.internet i good thing i caught that mistake that would have been wrong that would have caused an error but okay now that android manifest is done now let's go into the um the logic so how are we going to connect socket io to this so actually sorry i jumped the gun we're gonna have to create a singleton class the reason why we're gonna have to create a singleton class is because um right now if you create a socket instance in an activity and you go if you try going to another activity it will disconnect and we don't want that so by using a singleton class essentially we're creating a static class a static object that will never disconnect so let me let me create that right now so just like in the article i'm going to name it socket handler and you can just copy and paste it from the from the article uh right over here and yep so perfect now that we have this i i just i'm gonna do the same thing to speed up the how long this video is i want to make it as short as possible but um why did i put http 10.0.2 or whatever i wrote here the reason why i put that is because not unlike web and like even ios when you're trying to connect socket io uh socket connection to your local host you cannot write localhost because uh that's gonna connect to the android emulators localhost if you want to connect it to your laptops like the laptop that you're like you're in that laptop you have an amazon emulator you're gonna need to put this because if you do locals it will not work i'm just wanna tell you ahead so that you don't make that mistake that i did and yeah uh essentially all you're gonna do is this set socket is going to set it the socket to this url and then this is a way of getting it the reason why i wrote synchronized is synchronized is the way to keep it static so that when you're going traversing through other activities the socket won't disconnect and in this application you won't see us going to another activity but it is very important that you do it this way or else your socket will disconnect but apart from that i think we can actually now connect our socket so the first thing you're going to write is you're going to write socket the name of the object class socket handler dot set socket i'm going to have to write that the first time then we're gonna have to do val m socket uh and we're gonna have to get that socket so we're gonna do socket handler.get socket and then we're just have to connect to the server so socket.connect okay perfect now that that's done now that this if this works good now that we've connected to the server in this activity what we're going to do is we're going to actually remove this variable global variable because uh that global variable is going to exist in the server and we don't need that here so let's just remove that and what we're going to do is when the button is clicked we're going to set an event m socket dot admit so this is how you're going to send it you're gonna have the name of the event and i'm not sure what i called it what did i call it i called it counter okay so we're gonna admit counter and uh yes we're just gonna emit counter to the server so that whenever the button is clicked the server will receive it and it'll proceed with these actions the second thing we're going to need to do is we're going to have to um we're going to have to i'm going to remove this line piece of code we're going to have to get the socket we're going to have to receive the data so let's write that right now and the way and i called that event counter to okay so we're going to receive the event um args i believe i'm going to write this you'll find this code in the server if you're if you feel ever lost you can always find in the server we're going to make sure that this is not no whatever data we're receiving is not null that will cause issues so args zero doesn't equal null and um then we're going to make our counter equal to our zero oh no not all zero okay now that that's done um i'm going to also write as int but if you're receiving from the server if you're receiving a string you could write string or like a float you can write float uh or if maybe even an object i would just not i wouldn't write as or anything i'll just leave it like this but as we know we're receiving an integer i'm just going to write in okay now that that's done uh one thing you need to make sure is that you need to whatever you're going to do you're going to have to run on you're going to have to put run on ui thread and then you're gonna have to do your code like any action you want to do you shouldn't do it here like apart from logging like log that i and then you make like a logging stuff uh everything else you need to do is you need to run it over here because if you don't do that it might cause your application to crash i'm not sure why but you have to run it under run on ui thread but uh the data we're going to be receiving is going to be the counter so what i'm going to do is i'm going to make count text view the text view i'm going to do and make that text equals to counter this variable right over here and uh the reason why we're getting an error is because i believe it needs it's uh integer and we need to convert it to yeah to string perfect so let's just do that oh to string okay now that this is all done i'm gonna run on multiple devices let's actually see if we have this working so let's run it let's go to our android emulators nope okay that did not go later okay here and let's see if this actually works okay now the both the emulators are up to date and we've got the updated versions of the app okay now let's actually test it out and see if it works um it's not working uh what did i mess up [Music] oh wait maybe he's okay i forgot to run the server that's please don't make the same mistake i did and uh perfect okay two connections so it looks like we're gonna have some good news okay i think i see it yeah okay so congratulations on making your first android socket i o connection in kotlin you can see that it's working and um yeah like the great thing with soccer connections is you can connect you can make a multi-platform you can connect it on the web you can connect it on ios you can connect it on even java gui like i've done all of those and um that's a great thing so you can make some amazing cross-platform multiplayer games but um i'm gonna keep that little clip of me flopping and not putting this running the server because you can see that we all make we can make some tiny mistakes and it just won't run servers are very very particular what about stuff like for example if i just wrote count this this would like break the game like not the game the counter it wouldn't work so you have to make sure even like one letter can make a big difference and that's what i want everyone to know and uh yeah i think that's about it thank you for taking the time to listen to this video and i hope you have a great day

Channel: Thushen Mohanarajah

Views: 1,332

Rating: 5 out of 5

Keywords:

Id: N3NZ9hno66A

Length: 15min 20sec (920 seconds)

Published: Thu Jul 01 2021