С возвращением, ребята,
В прошлых уроках мы сначала узнали о том, как создать Socket IO сервер с помощью flask, а затем подключили нашу локальную базу данных MySQL к серверу.
Теперь в этой сессии мы будем использовать flutter для создания приложения чата в реальном времени.
Итак, не откладывая в долгий ящик.
Начнем
- Создайте новый проект.
- Добавьте следующие зависимости в файл pubspec.yaml.
socket_io_client: ^2.0.0
shared_preferences: ^2.0.15
socket_io_client:пакет используется для подключения приложения Flutter к серверу python с помощью сокетов.
shared_preferences:используется для хранения roomId и имени пользователя локально для постоянной аутентификации.
- Мы будем придерживаться следующей структуры файлов:
- Создайте новый файл imports.dart и добавьте в него следующие строки:
Raw File
Зачем мы экспортируем файлы dart в один и как мы это делаем?
Примечание: Вы получите много ошибок, игнорируйте их.
- Снова создайте новый файл constant.dart, в который мы добавим url для web и mobile.
Добавьте эти строки кода:
Необработанный файл
- Теперь нам нужен контроллер потока для прослушивания изменений в базе данных, поэтому создадим новый файл под названием «stream_socket.dart».
Необработанный файл
- Теперь замените следующие строки кода в файле main.dart
Необработанный файл
Давайте разберемся, что происходит в функции void initState().
Мы вызываем функцию init() для получения идентификатора комнаты и имени пользователя для локального хранения с помощью библиотеки SharedPreferences.
Если имя пользователя и id комнаты существуют в локальной базе данных, то пользователь перейдет на экран ChatScreen, в противном случае он перейдет на LoginScreen.
после чего последует эта строка:
isLoading?const Scaffold(body: Center(child: CircularProgressIndicator(),)):(username!=null && roomId!=null?ChatPage(username: username!, roomId: roomId!):const LogInScreen()));
- Теперь нам нужно создать пользовательский интерфейс Login Screen UI простым копированием-вставкой.
Создайте новую папку в папке lib под названием «screens» и создайте в ней новый файл под названием «login_screen.dart».
Необработанный файл
Помните, что при нажатии кнопки «Start Chat» мы сохраним имя_пользователя и идентификатор_комнаты в локальном хранилище с помощью «Shared Preferences», и пользователь перейдет на
«ChatScreen».
onTap: () async {
final prefs = await SharedPreferences.getInstance();
prefs.setString('roomId', roomId!);
prefs.setString('username', username!);
Navigator.pop(context);
Navigator.push(context, MaterialPageRoute(builder: (builder)=>ChatPage(username: username!, roomId: roomId!)));
},
Примечание: Room_id и имя_пользователя также будут переданы виджету ChatScreen Stateful.
- То же самое для chat_screen, просто скопируйте следующие строки кода в новый файл в той же папке с именем «chat_screen.dart», а затем мы обсудим, как работают функции on и emit во flutter.
Необработанный файл
- Давайте разберем каждую часть экрана чата
в функции void initState() мы устанавливаем соединение с сервером.
socket.onConnect((_) {
// it firing 'join' event so that server can listen the request.
socket.emit('join', {
'username':username,
'roomId':roomId,
},
);
});
Также мы избавляемся от контроллера потока в void dispose().
Мы используем stream-builder для прослушивания сообщений и постоянного обновления пользовательского интерфейса.
- Теперь давайте поговорим о том, как мы отправляем новые сообщения.
// we are firing 'text' event and requesting to the server.
socket.emit('text',{'msg':sentMsg,
'room':widget.roomId,
'username':widget.username
});
- мы выходим из комнаты, используя событие ‘left’.
socket.emit('left',{
'username':widget.username,
'room':widget.roomId,
});
и в последнюю очередь мы очищаем настройки.
Выводы
На этом наша серия по Socket-IO из 3 частей подошла к концу.
Надеюсь, вам понравилось.
Если вы пропустили часть 1 и часть 2, читайте здесь:
Часть 1: https://dev.to/djsmk123/flutter-python-web-socket-ft-socket-io-part-1-3icf
Часть 2: https://dev.to/djsmk123/flutter-python-web-socket-ft-socket-io-part-2-3oi5
Stay Tuned….
-
Исходный код бэкенда
-
Исходный код клиентского приложения
Следуйте за мной:
-
GitHub
-
LinkedIn
-
Twitter