Hello, in this video I am going to show you how to use you know WebSockets how to work with them. This allows you to essentially connect to a server without using HTTP request which allows for two way communication with a server without polling implementation isn't that hard to be fair? First of all, you want to go to the pub spec dot Yama file, you need to add in our dependency, this is going to be web underscore socket and scorch channel and the version of 1.0 point nine so we you know, get the package upgraded. Well so if you want to know more information about packages if you go to pub dartlang.org forward slash packages for this one channel The latest version is version 1.0. point nine currently, but you can, you know, use the latest version there is when you use it or you version that on an installation that you know just right here shows you how to actually know use it and different than.
Okay, so now that we've got that we can actually do some inputs. So for the inputs you want to import package floater foundation dot you don't need the extra coding pub spec for this one, but you'll need it for this one you need the core package, web socket channel IO dot dot and you will need it for package WebSocket channel web socket channel dot dot okay so now in the my The first thing that is run within the home part of it, we need to alter this, we need to add a channel for the channel is going to be i O, web socket channel.net. And you can obviously link to any website you want. I'm going to be using the one from websocket.org which is going to be our code and that will just essentially send back what we send to WebSocket. Okay, so the name parameter channel is not default.
Okay, strange. Oh yo WebSocket channel dot Connect. Shouldn't be an individual this isn't as make sure it's all in the workplace channel was too close. Then the stateless widget accounts gonna continue, just in case it's an error that will disappear. I'm sure it will shortly. Okay, so in our stateful widget, what we need to do is create a socket so web socket channel and call this channel and next what we need to do is first form another parameter and this is required.
So I'm going to put re is gonna be this dot channel. There we go. Okay, that error has disappeared fantastic. Now we can go to the actual state itself. First of all we need to create a variable. This is the text editing controller.
And we're just going to be using this to display the text editing controller. Okay. So now in the body, we are going to do is we are going to what are we going to do? Now what we'll get rid of this, again, this is just in our format in search certain way here, so tied in. And obviously you can do this however you want but the edge in sets.org and the volume approved 20.0. Again, this is all just just to customize is an absolute child is going to be column.
So here we're gonna have a cross axis alignment across a given moment dot dot children budget, form, text field, decorators decoration and input decoration. So this textbooks they will just get the E book from us. We'll send this and the website will send message and we are going to have a stream builder widget dot channel dot three sharp cut in comm again if you all know everything that's going on you know the extra stuff is gone padding calm Feel free to check out my videos Cool stuff this metric vertical. Now we are going to child text. snapshots dot has data. I'm going to put dollar snapshot dot data.
Now what we are going to do is create a floating button and the floating button is what we are going to press to actually send the app now we don't need that well we'll just create a regular button. We'll just say I love the right button. So rain button so Then I'll learn slowly on press and learn and it will actually, we can do, it's just going to be another method of a separate method and say underscore method development implemented yet and we are going to implement that right now. So we are going to say, void underscore message is going to check if the controller you know is detected and empty so if controller.txt.is not empty if it's not empty, then we are actually going to say widget.channel.on, the school controller dot txt Yeah, let's make sure we handle the clean probably something to override the dispose method.
I am here with config widget dot channel, dot Singh, close and concise to the doctors. We should be all ready to you know, notice if we know that we get this so if I type in here hello click send and receive that's appeared right here. So nowhere we override historically This is being sent to this WebSocket and that is what we are putting inside our controller. So that's it for WebSockets. If you have any questions, feel free to drop me a message. I will link the official documentation for WebSocket I look forward to seeing you in the next video.