**Create a Real-Time Chat Application using WebSockets and Flutter (Lab Topic)** **Objective:** In this lab topic, you will learn how to create a real-time chat application using WebSockets and Flutter. You will understand the basics of WebSockets, how to establish a WebSocket connection, and how to send and receive messages in real-time. **Prerequisites:** - Familiarity with Flutter and its ecosystem - Understanding of basic Dart programming language - Completion of previous lab topics (Real-Time Applications and WebSocket Integration) **Materials:** - Flutter SDK (latest version) - Flutter Web support (latest version) - WebSocket library for Flutter (latest version) - A code editor or IDE of your choice **Step 1: Setting up the Project** 1. Create a new Flutter project using the command `flutter create chat_app`. 2. Open the `pubspec.yaml` file and add the following dependencies: ```yaml dependencies: flutter: sdk: flutter web_socket_channel: ^3.0.0 ``` 3. Run `flutter pub get` to get the dependencies. **Step 2: Understanding WebSockets** 1. Go to the official WebSocket documentation: <https://www.w3.org/TR/websockets/> 2. Read about the WebSocket protocol and its benefits. 3. Understand the concept of a WebSocket connection and how it works. **Step 3: Establishing a WebSocket Connection** 1. Create a new file called `websocket_connection.dart` and add the following code: ```dart import 'package:web_socket_channel/web_socket_channel.dart'; class WebSocketConnection { WebSocketChannel _channel; WebSocketConnection(String url) { _channel = WebSocketChannel.connect(url); } Future<void> send(String message) async { await _channel.sink.add(message); } Future<String> receive() async { return await _channel.sink.listen((message) => message); } } ``` 2. Use the `WebSocketConnection` class to establish a connection to a WebSocket server. **Step 4: Creating the Chat Application** 1. Create a new file called `chat_screen.dart` and add the following code: ```dart import 'package:flutter/material.dart'; import 'package:web_socket_channel/web_socket_channel.dart'; import 'websocket_connection.dart'; class ChatScreen extends StatefulWidget { @override _ChatScreenState createState() => _ChatScreenState(); } class _ChatScreenState extends State<ChatScreen> { final _textController = TextEditingController(); final _channel = WebSocketConnection('ws://localhost:8080'); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Chat Application'), ), body: Padding( padding: const EdgeInsets.all(16.0), child: Column( children: [ TextField( controller: _textController, decoration: InputDecoration( labelText: 'Type a message', border: OutlineInputBorder(), ), ), SizedBox(height: 16), ElevatedButton( onPressed: () { _channel.send(_textController.text); _textController.clear(); }, child: Text('Send'), ), SizedBox(height: 16), Expanded( child: FutureBuilder( future: _channel.receive(), builder: (context, snapshot) { if (snapshot.hasData) { return Text(snapshot.data); } else { return Center(child: CircularProgressIndicator()); } }, ), ), ], ), ), ); } } ``` 2. Run the application on a physical device or emulator. **Step 5: Testing the Application** 1. Open two instances of the chat application. 2. Type a message in one instance and press the "Send" button. 3. The message should appear in the other instance in real-time. **Key Concepts:** - WebSockets: a bi-directional communication protocol between a client and a server. - WebSocket connection: a persistent connection between a client and a server. - Send and receive messages: using the `send` and `receive` methods of the `WebSocketConnection` class. **Practical Takeaways:** - Use WebSockets to establish a real-time connection between a client and a server. - Use the `WebSocketConnection` class to send and receive messages. - Create a chat application using WebSockets and Flutter. **Leave a comment or ask for help if you have any questions or need further clarification on any of the steps.**