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

Как работает WebSocket?

WebSocket начинается с соединения по протоколу HTTP и через специальный заголовок Upgrade, предлагающий серверу переключиться с HTTP на WebSocket, инициирует так называемое рукопожатие:

1. HTTP-запрос от клиента отправляется с заголовком Upgrade: websocket, указывая серверу на необходимость перейти к WebSocket.
2. Сервер подтверждает переход на WebSocket, отправляя ответ с кодом 101 Switching Protocols.
3. После этого соединение становится постоянным и построено на TCP.
4. Теперь сервер и клиент могут обмениваться данными, не разрывая соединения и без необходимости заново отправлять HTTP-запросы.

Основные характеристики WebSocket

• Постоянное соединение: после установления WebSocket-соединения оно остается открытым до явного закрытия одной из сторон, позволяя передавать данные по мере их появления.
• Двусторонняя связь: как клиент, так и сервер могут инициировать обмен данными в любое время, без ожидания запроса с другой стороны. Это делает WebSocket идеальным для приложений, которые требуют оповещений или немедленных ответов.
• Экономия трафика и ресурсов: WebSocket избавлен от необходимости включать заголовки HTTP в каждый запрос, что уменьшает нагрузку на сеть и экономит ресурсы сервера.
• Низкая задержка: благодаря отсутствию многократного открытия/закрытия соединений и небольшому объему служебной информации WebSocket обеспечивает передачу данных с минимальной задержкой. Это важно для онлайн-приложений, где каждая миллисекунда задержки может быть критичной, как, например, в играх или стриминговых платформах.
• Поддержка событийной модели: WebSocket поддерживает события, такие как onopen, onmessage, onclose, и onerror, позволяя разработчикам отслеживать состояние соединения и обрабатывать данные, когда это необходимо.

Когда и зачем использовать WebSocket?

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

• Онлайн-чаты и системы сообщений: WebSocket позволяет мгновенно отправлять сообщения, поддерживая общение пользователей без задержек.
• Онлайн-игры: постоянное соединение помогает передавать информацию о действиях игроков и состоянии игры в реальном времени.
• Финансовые приложения и биржи: WebSocket используется для отображения текущих данных о котировках акций или криптовалют, которые требуют оперативного обновления.
• Системы мониторинга: например, системы отслеживания состояния серверов или показателей сети, где необходимо получать актуальные данные без задержек.
• Интернет вещей (IoT): WebSocket может использоваться для управления устройствами и сбора данных с датчиков в режиме реального времени.

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

Преимущества:

• Постоянное соединение и низкая задержка.
• Экономия на заголовках, что уменьшает нагрузку на сеть и сервер.
• Возможность двусторонней связи между клиентом и сервером.
• Масштабируемость для многопользовательских приложений.

Недостатки:

• Сложность реализации: поддержание и обработка постоянного соединения может быть сложной задачей.
• Безопасность: WebSocket соединение уязвимо для атак, таких как взлом сессий и межсайтовый скриптинг (XSS), поэтому оно должно быть защищено с помощью протоколов шифрования, таких как WSS (WebSocket Secure).
• Необходимость постоянного соединения: WebSocket требует долгосрочного соединения, что может быть проблемой для мобильных устройств с ограниченным трафиком или батареей.

WebSocket в FastAPI: Всё самое важное

FastAPI — это современный фреймворк для разработки веб-приложений на Python, который идеально подходит для создания асинхронных приложений с поддержкой WebSocket. WebSocket в FastAPI реализован «из коробки», что значительно упрощает создание приложений с обменом данными в реальном времени, таких как онлайн-чаты, системы уведомлений, сервисы для совместного редактирования и т.д.

Почему WebSocket в FastAPI?

FastAPI, благодаря своей асинхронной природе, отлично подходит для работы с протоколом WebSocket, так как позволяет обрабатывать множество одновременных соединений с минимальной задержкой. Используя async и await, FastAPI эффективно управляет соединениями, не перегружая сервер.

Вот основные особенности WebSocket в FastAPI:

• Встроенная поддержка WebSocket: FastAPI позволяет легко создать WebSocket-конечные точки и управлять подключениями в рамках одного и того же приложения.
• Асинхронная обработка запросов: FastAPI, используя async/await, поддерживает обработку множества соединений, что делает его подходящим для высоконагруженных приложений.
• Удобная интеграция с фронтендом: WebSocket-конечные точки FastAPI легко подключаются к любым клиентским приложениям, поддерживающим WebSocket, включая браузеры, мобильные и настольные приложения.

Как реализовать WebSocket в FastAPI?

