Простой websocket-чат на Dart

Здравствуйте!

В этой статье я хочу описать создание простого websocket-чата на Dart с целью показать, как работать с вебсокетами в Dart. Код приложения доступен на github, а пример его работы можно посмотреть здесь: http://simplechat.rudart.in.

Приложение будет состоять из двух частей: сервера и клиента. Серверную часть мы разберем очень подробно, а из клиентской рассмотрим только то, что отвечает за работу с соединением.

Требования к приложению очень простые — отправка сообщений от пользователя всем или только выбранным участникам чата.

Настройки приложения

Все настройки приложения и константы будут храниться в файле common/lib/common.dart. В этом файле находится определение библиотеки simplechat.common.

library simplechat.common;  const String ADDRESS = 'simplechat.rudart.in'; const int PORT = 9224;  const String SYSTEM_CLIENT = 'Simple Chat'; 

Сам файл мы будем подключать как пакет, т.к. если будем использовать относительные пути, то при сборке приложения (pub build) мы можем получить ошибку от pub: Exception: Cannot read {file} because it is outside of the build environment.

Для того, чтобы подключить пакет, находящийся где-то на нашей машине, мы будем использовать pub path dependency. Для этого мы просто допишем в секцию dependencies файла pubspec.yaml определение нашего пакета:

dependencies:   simplechat.common:     path: ./common 

Все содержимое файла pubspec.yaml я приводить не буду (но его можно посмотреть на github). Также нужно будет добавить файл pubspec.yaml в директорию common в котором просто укажем имя нашего пакета:

name: simplechat.common

Сервер

Файлы сервера располагаются в папке bin. В файле main.dart находится точка входа в сервер, а в файле server.dart — класс нашего сервера. Начнем с рассмотрения содержимого файла main.dart.

Общая схема работы сервера

Давайте поговорим о том, как вообще будет работать наш сервер. Первое, что мы будем делать с сервером — это запускать его. Во время запуска он начнет слушать порт 9224.

Когда новый пользователь отправит запрос на этот порт, то сервер откроет для него websocket-соединение, сгенерирует имя и сохранит имя и соединение в хэш с открытыми соединениями. После этого клиент сможет отправлять сообщения по этому соединению. Сервер сможет передавать эти сообщения другим пользователям, а также отправлять уведомления о подключении и отключении клиентов.

Если пользователь закроет соединение, то сервер удалит его из хэша с активными соединениями.

Точка входа в сервер

В самом начале файла bin/main.dart мы определим, что это библиотека simplechat.bin. Для работы сервера нам понадобится подключить библиотеки dart:async, dart:convert, dart:io, пакет route (его ставим через pub) и файл с настройками приложения. Также в bin/main.dart мы подключаем файл bin/server.dart, который содержит основной код нашего сервера (рассмотрим его чуть позже).

В функции main() мы создаем экземпляр сервера и запускаем его.

 library simplechat.bin;  import 'dart:async'; import 'dart:convert'; import 'dart:io'; import 'package:route/server.dart' show Router; import 'package:simplechat.common/common.dart';  part 'server.dart';  /**  * Entry point  */ main() {   Server server = new Server(ADDRESS, PORT);   server.bind(); } 

Базовый класс сервера, прослушка порта

Ниже приведен базовый код сервера, который будет просто привязываться на нужный порт.

 part of simplechat.bin;  /**  * Class [Server] implement simple chat server  */ class Server {   /**    * Server bing port    */   int port;    /**    * Server address    */   var address;    /**    * Current server    */   HttpServer _server;    /**    * Router    */   Router _router;    /**    * Active connections    */   Map<String, WebSocket> connections = new Map<String, WebSocket>();    int generalCount = 1;    /**    * Server constructor    * param [address]    * param [port]    */   Server([     this.address = '127.0.0.1',      this.port = 9224   ]);    /**    * Bind the server    */   bind() {     HttpServer.bind(address, port).then(connectServer);   }    /**    * Callback when server is ready    */   connectServer(server) {     print('Chat server is running on "$address:$port"');      _server = server;     bindRouter();   } } 

В конце функции connectServer() вызывается функция для настройки роутера — bindRouter(), которую мы рассмотрим ниже.

Настройка роутера и создание websocket-соединения

Для настройки роутера создадим функцию bindRouter(). Входящий поток на / мы будем изменять с помощью WebSocketTransformer и прослушивать в функции createWs().

 /**  * Bind routes  */ bindRouter() {   _router = new Router(_server);    _router.serve('/')     .transform(new WebSocketTransformer())     .listen(this.createWs); }  createWs(WebSocket webSocket) {   String connectionName = 'user_$generalCount';   ++generalCount;    connections.putIfAbsent(connectionName, () => webSocket); } 

