How to use webSocket and GetX in Flutter with Architecture
In this blog we will talk about websocket and flutter. We will see how to imlement web socket with GetX controller and beautiful architecture.
Table of Contents:
• Web Sockets
• GetX
• Architecture
Let’s begin..
What is WebSocket?
Web Socket is a structure that can send bidirectional messages over TCP connection. WebSocket establishes a connection to the client and maintains this connection as long as it wants. Performs the process of both receiving and sending the data bilaterally.
What is GetX?
GetX offers developers the opportunity to use state management, navigation manager, internationalization and themes in an easier and more efficient way. And this ensures that what it offers is both efficient and easy to implement. Of course, we will only use controllers today.
For more information:
What is Architecture?
The software architecture includes the software decisions that are difficult to change later, such as the performance of the system, its security, its changeability, what kind of hardware it will run on. The stakeholders of the software architecture are the developers, test engineers, users and senior management who are related to the architecture. The software architecture provides the medium for these stakeholders to communicate. Therefore, it is indispensable in the real world and is something that will make your work easier.
For flutter, today we will separate it as app and view under the lib folder and continue our operations in view.
Let’s go to the project..
We talked about the latest architecture, let’s first examine the image below to understand the structure.
First, let’s start with the message_controller.dart in the controller folder. This is the most important benefit of GetX. You can write your business logic in a class that you extend from GetxController. Even functions like onInit(), onReady(),dispose() will help you here. We first generate a GlobalKey object. We will use this in the key: section of the message_view.dart in the view folder and this way we will access the variables and functions we wrote in the controller.
Then, after importing the WebSocketChannel class, we create an object named channel from it. Then, within the onInıt() function, we connect to our websocket with the connect function by giving it the url. Then we write our send function to be able to send data to the socket. Finally, we exit the channel within the dispose function.
Let’s go to our view page..
We start a Stateless widget in the message_view.dart folder and move on to our codes. If you’re using GetX, you don’t need the Statefull widget. This will increase your application performance. First, we include our message_controller.dart file on the page with Get.put(). We create a textfield to send our message. By the way, tekxfield’s controller also comes from message_controller.dart. This is the most important part. We start to listen to the socket connection that we started in the Controller with StreamBuilder here and send a Text widget with return. We will see the messages we sent and received in this text. Finally, in order to send data, we write a button and give the sendMessage() function, which we write in the onPressed controller.
Finally, we bring all of these pages together under a message_main.dart with GetX’s GetBuilder widget. In this way, we establish a beautiful architecture. You can view all the codes below.
For source code and the entire project:
Conclusion:
In this article, we tried web socket with a dummy socket with flutter. In doing so, I tried to use the GetX package and a nice architecture. Glad you’ve read this far and it worked for you. ☺️
I wish everyone good coding… 👋🏻
