Realtime Applications with Sockets - Introduction in Sockets with Dart

hello my friends and welcome back to another episode of flutter explained I'm so happy to see you here today we want to learn something about sockets in Dart and want to implement that so let's stay with me to learn everything you need to know about sockets web sockets and how you can Implement them in your dark or flutter project and now without further Ado let's get started and because I didn't find a sponsor for today's video I do some advertisement for codeberg today codeberg is an uh repository like GitHub but allows you to be a bit more private it's free and open source it doesn't track you it is hosted in the European Union it's hosted Independent by a non-profit organization in Germany it's based on the open source guitar criterias and it listens to community many popular projects are already on codeberg so feel free to also join it so today is for codeberg my repository is also on kirkberg I personally really like it so feel free to check it out and now back to the video we already spoke about how HTTP requests are working so that you can directly call from the client to a server and receive some information but this time it's a little bit different we want to achieve with sockets a stable connection between client and server so that the server can notify the client when something changes the Ben benefit here is that it allows real-time communication and this is sometimes really cool suppose you want to have a short Refresh on our HTTP requests are working I will link you a video in the info box so that you can watch it again alright great but what is now the benefit of having a socket connection between or better than an HTTP response request well think about modern applications we don't really want to wait till data are there we want to be as real time as possible and if you think now about Firebase with the store a firestore service that they provide you will think exactly right this is how they do it so when they talk about real-time data whenever something changes in their Firebase application we they created a socket or in that case probably a websocket that automatically notifies the client about changes that are the streams that you're sometimes receive from Firebase to automatically update your data so before we had this big benefit fits of web sockets or sockets we had to pull every time for data so that means you would trigger a long-running build on a server for example and would like to receive the answer from the server then you would need to ask every let's say 200 milliseconds hey dear server is the data finished that I really need with web sockets we can now do something different we can say okay make this long-term running task until you have finished I keep the connection open and as soon as the connection finished so the server says okay I'm done with the file and pushes the thing to the socket the client will receive that file as an answer and we'll close the connection again and with that we have the round trip saved we don't have to pull every time like every 200 milliseconds and when the data is there we can directly react on that most chat applications that work in real time are done with websocket technology just to make sure that we are on the same page if I talk about sockets I also include web sockets even though that is not completely correct while sockets are living on a lower level and are more directly for different clients web sockets usually work on the client like on a browser for example can work with web sockets it has a lot of HTTP sugar around it to make the usage in browser and front-end applications a bit easier I talked today about sockets my first example will be pure sockets with that we will work with two Dart terminal applications that will speak with our server and afterwards I will create a flutter application that will talk with web sockets with our server all right just to make sure there is a difference and feel free to read down in the comments all the documentations about it to make sure that you really understand what you want to use in your case all right now that we are on the same page what web sockets and sockets are and how they are working how they can benefit us let's see how how we can Implement that in real code as always you will find the repository down in the video description so you can follow along to the tutorial or what you can also do is enhance that tutorial and if you do so please feel free to send me your solutions that you have done there I would be very interested what you do with websockets ah and if you are still here don't forget to like this video And subscribe to our Channel it will be beneficial for you in the next couple of days there will be more and more videos up there it's sockets now we have either DB that we want to talk about and I have a lot of more topics that I want to show you so feel free to follow me and if you want to take part on votings feel free to also join me on Twitter great now back to the video alright but before we begin let me quickly give you a short introduction what we want to do today so we have the terminal where you can see the top one will be our server the second one will be our client and the second one and the third one will be another client so let's start up here sir as you can see the server is running on zero zero three thousand and if we can start up a client it will ask me for a username which will be Max in this case and you can see the connection has been done in the server side and the same thing we do with our second client but this time we are a matter and as you can see martab has joined the party is visible in the first client and here we see that the connection happened on the server side all right so now let's get into it alright as you can see on the left side we use for this time the repository of codeberg which is nearly the same as git Hub but it allows us also to be a bit more transparent with our code so here you find that the tutorial and here soccer tutorial part one if you want to follow this tutorial here along you have the possibility to do it here and if you want just the solution and go with it the solution part is here visible and if you see the main tag there I did some experiments and already created some advanced stuff so if you are interested how it goes further with the socket part you can take a look into the main branch all right so now I explained the tutorial you find it down in the video description below and I start now with the solution alright so let's start with the tutorial we will first Define the whole server side so we will create an IP address we initialize a server socket so that we can receive socket connections then we want to listen to incoming connections inform that the server has a client that is connected to him then we wanted to listen so that we can write information to the client whenever it's important we handle error cases so if something went wrong if we handle if the client is leaving so that the server is also knowing that and at the end we want to create a list of different clients so that we can send messages to all of them or broadcast them to be honest good so that's the general idea for the server side all right now let's switch to the client side for the client it's important to do exactly the opposite things so we want to create a socket that can connect to the server so that it can listen and inform the users about things that happens there so we listen to Notifications we print that you are connected well not so important but then we want to handle incoming data so when the server sends us data we want to do something if we get errors from the server we want to handle them if we have a server that's left our Channel then we want to also disconnect from that socket so the client don't have to be active then anymore after that we want to ask the user for his name in the terminal and if he enters the name he should receive the information you are logged in or when you have a second part that is connecting like a second client then we want that the username of that client is visible somehow and all the clients that have connected to the server get in for more informed that there is a new player joint alright now let's jump into it we will first Define our server fully and after that go to the client all right in order to get an IP address in Dart we can directly say internet address any ipv4 that will give us a free IP address so that the server can start up usually this is zero zero zero zero but it could be that it's different so for example if you deploy it to Heroku we did that already in a video you find it up in the info box then it will take the port that is free for it so that's a great great way if you don't really know which IP address is available for your server after that we have to create a socket a server socket where we create that and as you can see we pass in the IP address and we just say three thousand as a port again in Heroku there will be a system variable that you have to set so that you have the possibility to use a generic Port that is created for you but also that is covered in the Heroku video so feel free to just watch that again if you have questions there or read the blog article then we want to inform our users that we have a server running on that IP address with that port okay but now it's getting interesting now we want to first time listen if someone is connecting to that server and if so then we want to handle this connection so what we do is server.listen we receive a socket as an event or just call it event here and then we Implement now a function called handle connection okay so now that we are that far let's remove some to do so get free IP address we have done that initialize the server socket we did that here in line 8. listen for incoming connections I think that's that part so we can also remove that and now we have to handle these connections that means whenever a client connects to our server we want to do something and we have now I'll put that outside of the main function that's very important so handle connection and here we receive as we write above we receive a socket which is our client so and this method does not return anything all right so we get our client socket what does that mean we want as a server now to listen for the client if he sends us messages or informations or data that we can work with all right so let's listen to the client which gets us a socket and if we take a look into the description so we can also jump in but uh to make it easier we just use now the IntelliJ functions we can see we get three methods that we can provide the first one is on data which means we receive data from the client so what do we want to do with it do we want to convert it as you can see it's a uint 8 list which are just bytes and these bytes needs to be converted into messages or objects so we have to make the parsing here on the other side we have an on error function which means whenever an error happens from the client side we can collect that here and do something on it we have an undone method that means whenever the client closes its connection to us what do we want as a server to do then and last but not least cancel on error which means uh more or less Whenever there happened an error do we want to close the connection to the client okay so now let's Implement that quickly so we have three methods that we have to pass in the first one is Unit 8 list that we receive that's our data so that should be green the second one is our on error so we can write on error the voila and we receive an error which we do with print red error so we just if we receive an error we just print it out in that case and then we say client Dot close so if there is an error we close the client we could also do that with the Boolean flag remember but we don't want to do it in our case here so and last but not least we have undone which is a pure method where we say print warning and here inside we just say server to identify who is writing something in the inside of the terminal later or this is the server side the client left so it will be yellow and last but not least we say client not close let's just closing the socket on the server side okay and with that we have already made our boilerplate so we have not a chance to listen if the client is sending us data we will do that in a second then we have handled the error case and the undone method and here we need as always a semicolon great so we have again green code so if we take a look back on our different to-do's we can remove some we can inform the server we did that we listen on the right information from the client that's this part here so we can remove that handle the error cases that this part we can remove that and seven is undone so we can also remove that now we want to add a list of clients to track all sockets so that we can broadcast informations okay we do that above the handle connection so create a list of socket clients and inside of here we have just an empty list and whenever we connect now and we listen to the server we receive a message so string run Char codes well that's jar codes data so here we receive now the message and serialize it into a string so and if we do that we can say clients dot add the client itself so we save us the socket for later and last but not least we want to say client.write so we send an information out from the server to the client here good and this will be server you are logged in as message because as we know the message will be later the username right okay and one more thing we have to do because we want to broadcast information to all the clients that exists we do that in that part where we say okay for Loop be in clients for every client in this clients list we want to write now an information from the server hey dear message has joined the party so whenever a new player joins the game the message will be the name of the player and then we send it to the client so that every client knows now hey there is a new player good so that's it with our server now that should run already and we can remove the last to do and if I go now to the terminal we can say Dart dot slash bin slash server dot Dart if we execute that we see servers running on this number and we will need that in a second all right in our main function of the client we want to First connect to the server as we know the server is running on the localhost IP and 3000 now we want to connect directly to that server and it's very important that we know where that server is so that we can do that so we pass in the socket we import it from dot IO connect and here inside we directly take the IP address and the port stuff and with that now our client was able to connect to that server so let's inform our users to it so we have here a short message connected to the remote address and the port so now in the next step we want to say socket.listen so we do actually the same thing as on the server if you remember because the socket is nothing else than the port so we know now the server is answering us with something and if we know that then we receive on data again with t event then we have the function on error and on done and as you remember maybe this on data was for us and U and eight list so if this happens and we know that we can directly implement it again U and eight list is our data that we receive from the server then we have again on error which we remember right so it's a method with error where we print in red the message client error so we pause it just outside and if this happens we say socket dot destroy that's the only difference to the server in that case the socket needs to be destroyed the client gets closed all right and after the on error we have also undone that means whenever the server is disconnecting we also want to inform our clients and users so we print in I would say in a warning or better in an error because as you remember um that's pretty harsh if the server is dying so client says server left okay and last but not least socket dot destroy good and with that we cleaned everything up all right in order to wait for a response we just do the following we go here inside and do the same thing as on the server we have to get from Char codes the data so finals server response is a string Dodge from Char codes and we pass in the data good from here we print in green because it's a successive we get a message from the server client server response no that's not completely true we have to make that this way right good so whenever the server tells us something we should run up all right so now we have the possibility to first test something because our client sends some infos it connects to the server the server should send at least the message hey there someone has connected so that is maybe the first time that we can test something so I prepared an i theorem 2 Terminal where we have the possibility to create three horizontal Terminals and yet the first one here up here should be the server that John is a client and that one is our second client so that we can test the broadcast functionality so let's go up to the server and start data hidden server.dart we receive our address so let's go for the next one directly and create our first client and voila we receive connected to that IP address 3000. interesting enough our server does not respond well we have to check the reason why we don't get any information from the server that the client has connected there was something missing is because in the handle connection I forgot to add a message like hey there has someone connected so let's try it again I add that go to the item we run our server first now let's go and create a client and now we can see that there is a connection from localhost on the port 53254 and that's interesting because every client will receive a different port okay but now let's ask the client to enter a username so that we can see if the broadcast is also working all right back to our to-do's we can remove the client two three four five six because all that is done with that listen function up here but we stay now in the main function and now we want to ask our users for a username so let's do that first we need a string which could be now username and then we say do and print something like uh please do you please enter a you username and then we do that so long or we wait so long until the username is not null anymore or username is empty so I hope that makes sense that just means do it once and afterwards always whenever it is null or is empty so we make sure that afterwards the user has actually a username and if we have a username we say socket.write and pass in the username as a string and that's it all right so let's test that in real life let's restart our server quickly I am not even sure if that is necessary but I want to do it in just in case oh yeah something went wrong let's have a look what went wrong why do we send all the time ah of course because it stays empty and we don't wait for something so what we need to do is say actually s-t-i-n read line in sync so that means we want to wait until the user entered something start that again and up here we can see the connection we can see the client left and now we have a new client now let's say hey Max wants to join okay so now you are logged in as Max let's see if we can get the second one running up so large bin lion dot Dart and let's say this one is now Mata and if we check the server in the meanwhile we can see we have now two connections one time from five three two eight nine and one four five three two nine one this is always the port that changes for each client that connects so let's see what must have does you are logged in as Marta and as you can see the client server sends US map joined the party so with that we have the option to show who is connected we could create more and more clients so if I want to I could even create multiple ones and five six seven you can test that and everyone can join the party and that's pretty cool because with that we could do funky things like games or anything like that so I'm really interested how we can do that so that's the first steps to do something really really cool with dart all right that should give you already a very good idea on how sockets work and what you can everything achieve with it no more pulling no more waiting for data and the best thing is you can create games for example like pong over the internet you can do so many great things and I really want to know what you plan to do with sockets if you enjoyed that topic as much as I did please let me know by hitting the like button it's really important for me this time because it shows me that you are interested in sockets and you want to know more about it and I would also take it that to another step that we've implemented in flutter and maybe that will work for example with socket i o please let me know if you like that and then feel free to share that video and with that thanks for watching until the next time I'm really happy to be back and we see us in the next week bye everyone [Music]

Channel: Flutter Explained

Views: 11,600

Keywords: Sockets, Dart, Flutter, Realtime Applications, Realtime, Applications, Messages, Connections, TCP, IP, WebSockets, Tutorial, Learning, DartProgramming, Programming, Mentor, Teacher, termina, Terminal, Command Line App, Command Line

Id: cpEYw8HuoxI

Length: 24min 31sec (1471 seconds)

Published: Thu Jul 28 2022