Работа с WebSocket

Создание клиента

Следующим шагом является создание клиентского API веб-сокета, который будет взаимодействовать с только что созданным потребителем.

Откройте файл templates/chat/home.html и добавьте следующее:

{% block script %}
    <script>
        base_url = `${window.location.hostname}:${window.location.port}`
        const websocket = new WebSocket(`ws://${base_url}`)
        websocket.onopen = function (event) {
            console.log('client says connection opened')
            websocket.send("Client sends Welcome")
        }
        websocket.onmessage = function (event) {
            console.log("client says server message received: ", event)
        }
    </script>
{% endblock script %}

Приведенный выше код установил подключение через веб-сокет к URL-адресу веб-сокета, связанному с JoinAndLeave потребителем, и определил три обработчика событий. Давайте запустим сервер, чтобы увидеть, когда запускаются эти события.

Запустите сервер разработки и перейдите на домашнюю страницу. Вы должны получить это сообщение на сервере разработки и в консоли:

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

Для сервера сообщение server says connected, которое вы напечатали в connect методе, было напечатано во время рукопожатия. Также было напечатано сообщение об отключении веб-сокета. Проблема здесь заключалась в том, что серверу необходимо принять открывающее рукопожатие от клиента.

Для этого добавим в consumers.py следующую строчку в функцию, которая отвечает за соединение:

def connect(self):
    print("server says connected")
    self.accept() # new

Перезагрузите домашнюю страницу, и вы должны увидеть следующее в консоли и на веб-сервере:

На сервере у вас есть значок WebSocket HANDSHAKING и Websocket CONNECT указывающий, что сервер принял соединение.

Сообщение, отправленное в обработчике событий клиента, onopen также было напечатано в receive методе.

В консоли у вас есть сообщение, которое вы напечатали в обработчике событий onopen.

Кроме того, клиент получил сообщение, отправленное сервером, которое вы напечатали в обработчике событий onmessage.

Это показывает, что сервер теперь может отправлять и получать сообщения от клиента и наоборот.

Если вы развернёте ответ GET, вы сможете просмотреть связанные заголовки запроса-ответа:

Клиент попадает на домашнюю страницу через HTTP-запрос, и сервер вызывает представление, Home которое отображает шаблон Home.
В шаблоне клиент создает экземпляр API веб-сокета, который отправляет запрос Handshake на сервер через URL-адрес веб-сокета.
Сервер вызывает потребителя, связанного с URL-адресом, который принимает рукопожатие, и соединение устанавливается.