Websockets with Flutter - Connect your Flutter app to the backend with websockets.(Flutter Tutorial)

hello and welcome back to part three on my series on websockets in this video i will show you how to connect your flutter application to a back end for your websockets i have made two other videos on websockets so if you have not seen them yet have a look it explains the background the theory behind it what are web sockets how can you use them and why should you use them and one on aws and how to set up the background using web sockets here we see the setup using http or rest apis you can open connections from anywhere in your application if it's different modules or different parts different pages and close them for each call comparing that to websockets you have one persistent connection and that means all your different modules or pages or widgets in your application need to access the same connection so the way to do that is to wrap the connection around your entire application i will be using the provider package to wrap this connection handling around the whole application i have made a video on the provider package so feel free to look that up on how to use the provider and quick recap the messages on this connection go in both ways and they need to find the right function or module or whatever it is on each side so on how to handle that on the back end i've made a separate video here we will also see how to handle that and direct these messages to the right place in the flutter application so to summarize it we want a single connection and that means exactly one not more that would mean additional complexity and different difficult to handle and also not less so we have the overhead of opening the connection only once ideally and can use that connection with low latency anytime anywhere in the application the connection must be authorized when opened if you need authorization for your traffic and the messages need to be labeled to direct them to the right function on the other side what i'm also doing is i hold outbound messages in a out box if for temporary reasons the connection is not available let's say you sit in a train and you're between stations your temporarily lost connection the application can hold that message and when the connection is available again it can send it again other than in the rest or http world you have to be able to retrieve incoming messages so this is definitely new in the websocket world and because a connection is not just a one second thing but you keep it in the long run you need to manage the connection life cycle the connection might drop at any point of time so you have to monitor that and re-establish the connection and also when the application goes in the background or the the phone is turned off you need to reconnect when the application becomes active again let's look at the different aspects in vs code so i'm setting up a connection model or connection provider and register it with a multi-provider as one of my providers that way it is accessible from anywhere in the application i use the dart i o module to use the websocket classes for connectivity for a web service connection the url is prefixed with a wss then of course i need a function to open a connection here i first need to get an id token from my cognito handler that i will hand over in the authorization header just like in a rest api and then i use the websocket connect to open a connection to this wss api once the connection is opened i register a function that processes all the inbound messages in my connection handler i also have an outbox which is basically just a list of strings each message is a string and i have a function to process the outbox so if the connection was down for some time now it's available again it will send these outgoing messages then of course i need to be able to close a connection and i have a function that handles all the inbound messages once i get a message i need to look at that message identify what to do with it for that i have an action attribute where the backend can specify which function is supposed to process this message and then i route it to that function accordingly now what i'm also doing is on a periodic basis i check whether the connectivity is established and if so everything is good if not i act accordingly so then the system will check why is there no websocket connection available and if there's no persistent reason then the system will try to re-establish the connectivity so here i want to avoid to try every couple seconds to attempt to open a connection when i already know it will fail so for example if i my authorization is declined three times then something is wrong and there's no point in continuing to try the messages are transferred as a string each and of course in a string i can encode json but do look out for the character encoding that might be different than in a http request and then of course i have a send function that checks if a connection is available if so it sends a message outgoing if not it puts it in the outbox and next time the websocket is available the outbox will be emptied and the message will be sent this will be the function that anywhere in the application can be called and you also notice it's not an acid quinous function it can be called at any time easily just hand over and done the main challenges in connecting your flutter application via web sockets with the backend i'd say are the structure of the communication the communication needs to be message based so each individual message needs to contain the context that is required to process it completely and the context is not transferred via the connection itself and this applies in both ways so also on the application side on the front inside you need a processing function for messages which in the past you only needed on the api gateway the connection itself needs some management some maintenance it it drops randomly for various reasons and you need to monitor that and re-establish the connection and the third thing to look out for is the encoding of the json so when it comes to escaping characters in the text that might be different and something to test and look out for keeping the connection alive when your phone is off when it's shut down or when the application is inactive for too long will most likely not work different operating systems make it harder in different ways but keeping the connection open in the long run overnight when the phone is not active is probably not possible so the connection does not immediately drop when you close the application but it will not stay open for too long there are however ways for background processing to wake up the application on a periodic basis and do a minor processing here

Channel: Tech Builder

Views: 15,184

Keywords: mobile app, vs code, app development, app design, iOS, Android, API, API Gateway, Cloud, JSON, Serialize, De-serialize, DART, AWS, Flutter Tutorial, Distributed Systems, Lambda, Node, Javascript, websockets, REST API, serverless

Id: Km9Zljl1B7M

Length: 7min 59sec (479 seconds)

Published: Wed Mar 23 2022