Как использовать WebSocket в проектах компании - практическое руководство

Начиная с основных концепций WebSocket, эта статья знакомит с процессом и мерами предосторожности от локальной совместной отладки до развертывания и онлайн-разработки при реальной разработке, так что WebSocket Xiaobai может быть применен к проекту с минимальными затратами.

1. Основы WebSocket

1. Что такое WebSocket

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

2. Сравните http

• Оба расположены на уровне приложения и оба полагаются на протокол TCP.
• Протокол WebSocket обычно начинается с ws: // или wss: //.
• HTTP не поддерживает полнодуплексную связь, обычно используется опрос

3. Базовое использование WebSocket

совместимость:

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

Простая демонстрация

( Подробнее см. В исходном видео )

Клиент может видеть сообщение WebSocket под console-network-ws

Обратите внимание на несколько ключевых полей в заголовке запроса.

1. Адрес запроса начинается с ws: // или wss: //
2. Для подключения должно быть установлено значение «Обновление», что означает, что клиент хочет подключиться для обновления.
3. В поле «Обновление» должно быть указано значение WebSocket, что означает, что вы хотите перейти на протокол WebSocket.
4. Если сервер поддерживает веб-сокет, та же информация будет возвращена в заголовке ответа, а статус подключения будет установлен на 101 (переключение протокола выполнено успешно.

Два, как использовать WebSocke в проекте

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

1. Среда разработки

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

Настроить прокси webpack

Описание:

• Интерфейс WebSocket должен быть отделен от интерфейса http.
• Доменное имя использует location.host и пересылается через обратный прокси-сервер для сохранения файлов cookie и информации заголовка.

2. Обнаружение сердцебиения и повторное подключение после отключения

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

Обнаружение пульса означает, что клиент периодически отправляет на сервер сообщения пульса, чтобы поддерживать стабильное соединение;

Повторно подключиться после отключения, то есть перед отправкой сообщения проверьте состояние подключения, если подключение прервано, попробуйте n раз подключиться

Пакет выглядит следующим образом:

Вы также можете выбрать обработку сторонней библиотеки.

3. Конфигурация Nginx

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

Это позволяет приложениям WebSocket более легко вписываться в существующие инфраструктуры.

Например, приложения WebSocket могут использовать стандартные порты HTTP 80 и 443, что позволяет использовать существующие правила межсетевого экрана.

location /websocket {
    proxy_pass http://xx.xxx.xx.xx; # websocket服务器。不用管 ws://
    proxy_http_version 1.1; # http协议切换

    proxy_set_header Host $host; # 保留源信息
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Upgrade $http_upgrade; # 请求协议升级，如果生产环境有报400错误，可以尝试将值设置为websocket
    proxy_set_header Connection $connection_upgrade;
}

Три, другие

sockiet.io

sockiet.io - это платформа приложений реального времени, основанная на Node. По сравнению с собственным WebSocket, sockiet.io инкапсулирует более общие возможности и может быть понижен до уровня опроса в браузерах, которые не поддерживают WebSocket.

Достоинства: зрелый, готовый к использованию «из коробки», хорошая совместимость.

Недостатки: большой размер, передняя и задняя части должны быть унифицированы, то есть, если серверная часть использует  socket.io  , передняя часть должна использовать socket.io -client.

Автор: vivo коммерческая большая фронтенд-команда