Flutter и Python Web-Socket Ft. Socket-IO (часть 1)

Приветствую вас, ребята, мы собираемся построить приложение для чата в реальном времени, используя Web Socket, клиентское приложение на Flutter и серверное приложение на Python, используя Flask и MySQL в качестве базы данных.

Держите ваши устройства, мы не собираемся торопиться в этом и это будет по частям.

Что такое Web Socket?

WebSocket — это коммуникационный протокол, используемый в клиент-серверном взаимодействии.

WebSocket — это двунаправленный коммуникационный протокол, который может отправлять данные от клиента к серверу или от сервера к клиенту, используя установленный канал связи. Соединение поддерживается до тех пор, пока клиент или сервер не прервут его.

Подробнее

Почему мы собираемся использовать WebSocket, а не Rest API?

Поскольку мы собираемся создать приложение реального времени, то есть любой пользователь может отправить сообщение в любое время, если вы используете REST API, нам нужно запросить у сервера новое сообщение, но как мы можем узнать, что пользователь отправил сообщение или нет? Используя периодические запросы от клиента к серверу? Но лучший ли это способ?

Нет, это не лучший способ, поэтому мы будем использовать WebSocket, в котором и сервер, и клиент будут соединены, и оба они смогут запрашивать друг друга.

Смотрите ниже, чтобы получить четкое представление о разнице между WebSocket и HTTP Request.

Необходимые условия

• Python IDE (рекомендуется PyCharm)
• Сервер MySQL
• Расширение клиента SocketIO (Chrome & Firefox)
• Flutter и Dart SDK

Начнем

• Создайте новый проект python или новый файл main.py.
• Установите следующую библиотеку, используя PIP

pip install Flask-MySQL
pip install Flask-SocketIO
pip install cryptography

• импортируйте все необходимые пакеты

from flask import Flask, session, jsonify
from flask_socketio import SocketIO, join_room, leave_room, emit
from flaskext.mysql import MySQL

import datetime

• Создание простого Socket IO Flask

# Flask App Config
app: Flask = Flask(__name__)

app.config['SECRET_KEY'] = 'secret'
app.config['SESSION_TYPE'] = 'filesystem'

# CORS_ALLOWED_ORIGINS is the list of origins authorized to make requests.
socketio = SocketIO(app, cors_allowed_origins='*')


# Home Page
@app.route('/', methods=['GET', 'POST'])
def index():
    return jsonify({'data': "Web Socket Example"})


if __name__ == '__main__':
    # Run Flask-SocketIO App
    socketio.run(app, debug=True)

Прежде чем двигаться дальше, давайте разберемся, что такое socket.emit(), socket.on() и Room в Socket IO?

• Комната : как следует из названия, комната — это место (канал) на сервере, где различные клиенты могут присоединяться и покидать его, а также оттуда может быть передано сообщение всем клиентам в той же комнате.

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

• Событие Socket.emit() : Отправляет событие на сокет, идентифицированный строковым именем. Могут быть включены любые другие параметры. Поддерживаются все сериализуемые структуры данных, включая Buffer.
• Socket.on() Событие : Socket.on() — это обработчик событий, который получает информацию от клиента и обрабатывает ее.

Сервер

io.on("connection", (socket) => {
  socket.emit("hello", "world", (response) => {
    console.log(response); // "got it"
  });
});

Клиент

socket.on("hello", (arg, callback) => {
  console.log(arg); // "world"
  callback("got it");
});

• Мы будем следовать логике проектирования бэкенда и фронтенда.

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

• Добавьте следующие строки кода ниже функции def index().

@socketio.on('join', namespace='/chat')
def join(message):
    # we need roomId and Username for joining the room 
    room = message['roomId']
    username = message['username']
    # join room 
    join_room(room)
    # Emit message or notifier to other user of same room 
    emit('message', {"msg": {str(username) + 'has joined the room.'}}, room=room)


@socketio.on('text', namespace='/chat')
def text(message):
    room = message['room']
    username = message['username']
    msg = message['msg']
    emit('message', {"msg": {str(username) + ' : ' + str(msg)}}, room=room)


@socketio.on('left', namespace='/chat')
def left(message):
    room = message['room']
    username = message['username']
    # leaving the room
    leave_room(room=room)
    emit('message', {"msg": {str(username) + 'has left the room.'}}, room=room)

• Теперь запустите приложение и откройте Socket IO Client.
  Обратите внимание, URL для подключения сокета IO будет таким (localhost)
  «http://localhost:5000/chat»
  где chat — пространство имен.

• Давайте протестируем, сначала присоединимся и отправим следующие данные:

{
"roomId":"test1223",
"username":"smk"
}

• Теперь отправьте сообщение в той же комнате со следующими данными JSON:

{
"room":"test1223",
"username":"smk",
"msg":"hello"
}

Примечание: Не забудьте изменить название события ‘join’ на ‘text’.

• Попробуем выйти из комнаты, отправив запрос на сервер со следующими данными:

{
"room":"test1223",
"username":"smk",
}

Ура, мы закончили……..

В следующей части мы собираемся настроить базу данных MySQL на сервер веб-сокет и сохранить сообщение.

Оставайтесь с нами….

• Исходный код

Следуйте за мной:

• GitHub

• LinkedIn

• Twitter