Как сделать приложение чата на flutter сокетах

Realtime Chat App — One-to-One using Flutter, Socket.io & Node.js

In my previous blog on real-time chat I discussed about how to get started with socket.io and setup a simple chat app in which one can chat with all the people online. You can read it here. In this article I will be discussing about making a chat app in which you can chat one to one with someone.

What will you learn?

Using socket.io to create a real-time connection between two devices
The concept of rooms and how to use them with socket.io
A bit of scoped model library ��

Prerequisites

The following should be installed and running in your PC.

Node.js : https://nodejs.org/en/download/
Flutter : https://flutter.dev/docs/get-started/install
Heroku CLI : https://devcenter.heroku.com/articles/heroku-cli
git : https://git-scm.com/downloads

Rooms

Rooms are logical grouping mechanism which can be used to target only a specific socket and not all of them.

Lets understand it in simple figures :

Previously one user was sending a message and the server broadcasted it to all the other users.

After using rooms the server only sends the message to the particular room.

This way we can achieve one to one chat using rooms. So let’s get started.

Node.js (Server-Side)

Create a new node project and install the following dependencies:

express
http
nodemon
socket.io

Go to package.json and add the dev script:

Next in the index.js file add the following code:

Every user connected to our server has a particular chatID and that user joins the room with the same chatID. Thus if anyone wants to send message to a particular user he targets their chatID.

Now that our server side code is completed lets deploy it to Heroku.

Create a new file in the root directory named Procfile and add the following line

Next create a file named .gitignore and add the following line

After this initialize git and commit all the contents. Next create a new heroku app and push the contents to the master branch. If you face any issues, you can refer to my previous blog or the heroku documentation. After successful deployment we will get the url of our node server.

Flutter (Client-Side)

Now that our backend is up and running, its time to create the flutter app. Create a new flutter project and add the following dependencies in pubspec.yaml file :

scoped_model: ^1.0.1
flutter_socket_io: ^0.6.0

Let’s create our two data classes Message.dart and User.dart.

Next create the ChatModel.dart where all the logic for socket and all the data will be stored.

The ChatModel class contains dummy data of all the users, the current user and the friend list of that user (which is all the users except the current user). It also contains all the messages. There are there methods in it.

init() : For initializing all the variables and also initializing the socket and adding listeners to the socket.
sendMessage() : Sending message to the server and adding it to the list of messages.
getMessagesForChatID(): Extracting the messages from the message list which are relevant to the current conversation.

Next let’s create AllChatsPage.dart. This will be the page where all the users will be displayed.

The init() in the ChatModel is called from the initState() of AllChatsPage, thus initializing our app on start.

Flutter + Socket.io — Обмен информацией в режиме реального времени

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

Представьте себе трубу, по которой вода (данные) может течь в обе стороны.

Преимущества WebSocket над HTTPS

WebSocket имеет множество преимуществ над привычным HTTPS, в зависимости от архитектуры вашего проекта, WebSocket обычно быстрее в обмене информацией.

В отличии от принципа запрос-ответ, как в HTTP, WebSocket предлагает обмен информации в реальном времени с двунаправленной системой передачи данных, в которой нет необходимости отправлять запросы для получения ответов.

Благодаря такому методу мгновенной коммуникации разработчики могут предоставлять пользователям возможность получения уведомлений, оповещений, а также обмен сообщениями и использование других сервисов.

Создание Node сервера

Нам предстоит поработать над двумя приложениями: сервером на Node.js и, собственно, Flutter-приложением. В сущности, наш сервер будет эхо-сервер, который получает данные и отправляет их всем, кто слушает (другими словами — тем, кто подписан на получение этих данных). Условно, сервер является мостом между клиентами.

В роли клиента будет выступать Flutter приложение, которое будет использовать WebSocket для получения информации. Чтобы установить сервер нужно:

Создать папку с именем проекта, например socket_chat_server

Создать файл package.json в этой папке

Переключиться в текущую папку, если еще не сделали это

Запустить команду npm init и завершить установку

Измените файл package.json , чтобы добавить нужные нам две зависимости:

package.json

Затем установим npm модули с помощью команды npm install .

index.js

Последним шагом будет написание логики сервера, как в примере:

Здесь все очень просто, запускается соединение, затем идет прослушивание данных через client.on , передача события для прослушивания, к примеру «сообщение», и отправка информации назад всем, кто подключен к серверу. Ваш WebSocket должен быть запущен на http://localhost:3000 .

С помощью команды npm start можно протестировать сервер. Вывод должен быть таким:

Создание приложения Flutter