В функции createWs() мы генерируем имя для соединения по схеме user_{counter} и сохраняем это соединение в connections.

Структура сообщения от сервера и функция создания сообщения

Сервер отправляет сообщения в виде объекта Map (а точнее его представления в json) со следующими ключами:

• from — от кого сообщение;
• message — текст сообщения;
• online — количество пользователей онлайн.

Вот функция, которая строит такое сообщение:

 /**  * Build message  */ String buildMessage(String from, String message) {   Map<String, String> data = {     'from': from,     'message': message,     'online': connections.length   };    return JSON.encode(data); } 

Отправка сообщений с сервера

Для того, чтобы отправить сообщение клиенту, нужно воспользоваться методом add() класса WebSocket. Ниже приведена функция, которая будет отправлять сообщения пользователю:

 /**  * Sending message  */ void send(String to, String message) {   connections[to].add(message); } 

Наш сервер может отправлять уведомления всем активным клиентам о подключении или отключении пользователя. Давайте рассмотрим функцию для этого. Функция notifyAbout(String connectionName, String message) принимает имя соединения и сообщение (о подключении или отключении). Эта функция уведомляет всех активных клиентов кроме того, о ком делается это уведомление. Т.е. если к нам присоединился пользователь user_3, то уведомление получат все пользователи, кроме него. Для того, чтобы отфильтровать клиентов по определенному условию (в нашем случае нам нужно получить имена всех клиентов, которые не совпадают с текущим) мы воспользуемся методом where() абстрактного класса Iterable.

 /**  * Notify users  */ notifyAbout(String connectionName, String message) {   String jdata = buildMessage(SYSTEM_CLIENT, message);    connections.keys     .where((String name) => name != connectionName)     .forEach((String name) {       send(name, jdata);     }); } 

Также, после присоединения нового пользователя мы поприветствуем его:

 /**  * Sending welcome message to new client  */ void sendWelcome(String connectionName) {   String jdata = buildMessage(SYSTEM_CLIENT, 'Welcome to chat!');    send(connectionName, jdata); } 