Создание WebSocket-конечной точки в FastAPI достаточно простое. Давайте рассмотрим, как это сделать.

Создание WebSocket-конечной точки:

Для начала нужно создать объект FastAPI и объявить маршрут для WebSocket. В FastAPI WebSocket-конечные точки создаются с помощью декоратора @app.websocket() и определяют путь, по которому будет доступен WebSocket-сервис.

from fastapi import FastAPI, WebSocket

app = FastAPI()

@app.websocket("/ws/chat")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    while True:
        data = await websocket.receive_text()
        await websocket.send_text(f"Вы сказали: {data}")

Здесь:

• websocket.accept() используется для принятия соединения с клиентом.
• websocket.receive_text() ожидает получение текстового сообщения от клиента.
• websocket.send_text() отправляет ответное текстовое сообщение клиенту.

Поддержка нескольких подключений:

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

connected_clients = []

@app.websocket("/ws/chat")
async def chat_room(websocket: WebSocket):
    await websocket.accept()
    connected_clients.append(websocket)
    try:
        while True:
            data = await websocket.receive_text()
            for client in connected_clients:
                await client.send_text(f"Новое сообщение: {data}")
    except:
        connected_clients.remove(websocket)

В этом примере:

• Все активные соединения добавляются в список connected_clients.
• При получении нового сообщения оно рассылается всем клиентам в чате, имитируя групповую комнату.

Обработка событий WebSocket:

FastAPI поддерживает основные события WebSocket — onopen, onmessage, onclose, и onerror, что упрощает мониторинг состояния соединения. Эти события помогают, например, при отслеживании подключения клиентов или обработке ошибок и закрытия соединения.

Защита и аутентификация

FastAPI также поддерживает различные способы аутентификации для WebSocket, что особенно важно для безопасного общения между клиентом и сервером. Так как WebSocket-соединение отличается от HTTP, рекомендуется защищать WebSocket с использованием токенов или API-ключей, передаваемых в параметрах URL или заголовках. FastAPI позволяет использовать зависимости и middleware для аутентификации:

from fastapi import Depends, WebSocket, WebSocketDisconnect

async def get_token(websocket: WebSocket, token: str):
    if token != "valid-token":
        await websocket.close()

@app.websocket("/ws/chat")
async def websocket_endpoint(websocket: WebSocket, token: str = Depends(get_token)):
    await websocket.accept()
    # дальнейшая обработка сообщений

Преимущества использования WebSocket в FastAPI

• Производительность: FastAPI благодаря асинхронной архитектуре обеспечивает высокую скорость работы с множеством подключений.
• Поддержка событийной модели: поддержка событий позволяет отслеживать жизненный цикл соединения, обеспечивая дополнительный контроль.
• Легкость интеграции: WebSocket-конечные точки FastAPI легко подключаются с фронтенд-частью, обеспечивая гибкость разработки.
• Расширяемость: можно добавлять новые конечные точки для различных приложений (например, добавление нескольких чат-комнат) и легко масштабировать приложение.
• Безопасность: FastAPI поддерживает аутентификацию для WebSocket, позволяя создать безопасную среду для обмена данными.

Создание простого онлайн-чата с помощью WebSocket в FastAPI

Давайте создадим простой онлайн-чат, в котором пользователи смогут подключаться, отправлять сообщения, и видеть их в реальном времени. Мы будем использовать WebSocket в FastAPI для создания и управления постоянными соединениями, чтобы сообщения мгновенно доставлялись всем подключенным пользователям.

Основная архитектура чата

Для этого онлайн-чата нужно:

• Настроить сервер FastAPI с WebSocket.
• Хранить подключенных пользователей.
• Передавать сообщения от одного пользователя ко всем остальным.

FastAPI поможет сделать все это с минимальным количеством кода, при этом сохраняя высокую производительность.

Шаг 1: Установка FastAPI и Uvicorn

Для начала убедимся, что FastAPI и Uvicorn (сервер для запуска FastAPI) установлены:

pip install fastapi uvicorn

Шаг 2: Основной код для онлайн-чата

Создадим файл main.py, в котором реализуем сервер с поддержкой WebSocket.

from fastapi import FastAPI, WebSocket, WebSocketDisconnect
from typing import List

app = FastAPI()

# Хранение подключенных клиентов
class ConnectionManager:
    def __init__(self):
        # Список подключений
        self.active_connections: List[WebSocket] = []

    async def connect(self, websocket: WebSocket):
        # Принимаем новое соединение и добавляем его в список активных
        await websocket.accept()
        self.active_connections.append(websocket)

    def disconnect(self, websocket: WebSocket):
        # Убираем отключенного клиента из списка
        self.active_connections.remove(websocket)

    async def broadcast(self, message: str):
        # Отправляем сообщение всем подключенным пользователям
        for connection in self.active_connections:
            await connection.send_text(message)

