In Part 2 we refactored our solution by splitting the Sign in and Chat room logic into View
classes, building a Router
object to transition between the screens. We will complete the full flow here by implementing our WebSocket connection and managing each of the chatters in our Chat room. At the end of this tutorial we will have a functioning chat application.
1. Create a WebSocket object
In order for messages to be relayed from one user and broadcasted to the others, we need to establish a persistent, bi-directional connection to our server. This will allow messages to be sent back and forth between the server and client using an event-based architecture. This is made possible via the WebSocket protocol, which the dart:io and dart:html library provides classes for. So no external packages needed!
Let's begin on the client by writing a class to be responsible for instantiating a WebSocket
object and implementing various event listeners on them. This class will represent a user's connection to our Chat room server.
Build a Chat room subject
Create a chat_room_subject.dart
file inside the directory lib/src
and implement the class for our ChatRoomSubject
:
// lib/src/chat_room_subject.dart
import 'dart:html';
class ChatRoomSubject {
ChatRoomSubject(String username) {}
final WebSocket socket;
}
Because we've marked our socket
instance variable as final, it requires that we assign a value to it in the initialize phase, that is, before the {}
part of our constructor is run. Let's therefore create our WebSocket
instance and pass the URL to our server:
ChatRoomSubject(String username)
: socket = WebSocket('ws://localhost:9780/ws?username=$username') {}
When our WebSocket
class is instantiated, a connection will be established to the URL passed in as it's String
argument. We've also passed in the username value as part of the query string of the WebSocket
URL.
We are now able to listen for several events on our WebSocket
namely open, message, error and close.
// ..
class ChatRoomSubject {
// ..
// ..
_initListeners() {
socket.onOpen.listen((evt) {
print('Socket is open');
});
// Please note: "message" event will be implemented elsewhere
socket.onError.listen((evt) {
print('Problems with socket. ${evt}');
});
socket.onClose.listen((evt) {
print('Socket is closed');
});
}
}
And we need to invoke the _initListeners()
method:
ChatRoomSubject(String username)
: socket = WebSocket('ws://localhost:9780/ws?username=$username') {
_initListeners(); // <-- Added this line
}
We need to be able to send messages to our Chat room server and close a WebSocket connection, effectively leaving the Chat room. Add these methods to our ChatRoomSubject
class before _initListeners()
:
send(String data) => socket.send(data);
close() => socket.close();
Integrate ChatRoomSubject
into the ChatRoomView
class
Import the dart file we've just created from web/views/chat_room.dart directly after our // Absolute imports
(dart_bulma_chat_app
is a reference to the name value field inside your pubspec.yaml file, which points to the lib/
directory):
// web/views/chat_room.dart
// Absolute imports
import 'dart:html';
import 'dart:convert';
// Package imports
import 'package:dart_bulma_chat_app/src/chat_room_subject.dart'; // <-- Added this line
And then we will instantiate this class as follows:
// ..
// ..
class ChatRoomView implements View {
ChatRoomView(this.params)
: _contents = DocumentFragment(),
_subject = ChatRoomSubject(params['username']) // <-- Added this line
{
onEnter();
}
/// Properties
final ChatRoomSubject _subject;
// ..
// ..
}
If you look at the _initListeners()
method in ChatRoomSubject
you should notice that we didn't implement the listener for the WebSocket "message" event. We will do that in ChatRoomView
since we have access to the WebSocket
instance:
// ..
// ..
class ChatRoomView implements View {
// ..
// ..
void _addEventListeners() {
// ..
// ..
_subject.socket.onMessage.listen(_subjectMessageHandler);
}
void _subjectMessageHandler(evt) {
chatRoomLog.appendHtml(evt.data + '<br />');
}
}
Lastly, let's amend _sendBtnClickHandler(e)
to send messages from the input field to the Chat server, empty the message input field value and reset it's focus:
void _sendBtnClickHandler(e) {
_subject.send(messageField.value);
// Resets value and re-focuses on input field
messageField
..value = ''
..focus();
}
2. Upgrade incoming requests to WebSocket connections
To get a basic example working, let's write some server-side logic to maintain our chat room session.
Create lib/src/chat_room_session.dart
and implement the class for our ChatRoomSession
:
import 'dart:io';
import 'dart:convert';
class Chatter {
Chatter({this.session, this.socket, this.name});
HttpSession session;
WebSocket socket;
String name;
}
class ChatRoomSession {
final List<Chatter> _chatters = [];
// TODO: Implement addChatter method
// TODO: Implement removeChatter method
// TODO: Implement notifyChatters method
}
Here we have two different classes. The Chatter
class represents each participant. This participant contains its current session, WebSocket connection and name. The ChatRoomSession
class manages our list of participants, including facilitating communication between them.
Here's the implementation of the addChatter()
method. This upgrades the incoming request to a WebSocket connection, builds a Chatter
object, creates event listeners and adds it to the _chatters
list:
class ChatRoomSession {
final List<Chatter> _chatters = [];
addChatter(HttpRequest request, String username) async {
// Upgrade request to `WebSocket` connection and add to `Chatter` object
WebSocket ws = await WebSocketTransformer.upgrade(request);
Chatter chatter = Chatter(
session: request.session,
socket: ws,
name: username,
);
// Listen for incoming messages, handle errors and close events
chatter.socket.listen(
(data) => _handleMessage(chatter, data),
onError: (err) => print('Error with socket ${err.message}'),
onDone: () => _removeChatter(chatter),
);
_chatters.add(chatter);
print('[ADDED CHATTER]: ${chatter.name}');
}
// TODO: Implement _handleMessage method
_handleMessage(Chatter chatter, String data) {}
}
When messages are sent to the server via the connection, we handle this by invoking _handleMessage()
while passing it the Chatter
object and data
as arguments.
Let's cross out that // TODO:
by implementing _handleMessage()
:
_handleMessage(Chatter chatter, String data) {
chatter.socket.add('You said: $data');
_notifyChatters(chatter, data);
}
And let's implement _notifyChatters()
:
_notifyChatters(Chatter exclude, [String message]) {
_chatters
.where((chatter) => chatter.name != exclude.name)
.toList()
.forEach((chatter) => chatter.socket.add(message));
}
And also removing the Chatter
object when a participant leaves:
_removeChatter(Chatter chatter) {
print('[REMOVING CHATTER]: ${chatter.name}');
_chatters.removeWhere((c) => c.name == chatter.name);
_notifyChatters(chatter, '${chatter.name} has left the chat.');
}
Instantiate our ChatRoomSession
class
Go to bin/server.dart
and create our instance:
import 'dart:io';
import 'dart:convert';
import 'package:dart_bulma_chat_app/src/chat_room_session.dart'; // <-- Added this line
main() async {
// TODO: Get port from environment variable
var port = 9780;
var server = await HttpServer.bind(InternetAddress.loopbackIPv4, port);
var chatRoomSession = ChatRoomSession(); // <-- Added this line
// ..
// ..
}
Scroll down to the case '/ws':
section and call the addChatter()
method, passing it the request and username:
// ..
// ..
case '/ws':
String username = request.uri.queryParameters['username'];
chatRoomSession.addChatter(request, username);
break;
// ..
// ..
So we retrieve the username from the query parameters when we passed ?username=$username
into the URL we defined for our WebSocket
instance inside ChatRoomSubject
.
Let us test what we have now. Open a terminal session and instantiate the server:
dart bin/server.dart
And run the web app on another terminal session:
webdev serve --live-reload
Following this fully should give you the image result below:
If you’ve got this far then great job!!!
3. Implement some helper functions
We need a way of categorising the types of messages sent to our Chat server and respond to it accordingly. When a participant joins the chat, it would be great to send a notification welcoming this new participant and notifying the other participants on the new chatter. We will create an enum type which will contain the particular types of messages this Chat app will have.
Follow the full tutorial which includes tidying up the look and feel of the chat messages and implementing the logout functionality.
→ Read the full tutorial on my blog
Sharing is caring 🤗
If you enjoyed reading this post, please share this through the various social channels. I'm looking for some Patrons to keep these detailed articles coming. Become a Patron today...it will really make my day. Alternatively, you could buy me a coffee instead.
Watch my Free Get started with Dart course on Egghead.io and Subscribe to my email newsletter to download my Free 35-page Get started with Dart eBook and to be notified when new content is released.
Like, share and follow me 😍 for more content on Dart.
Top comments (0)