Давайте теперь посмотрим функцию, которая обрабатывает входящие сообщения от пользователя и отправляет их всем (или только указанным) участникам чата. Функция sendMessage(String from, String message) принимает имя отправителя и его сообщение. Если теле сообщения (message) указать имена получателей по маске @{user_name}, то сообщение будет доставлено только им. Давайте посмотрим на код функции sendMessage:

 /**  * Sending message to clients  */ sendMessage(String from, String message) {   String jdata = buildMessage(from, message);    // search users that the message is intended   RegExp usersReg = new RegExp(r"@([\w|\d]+)");   Iterable<Match> users = usersReg.allMatches(message);    // if users found - send message only them   if (users.isNotEmpty) {     users.forEach((Match match) {       String user = match.group(0).replaceFirst('@', '');       if (connections.containsKey(user)) {         send(user, jdata);       }     });     send(from, jdata);   } else {     connections.forEach((username, conn) {       conn.add(jdata);     });   } } 

Когда пользователь закроет соединение, то мы должны удалить его из списка активных соединений. Функция closeConnection(String connectionName) принимает имя соединения, которое было закрыто и удаляет его из списка соединений:

 /**  * Close user connections  */ closeConnection(String connectionName) {   if (connections.containsKey(connectionName)) {     connections.remove(connectionName);   } } 

Добавляем возможности к слушателю соединения

Подытожим все, что мы сейчас имеем. Функция createWs занимается прослушкой соединения пользователя. send — отправляет сообщение указанному пользователю. sendWelcome — отправляет сообщение с приветствием новому пользователю. notifyAbout — уведомляет участников чата (кроме инициатора) о каких-либо действиях инициатора (подключение/отключение). sendMessage — отправляет сообщение всем или только указанным пользователям.

Давайте теперь изменим функцию createWs так, чтобы мы могли использовать все это. В предыдущий раз мы остановились на том, что добавили соединение в список. После этого нам необходимо уведомить всех остальных участников чата о новом пользователе, а новому пользователю отправить сообщение с приветствием.

Затем нам нужно будет прослушивать websocket-соединение пользователя на сообщения от него и отправлять сообщения участникам. Также мы добавим обработчик на закрытие websocket-соединения, в котором удалим его из списка и уведомим об отключении всех участников.

 createWs(WebSocket webSocket) {   String connectionName = 'user_$generalCount';   ++generalCount;    connections.putIfAbsent(connectionName, () => webSocket);   // Уведомим всех о новом подключении   notifyAbout(connectionName, '$connectionName joined the chat');   // Отправим новому пользователю приветствие   sendWelcome(connectionName);    webSocket     .map((string) => JSON.decode(string))     .listen((json) {       sendMessage(connectionName, json['message']);     }).onDone(() {       closeConnection(connectionName);       notifyAbout(connectionName, '$connectionName logs out chat');     }); } 

Вот и все, простой сервер готов. Теперь перейдем к клиентской части.

Клиент

Здесь я не стану рассказывать о верстке клиентской части и об отображении сообщений. В этой части мы поговорим только о том, как мы открываем websocket-соединение с сервером, посылаем и принимаем сообщения.

Точка входа в клиентское приложение

Точка входа в клиентское приложение находится в файле web/dart/index.dart. Давайте посмотрим на его содержимое:

 library simplechat.client;  import 'dart:html'; import 'dart:convert'; import 'package:simplechat.common/common.dart';  part './views/message_view.dart'; part './controllers/web_socket_controller.dart';  main() {   WebSocketController wsc = new WebSocketController('ws://$ADDRESS:$PORT', '#messages', '#userText .text', '#online');    } 

В первой строке мы объявляем библиотеку. Затем подключаем необходимые файлы и части библиотек. В файле ./views/message_view.dart находится определение класса MessageView, который занимается отображением сообщений. Его мы рассматривать не будем (код можно посмотреть на github). В файле ./controllers/web_socket_controller.dart находится определение класса WebSocketController, на котором мы остановимся более подробно.

В функции main() посто создается экземпляр этого контроллера.

WebSocketController — конструктор класса и создание соединения

Давайте взглянем на свойства и конструктор класса WebSocketController:

 class WebSocketController {     WebSocket ws;   HtmlElement output;   TextAreaElement userInput;   DivElement online;    WebSocketController(String connectTo, String outputSelector, String inputSelector, String onlineSelector) {     output = querySelector(outputSelector);     userInput = querySelector(inputSelector);     online = querySelector(onlineSelector);      ws = new WebSocket(connectTo);      ws.onOpen.listen((e){       showMessage('Сonnection is established', SYSTEM_CLIENT);       bindSending();     });      ws.onClose.listen((e) {       showMessage('Connection closed', SYSTEM_CLIENT);     });      ws.onMessage.listen((MessageEvent e) {       processMessage(e.data);     });      ws.onError.listen((e) {       showMessage('Connection error', SYSTEM_CLIENT);     });   }    // ... } 

Из кода видно, что WebSocketController имеет следующие свойства:

• WebSocket ws — здесь мы храним наше websocket-соединение;
• HtmlElement output — элемент, в который будем выводить сообщения;
• TextAreaElement userInput — текстовая область, в которую пользователь вводит сообщения;
• DivElement online — элемент, в который выводится количество активных пользователей.

Конструктор класса принимает адрес, по которому можно открыть websocket-соединение, селекторы для элементов output, userInput и online. В самом начале он находит элементы в дереве. Затем создается websocket-соединение с сервером с помощью конструктора WebSocket:

ws = new WebSocket(connectTo);

Затем мы назначаем обработчики событий для нашего соединения.

Событие onOpen срабатывает тогда, когда соединение успешно установлено. Его обработчик показывает сообщение о том, что соединение установлено и ставит слушателя событий нажатия клавиш на элементе ввода сообщений так, чтобы при нажатии на Enter происходила отправка сообщения. Вот код функции bindSending():

 bindSending() {   userInput.onKeyUp.listen((KeyboardEvent key) {     if (key.keyCode == 13) {       key.stopPropagation();       sendMessage(userInput.value);       userInput.value = '';           }   });  } 

В теле обработчика события keyUp можно заметить вызов функции sendMessage(String message), которая занимается отправкой сообщения. Отправка сообщения по websocket-соединению просходит с помощью метода send() класса WebSocket. Вот код этой функции:

 sendMessage(String message) {   Map data = {     'message': message   };      String jdata = JSON.encode(data);   ws.send(jdata); } 

Событие onClose срабатывает тогда, когда соединение закрывается. Обработчик этого события просто отображает сообщение о том, что соединение сброшено.

Событие onMessage срабатывает при получении сообщения от сервера. Слушателю передается объект MessageEvent. Обработчик этого события передает данные, поступившие от сервера в функцию processMessage, которая просто отображает сообщение. Вот ее код:

 processMessage(String message) {   var data = JSON.decode(message);    showOnline(data['online']);   showMessage(data['message'], data['from']); } 

Я не стану приводить код функций showOnline и showMessage, т.к. в них ничего особо интересного не происходит. Но если вам интересно их содержание, то вы всегда можете найти полный код контроллера на github.

Вот и все. Это весь основной функционал клиентской части.

Вы можете посмотреть работающее приложение здесь: http://simplechat.rudart.in.

Если я допустил какие-нибудь ошибки и неточности, то сообщайте, а я постараюсь все быстро поправить.