Flutter приложение будет выступать как клиент, которые получает сообщения от сервера и отправляет их к нему. Создайте новый проект с помощью команды flutter create socket_chat . На pub.dev есть несколько socket.io пакетов, но, как мне кажется, socket_io_client будет проще для понимания, так как является копией js библиотеки:

Обратите внимание

При подключении к localhost на Android эмуляторе может потребоваться немного больше настроек. Команда adb reverse tcp:3000 tcp:3000 разрешает подключаться к localhost через http://127.0.0.1:3000 на Android (а без команды можно подключится к localhost с Android эмулятора посредством подключения к адресу http://10.0.2.2:3000 . прим. переводчика) . После удаления стандартного приложения-счетчика приступим к написанию home.dart .

home.dart

Пример выше — простая реализация WebSocket, в которой есть функции прослушивания и отправления событий к серверу.

Настройка CI/CD для тестирования

Возможно, во время разработки вам потребуется использование различных WebSocket для разных версий приложения(Test, Dev, или Prod). Хорошей практикой считается вынесение секретных участков кода(к примеру, URL-адрес хоста) в зашифрованную CI/CD сборку.

Кроме того, использование CI/CD стало нормой для хороших тестируемых и масштабируемых мобильных приложений, и поэтому важно и рекомендуется всегда поддерживать наличие оного для ваших Flutter пактов, Flutter приложений и тому подобного.

Существует множество способов интеграции среды CI/CD в Codemagic. Я хотел бы пойти более интересным, но сложным путем и объяснить, как создать среды dev и prod с помощью простого старого .yaml файла и загрузить его на свой Codemagic.io проект в кратчайшие сроки.

Да, я знаю, что есть UI, но иногда вам нужно протестировать поток CI/CD, не прерывая существующие, или создать новый поток с графическим интерфейсом. Итак, вот быстрый, но простой способ сделать это:

Настройки и Среды

Мы будем создавать нашу структуру CI/CD и среды таким образом, чтобы мы могли использовать как динамические значения из Codemagic, так и фиксированные значения среды из наших настроек.

Структура проста, у нас есть наш ненастроенный JSON файл config/appconfig.json , в нем будут размещены наши URL-адреса хостов для разработки и готовой сборки. Вам также нужно будет установить его следующим образом.

Код в lib/config/config_loader.dart управляет загрузкой данных из нашего JSON файла (config/appconfig.json) .

env.dart и env_config.dart управляют созданием наших различных сред для использования в _dev.dart и _prod.dart .

Для большинства Flutter приложений main.dart является входной точкой. Но для нас, чтобы наша задумка работала, нужно создать файлы main_common.dart , main_dev.dart и main_prod.dart . Как следует из названия, main_common.dart будет мостом, связывающим с предпочитаемой средой. Теперь для запуска кода нужно будет указывать настройки, с которыми мы хотим запустить приложение.

https://amdy.su/wp-admin/options-general.php?page=ad-inserter.php#tab-8

У нас есть flutter run -t lib/main_dev.dart для разработки и flutter run -t lib/main_prod.dart для готовой сборки.

Переменные среды

Теперь нам нужно преобразовать JSON конфиг в base64, чтобы его можно было добавить как переменные среды в codemagic.yaml , здесь можно найти более подробную информацию об этом.

Codemagic.yaml

Codemagic дает возможность записывать настройки работы приложения в легко настраиваемом yaml синтаксисе. Мы создадим и изменим наш файл codemagic.yaml следующим образом:

Определив наши переменные среды следующим образом:

Вставив этот фрагмент кода выше, мы можем удалить файл /config/app_config.json и создать его при запуске CI сборки.

Примечание: Наш входной файл lib/main_dev.dart в файле codemagic.yaml должен быть изменен на lib/main_prod.dart для готовой сборки.

Запуск сборки

После сохранения codemagic.yaml файла на предпочитаемой системе контроля версий(GitHub, bitbucket и т.д), нажмите на “Start your first build”.

Файл среды определится автоматически:

Нажмите на “Start new build”:

Вуаля, сборка запущена.

The end

Веб-сокеты быстрые, просты в настройке и все еще могут быть «RESTful». Их можно использовать для большого количества приложений. И мы также видим, что очень просто настроить работу приложения и интегрировать различные переменные среды/скрыть части кода в Codemagic CI/CD, и радость в том, что вам нужно сделать это только один раз, после этой настройки вы можете добавить больше конфигураций или изменить существующие.

Если вы хотите познакомиться с более продвинутым использованием веб-сокетов и Codemagic CI/CD, пройдите по ссылки, чтобы посмотреть полный код.