Введение в модели SQLAlchemy

И последним действием, нам необходимо написать шаблон с JS скриптом, с помощью которого мы будем отправлять сообщения через WebSocket. Для этого в папке templates создадим файл index.html следующего содержания:

<!DOCTYPE html>
<html>
<head>
    <title>FastAPI + WebSocket Chat</title>
</head>
<body>
<h1>FastAPI + WebSocket Chat</h1>
<form action="" onsubmit="sendMessage(event)" id="form">
    <input type="text" id="messageText" autocomplete="off" placeholder="Text...">
    <button>Submit</button>
</form>
<ul id='messages'>
</ul>
<script>
    var clientID = Date.now();
    var ws = new WebSocket(`ws://127.0.0.1:8000/ws/${clientID}`);

    function processMessage(event) {
        var messages = document.getElementById('messages')
        var message = document.createElement('li')
        var content = document.createTextNode(event.data)
        message.appendChild(content);
        messages.appendChild(message);
    }

    ws.onmessage = processMessage;

    function sendMessage(event) {
        var input = document.getElementById("messageText")
        ws.send(input.value);
        input.value = ''
        event.preventDefault()
    }
</script>
</body>
</html>

Форма настроена на запуск функции JavaScript sendMessage(event) при ее отправке.

Ниже приведен раздел сценариев JavaScript, отвечающий за установление и управление подключением WebSocket. Сценарий начинается с присвоения clientID значения Date.now(). Данное число используется в качестве рандомного параметра. Это значение далее, представляющее конкретного пользователя и используется для создания URL-адреса WebSocket в формате ws://127.0.0.1:8000/ws/${clientID}.

Впоследствии новый объект WebSocket (ws) создается с использованием построенного URL-адреса. Это соединение WebSocket действует как канал для связи в режиме реального времени между клиентом (веб-браузером пользователя) и сервером.

Сценарий включает в себя обработчик событий ws.onmessage, который запускается всякий раз, когда подключение через соединение WebSocket принимается новое сообщение. В этом обработчике код динамически создает новые элементы <li> для вывода каждого входящего сообщения. В конечном счете, элемент <li> добавляется к ранее упомянутому <ul> с идентификатором messages

Также определена функция sendMessage. Эта функция вызывается, когда пользователь отправляет сообщение через форму. Он отправляет введенное сообщение на сервер WebSocket, используя метод ws.send(input.value). После отправки сообщения функция очищает поле ввода для подготовки к следующему сообщению и предотвращает поведение отправки формы по умолчанию с помощью event.preventDefault(). Это гарантирует, что отправка формы не приведет к перезагрузке полной страницы, что имеет решающее значение для поддержания чата.

Запустим сервер и увидим следующее в консоли:

INFO:     Will watch for changes in these directories: ['/Users/permin0ff/PycharmProjects/FastAPI_beginners/versions/main.py']
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO:     Started reloader process [21046] using WatchFiles
Creating a list to active connections []
INFO:     Started server process [21048]
INFO:     Waiting for application startup.
INFO:     Application startup complete.

А именно строчку Creating a list to active connections [], сообщающей о создании списка соединений WebSocket.

Проверим работу открыв пока в одном окне браузера http://127.0.0.1:8000, мы увидим форму отправки сообщения.

И в консоли мы увидим что Websocket открыл соединение и записал его в список connections.

INFO:     127.0.0.1:52343 - "GET / HTTP/1.1" 200 OK
INFO:     ('127.0.0.1', 52344) - "WebSocket /ws/1715591622951" [accepted]
New Active connections are  [<starlette.websockets.WebSocket object at 0x1054df380>]
INFO:     connection open

Откроем еще один браузер и перейдем на страницу http://127.0.0.1:8000. Будет открыто новое соединение и также добавится в список.

INFO:     127.0.0.1:52363 - "GET / HTTP/1.1" 200 OK
INFO:     ('127.0.0.1', 52364) - "WebSocket /ws/1715591731515" [accepted]
New Active connections are  [<starlette.websockets.WebSocket object at 0x1054df380>, <starlette.websockets.WebSocket object at 0x105515310>]
INFO:     connection open

Попробуем написать что-нибудь из разных вкладок браузера:

Мы видим что сообщения отправляются и обновляются без перезагрузки страницы. Также в консоли мы увидим как отрабатывает функция broadcast, принимая и отправляя сообщение всем пользователям.

In broadcast: sent msg to  <starlette.websockets.WebSocket object at 0x1054df380>
In broadcast: sent msg to  <starlette.websockets.WebSocket object at 0x105515310>
In broadcast: sent msg to  <starlette.websockets.WebSocket object at 0x1054df380>
In broadcast: sent msg to  <starlette.websockets.WebSocket object at 0x105515310>
In broadcast: sent msg to  <starlette.websockets.WebSocket object at 0x1054df380>
In broadcast: sent msg to  <starlette.websockets.WebSocket object at 0x105515310>

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