{"id":5992,"date":"2023-04-12T05:27:36","date_gmt":"2023-04-12T05:27:36","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=5992"},"modified":"2023-06-27T09:59:34","modified_gmt":"2023-06-27T09:59:34","slug":"building-real-time-apps-with-flutter-and-websocket","status":"publish","type":"post","link":"https:\/\/dianapps.com\/blog\/building-real-time-apps-with-flutter-and-websocket\/","title":{"rendered":"Building Real-Time Apps With Flutter And WebSocket"},"content":{"rendered":"<p><b>Mobile app development <\/b><span style=\"font-weight: 400;\">nowadays requires real-time data to offer rapid responses to users, whether it is a chat application that displays a person typing in real time or a distant application that plots data directly from a hardware sensor.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We try to fix these concerns with REST, but we run into a tricky problem: to get near-instant input, we must ping the server multiple times per minute, which can be tough to do architecturally and overload the server.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When utilizing solutions such as Firebase Realtime Database, you will notice that whenever a new record is added to the database, the Flutter application gets it as a <\/span><b>Stream<\/b><span style=\"font-weight: 400;\"> and displays the data to the user.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So how does Firebase accomplish this? In truth, frameworks like Firebase and others rely on a critical piece of technology called WebSockets.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this post, we&#8217;ll look at how we can employ our own WebSockets to build apps that provide real-time data to our consumers.<\/span><\/p>\n<h1><span class=\"ez-toc-section\" id=\"What-is-WebSocket-API\"><\/span><span style=\"font-weight: 400;\">What is WebSocket API?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p><span style=\"font-weight: 400;\">The WebSocket API, according to Mozilla, is &#8220;a sophisticated technology that allows for the establishment of a two-way interactive communication session between the user&#8217;s browser and a server&#8230; You may send messages to a server and obtain event-driven answers without polling the service.&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">WebSockets are made up of the following components:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A server that broadcasts data<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A <\/span><b>client <\/b><span style=\"font-weight: 400;\">in the application that is prepared to receive the new data stream<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A communication <\/span><b>channel<\/b><span style=\"font-weight: 400;\"> between the <\/span><b>client <\/b><span style=\"font-weight: 400;\">and the server.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Messages<\/b><span style=\"font-weight: 400;\"> transmitted back and forth between the <\/span><b>client <\/b><span style=\"font-weight: 400;\">and the server<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Unlike REST, we do not wait for a response from the server after sending a message to it with WebSockets. We can send a single message and receive hundreds of responses from the server.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In some ways, it&#8217;s similar to subscribing to notifications; we subscribe to a certain topic, such as the USD-EUR exchange rate, and then we receive a new message from the server each time the USD-EUR exchange rate changes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">WebSockets&#8217; real-time communication stream makes it the ideal solution for stock exchange apps, chat apps, IoT apps, and any other app that requires an incoming stream of data.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But how can we integrate Flutter? Let\u2019s explore this in the below section!\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Using-WebSockets-with-Flutter-in-Apps\"><\/span><span style=\"font-weight: 400;\">Using WebSockets with Flutter in Apps<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Thankfully, Dart, Flutter&#8217;s language, includes an out-of-the-box solution for dealing with WebSockets: <\/span><b>The WebSocket class.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">We can take use of <\/span><b>WebSocket<\/b><span style=\"font-weight: 400;\"> securely if we design apps for only one target (desktop, web, or mobile).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Nevertheless, if we choose to utilize our app on several platforms, we must keep in mind that the <\/span><b>WebSocket<\/b><span style=\"font-weight: 400;\"> class is dependent on dart:io and dart:html, which means we cannot build for both mobile and web at the same time.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Fortunately, the Dart team produced the<\/span><b> web_socket_channel<\/b><span style=\"font-weight: 400;\">, an official library that encapsulates the <\/span><b>dart:io <\/b><span style=\"font-weight: 400;\">and <\/span><b>dart:html<\/b><span style=\"font-weight: 400;\"> functionality and allows us to construct a multiplatform application with a single class.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We must take three easy actions to use the <\/span><b>web_spclet_channel<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Build a new <\/span><b>WebSocketChannel<\/b><span style=\"font-weight: 400;\"> client and <\/span><b>connect <\/b><span style=\"font-weight: 400;\">to a channel using the connect method.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">With the <\/span><b>stream<\/b><span style=\"font-weight: 400;\"> getter, you may listen in on incoming messages.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Send messages to the server using the <\/span><b>sink<\/b><span style=\"font-weight: 400;\"> getter.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Here are the steps for building real-time apps with Flutter and WebSockets.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Steps-to-build-a-real-time-app-using-Flutter-and-WebSocket\"><\/span><span style=\"font-weight: 400;\">Steps to build a real-time app using Flutter and WebSocket<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Flutter is a powerful and popular framework for building mobile and web applications. Real-time apps require real-time data synchronization, which can be achieved using WebSocket, a protocol for real-time communication between a client and a server.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here are the steps to build a real-time app with <\/span><a href=\"https:\/\/dianapps.com\/flutter-app-development\"><b>Flutter app development<\/b><\/a> <span style=\"font-weight: 400;\">and WebSocket:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Create a new Flutter project:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To create a new project using Flutter, follow the command mentioned below:<\/span><\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true\">flutter create my_realtime_app<\/pre>\n<p><span style=\"font-weight: 400;\">Add dependencies:\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Add the web_socket_channel package to the pubspec.yaml file. This package provides a high-level API for working with WebSocket.<\/span><\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true \">dependencies:\r\n\u00a0\u00a0flutter:\r\n\u00a0\u00a0\u00a0\u00a0sdk: flutter\r\n\u00a0\u00a0web_socket_channel: ^2.1.0<\/pre>\n<p><span style=\"font-weight: 400;\">Create a WebSocket connection:\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To create a WebSocket connection, use the WebSocketChannel.connect method, which returns a WebSocketChannel object. You can create the connection in the initState method of your widget:<\/span><\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true\">class MyRealtimeApp extends StatefulWidget {\r\n\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0_MyRealtimeAppState createState() =&gt; _MyRealtimeAppState();\r\n\r\n}\r\n\r\nclass _MyRealtimeAppState extends State&lt;MyRealtimeApp&gt; {\r\n\r\n\u00a0\u00a0WebSocketChannel channel;\r\n@override\r\n\u00a0\u00a0void initState() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0super.initState();\r\n\r\n\u00a0\u00a0\u00a0\u00a0channel = WebSocketChannel.connect(Uri.parse('ws:\/\/localhost:8080'));\r\n\u00a0\u00a0}\r\n\r\n@override\r\n\u00a0\u00a0Widget build(BuildContext context) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\/\/ ...\r\n\u00a0\u00a0}\r\n@override\r\n\u00a0\u00a0void dispose() {\r\n\u00a0\u00a0\u00a0\u00a0channel.sink.close();\r\n\u00a0\u00a0\u00a0\u00a0super.dispose();\r\n\u00a0\u00a0}\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">In this example, we create a WebSocket connection to ws:\/\/localhost:8080. You can replace this with the URL of your WebSocket server.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Send and receive messages:\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once you have a WebSocket connection, you can use the sink and stream properties of the WebSocketChannel object to send and receive messages.<\/span><\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true\">class _MyRealtimeAppState extends State&lt;MyRealtimeApp&gt; {\r\n\u00a0\u00a0WebSocketChannel channel;\r\n\u00a0\u00a0TextEditingController _controller = TextEditingController();\r\n\u00a0\u00a0@override\r\n\r\n\u00a0\u00a0void initState() {\r\n\u00a0\u00a0\u00a0\u00a0super.initState();\r\n\u00a0\u00a0\u00a0\u00a0channel = WebSocketChannel.connect(Uri.parse('ws:\/\/localhost:8080'));\r\n\u00a0\u00a0}\r\n\u00a0@override\r\n\r\n\u00a0\u00a0Widget build(BuildContext context) {\r\n\u00a0\u00a0\u00a0\u00a0return Scaffold(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0appBar: AppBar(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: Text('Realtime App'),\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body: Column(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0children: &lt;Widget&gt;[\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Form(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: TextFormField(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0controller: _controller,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0decoration: InputDecoration(labelText: 'Send a message'),\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0StreamBuilder(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0stream: channel.stream,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0builder: (context, snapshot) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (snapshot.hasData) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return Text(snapshot.data);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return Text('No data');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0floatingActionButton: FloatingActionButton(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onPressed: _sendMessage,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0tooltip: 'Send message',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Icon(Icons.send),\r\n\u00a0\u00a0\u00a0),\r\n\u00a0\u00a0\u00a0);\r\n\u00a0\u00a0}\r\nvoid _sendMessage() {\r\n\u00a0\u00a0\u00a0\u00a0if (_controller.text.isNotEmpty) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0channel.sink.add(_controller.text);\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0}\r\n\r\n@override\r\n\u00a0\u00a0void dispose() {\r\n\u00a0\u00a0\u00a0\u00a0channel.sink.close();\r\n\u00a0\u00a0\u00a0\u00a0super.dispose();\r\n\u00a0\u00a0}\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">In this example, we create a simple UI with a text input and a text view to display the received messages. We use the StreamBuilder widget to listen to incoming messages and update the UI accordingly.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The _sendMessage method sends the message entered in the text input to the WebSocket server.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Run the app:\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To run the app, use the following command:<\/span><\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true\">flutter run<\/pre>\n<p><span style=\"font-weight: 400;\">This will launch the app on an emulator or a connected device.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">After running a Flutter app using the command flutter run, the next step would be to test and interact with the app to verify that it is working as intended.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Test-the-app\"><\/span><strong>Test the app:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Here are some steps you can follow to test your app:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Check the app on the emulator or device:<\/b><span style=\"font-weight: 400;\"> Once the app is launched, check if it is working as expected on the emulator or device. Ensure that the UI is rendering correctly and that the app is responding to user inputs.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Check the console output: <\/b><span style=\"font-weight: 400;\">The console output can provide valuable information about any errors or warnings that the app encounters while running. Make sure to check the console output for any issues that need to be addressed.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Test edge cases:<\/b><span style=\"font-weight: 400;\"> Test the app with edge cases to ensure that it can handle unexpected inputs or scenarios. For example, if the app requires network connectivity, test it with and without network connectivity to ensure that it can handle both cases.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Verify real-time functionality:<\/b><span style=\"font-weight: 400;\"> If the app includes real-time functionality using WebSocket, verify that the data is being synchronized correctly between the client and server.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Test on multiple devices:<\/b><span style=\"font-weight: 400;\"> Test the app on different devices and screen sizes to ensure that the UI is responsive and renders correctly on different devices.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Test performance: <\/b><span style=\"font-weight: 400;\">Use Flutter&#8217;s profiling tools to test the performance of the app and identify any bottlenecks or performance issues.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Debug any issues: <\/b><span style=\"font-weight: 400;\">If any issues are identified during testing, use Flutter&#8217;s debugging tools to investigate and debug the issues.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Once you have tested and verified that the app is working as intended, the next step would be to deploy the app to the app stores or a hosting provider. And that\u2019s it! You have created your very own application with Flutter and WebScoket.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Wrapping-Up\"><\/span><span style=\"font-weight: 400;\">Wrapping Up:<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">There may be occasions when we need to provide real-time data to a user, and as we&#8217;ve seen, WebSockets can simplify the process in <\/span><a href=\"https:\/\/dianapps.com\/flutter-app-development\"><b>Flutter app development services<\/b><\/a><span style=\"font-weight: 400;\"> with just four simple steps:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Making a customer<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Adding the client to a channel<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Messages are being sent to the server.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Watching for new messages<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">This enables us to construct reactive apps in which our StreamBuilders widget changes based on the current state. Are we waiting for new information? Did we get an error or fresh information?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These inquiries can be converted into UI components, such as the animation that indicates someone is typing in a chat or altering the value of a graph on a page.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So here&#8217;s a question for you! Have you ever been required to show consumers real-time data in your applications? If so, what method did you employ? Firebase? WebSockets? <a href=\"https:\/\/www.redswitches.com\/dedicated-server-hosting\/\" target=\"_blank\" rel=\"noopener\">dedicated Server<\/a>-side gRPC Stream?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We eagerly await your response!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mobile app development nowadays requires real-time data to offer rapid responses to users, whether it is a chat application that displays a person typing in real time or a distant application that plots data directly from a hardware sensor. We try to fix these concerns with REST, but we run into a tricky problem: to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6006,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_wp_applaud_exclude":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-5992","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development"],"featured_image_src":{"landsacpe":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/04\/Untitled-design-50-1140x445.png",1140,445,true],"list":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/04\/Untitled-design-50-463x348.png",463,348,true],"medium":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/04\/Untitled-design-50-300x169.png",300,169,true],"full":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/04\/Untitled-design-50.png",1536,864,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Building Real-Time Apps with Flutter and WebSocket<\/title>\n<meta name=\"description\" content=\"Want to build a real-time app with Flutter And WebSocket? Look no further! This blog covers everything you need.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dianapps.com\/blog\/building-real-time-apps-with-flutter-and-websocket\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building Real-Time Apps with Flutter and WebSocket\" \/>\n<meta property=\"og:description\" content=\"Want to build a real-time app with Flutter And WebSocket? Look no further! This blog covers everything you need.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dianapps.com\/blog\/building-real-time-apps-with-flutter-and-websocket\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn About Digital Transformation &amp; Development | DianApps Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-12T05:27:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-27T09:59:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/04\/Untitled-design-50.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"864\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vikash Soni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vikash Soni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building Real-Time Apps with Flutter and WebSocket","description":"Want to build a real-time app with Flutter And WebSocket? Look no further! This blog covers everything you need.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dianapps.com\/blog\/building-real-time-apps-with-flutter-and-websocket\/","og_locale":"en_US","og_type":"article","og_title":"Building Real-Time Apps with Flutter and WebSocket","og_description":"Want to build a real-time app with Flutter And WebSocket? Look no further! This blog covers everything you need.","og_url":"https:\/\/dianapps.com\/blog\/building-real-time-apps-with-flutter-and-websocket\/","og_site_name":"Learn About Digital Transformation &amp; Development | DianApps Blog","article_published_time":"2023-04-12T05:27:36+00:00","article_modified_time":"2023-06-27T09:59:34+00:00","og_image":[{"width":1536,"height":864,"url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/04\/Untitled-design-50.png","type":"image\/png"}],"author":"Vikash Soni","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vikash Soni","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dianapps.com\/blog\/building-real-time-apps-with-flutter-and-websocket\/","url":"https:\/\/dianapps.com\/blog\/building-real-time-apps-with-flutter-and-websocket\/","name":"Building Real-Time Apps with Flutter and WebSocket","isPartOf":{"@id":"https:\/\/dianapps.com\/blog\/#website"},"datePublished":"2023-04-12T05:27:36+00:00","dateModified":"2023-06-27T09:59:34+00:00","author":{"@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f"},"description":"Want to build a real-time app with Flutter And WebSocket? Look no further! This blog covers everything you need.","breadcrumb":{"@id":"https:\/\/dianapps.com\/blog\/building-real-time-apps-with-flutter-and-websocket\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dianapps.com\/blog\/building-real-time-apps-with-flutter-and-websocket\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dianapps.com\/blog\/building-real-time-apps-with-flutter-and-websocket\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dianapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building Real-Time Apps With Flutter And WebSocket"}]},{"@type":"WebSite","@id":"https:\/\/dianapps.com\/blog\/#website","url":"https:\/\/dianapps.com\/blog\/","name":"Learn About Digital Transformation &amp; Development | DianApps Blog","description":"Dianapps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dianapps.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f","name":"Vikash Soni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","contentUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","caption":"Vikash Soni"},"description":"Vikash Soni, the visionary CEO and Co-founder of DianApps. With his profound expertise in Android and iOS app development, he leads the team to deliver top-notch solutions to clients worldwide. Under his guidance, the company has achieved remarkable success, earning a reputation as a leading web and mobile app development company.","sameAs":["https:\/\/www.linkedin.com\/in\/vikash-soni-59726530\/"],"url":"https:\/\/dianapps.com\/blog\/author\/infodianapps-com\/"}]}},"_links":{"self":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/5992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/comments?post=5992"}],"version-history":[{"count":8,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/5992\/revisions"}],"predecessor-version":[{"id":6531,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/5992\/revisions\/6531"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media\/6006"}],"wp:attachment":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media?parent=5992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/categories?post=5992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/tags?post=5992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}