# Инициализация менеджера подключений
manager = ConnectionManager()

Этот код создает объект ConnectionManager для управления подключениями:

• connect — добавляет новое WebSocket-соединение в список active_connections.
• disconnect — удаляет соединение, если клиент отключается.
• broadcast — рассылает сообщение всем активным соединениям.

Шаг 3: Создание WebSocket-конечной точки для чата

Теперь добавим WebSocket-конечную точку, чтобы клиенты могли подключаться к чату и отправлять сообщения.

@app.websocket("/ws/chat")
async def websocket_endpoint(websocket: WebSocket):
    # Подключаем пользователя и добавляем его в менеджер
    await manager.connect(websocket)
    try:
        # Ожидаем сообщения от клиента
        while True:
            data = await websocket.receive_text()  # Получаем сообщение от пользователя
            await manager.broadcast(f"Сообщение: {data}")  # Рассылаем сообщение всем подключенным
    except WebSocketDisconnect:
        # Обрабатываем отключение клиента
        manager.disconnect(websocket)
        await manager.broadcast("Пользователь покинул чат.")

В этом коде:

• Подключение: каждый новый клиент подключается с помощью manager.connect(websocket), после чего он добавляется в список активных соединений.
• Прием сообщений: в цикле while True сервер ждет сообщений от клиента. Когда сообщение получено, оно отправляется всем подключенным пользователям с помощью manager.broadcast.
• Отключение: если клиент отключается (ловится исключение WebSocketDisconnect), соединение удаляется из списка, и всем клиентам отправляется сообщение о том, что один из участников покинул чат.

Полный код

Вот весь код для создания простого онлайн-чата:

from fastapi import FastAPI, WebSocket, WebSocketDisconnect
from typing import List

app = FastAPI()

class ConnectionManager:
    def __init__(self):
        self.active_connections: List[WebSocket] = []

    async def connect(self, websocket: WebSocket):
        await websocket.accept()
        self.active_connections.append(websocket)

    def disconnect(self, websocket: WebSocket):
        self.active_connections.remove(websocket)

    async def broadcast(self, message: str):
        for connection in self.active_connections:
            await connection.send_text(message)

manager = ConnectionManager()

@app.websocket("/ws/chat")
async def websocket_endpoint(websocket: WebSocket):
    await manager.connect(websocket)
    await manager.broadcast("Новый пользователь присоединился к чату.")
    try:
        while True:
            data = await websocket.receive_text()
            await manager.broadcast(f"Сообщение: {data}")
    except WebSocketDisconnect:
        manager.disconnect(websocket)
        await manager.broadcast("Пользователь покинул чат.")

Шаг 4: Запуск сервера

Запустим сервер с помощью Uvicorn:

uvicorn main:app --reload

Теперь наш сервер работает, и к нему можно подключиться через WebSocket.

Шаг 5: Клиентская сторона для тестирования

Чтобы протестировать онлайн-чат, можно создать простую HTML-страницу с JavaScript-кодом для подключения к WebSocket.

Создайте файл index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple WebSocket Chat</title>
</head>
<body>
    <h1>Чат на WebSocket</h1>
    <div id="messages"></div>
    <input id="messageInput" type="text" placeholder="Введите сообщение" autocomplete="off"/>
    <button onclick="sendMessage()">Отправить</button>

    <script>
        const ws = new WebSocket("ws://localhost:8000/ws/chat");

        // Обработка нового сообщения от сервера
        ws.onmessage = (event) => {
            const messages = document.getElementById("messages");
            const message = document.createElement("div");
            message.textContent = event.data;
            messages.appendChild(message);
        };

        // Отправка сообщения на сервер
        function sendMessage() {
            const input = document.getElementById("messageInput");
            ws.send(input.value);
            input.value = '';  // Очищаем поле ввода после отправки
        }
    </script>
</body>
</html>

В этом файле:

• ws.onmessage — обработчик получения нового сообщения от сервера. Каждое сообщение отображается на экране, добавляясь к списку сообщений.
• sendMessage() — функция отправки сообщения. Она берет текст из поля ввода и отправляет его серверу.

Как протестировать чат

Запустите сервер FastAPI.

Откройте несколько вкладок браузера и загрузите index.html.

Напишите сообщение в одном окне и нажмите «Отправить». Оно сразу же отобразится во всех вкладках.