Возьмите вас, чтобы раскрыть тайну WebSocket!

внешний интерфейс

написать впереди

Прежде чем раскрыть тайну webSocket, я должен сказать сначала, что я ничего не знал о webSocket до написания статьи.Поскольку он используется в бизнесе компании, я его изучу и запишу.Просьба критиковать и исправлять!

Не говори глупостей, старые правила, из прошлой и этой жизни

что такое вебсокет

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

Выслушав официальное объяснение, вы, кажется, снова читаете классический китайский? Дадим ему популярное объяснение.

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

Грубо говоря, он может активно пушить данные клиенту, и тогда у нас возникают вопросы, зачем он нам?

Зачем нужен веб-сокет

У нас нет универсального протокола типа http, зачем нам эта штука! Поскольку http не может выполнить отправку на сервер, кто-то должен спросить еще раз, возможен ли новый HTTP/2? HTTP/2 может передавать только статические ресурсы и не может передавать мгновенную информацию. Что ты имеешь в виду? После долгих исследований было обнаружено, что так называемая серверная отправка HTTP/2 на самом деле заключается в том, что когда сервер получает запрос, он может ответить нескольким ресурсам.

Например: когда я хочу запросить в сервере .html, сервер не только дает нам .html, но и кидает нам js, css и другие файлы. Наиболее интуитивно понятным преимуществом является то, что браузеру не нужно анализировать страницу, а затем инициировать запрос на получение данных, что экономит время загрузки страницы. Таким образом, HTTP/2 не является альтернативой веб-сокету.Если мы хотим добиться обмена мгновенными сообщениями, то, конечно же, веб-сокет нельзя заменить.

Как использовать веб-сокет

Прежде чем мы узнаем, как использовать webSocket, давайте изучим его принцип

принцип

Если на картинке выше показано: http и webSocket на самом деле являются пересечением, и их использование основано на tcp-ссылках.

Чтобы использовать webSocket для установления связи с сервером, вам сначала нужно установить ссылку tcp, а затем на этапе рукопожатия используется протокол HTTP/1.1.На самом деле, я думаю, что он заимствует часть протокола http для достижения своих целей. способность.

Посмотрим, как он это сделает.

Как показано выше, мы можем видеть этот постоянный веб-сокет в ws.
Нажмите на нее, это эта штука, давайте ее исследуем

//请求消息
GET wss://webchat-bj-test5.clink.cn&province= HTTP/1.1 //请求地址
Host: webchat-bj-test5.clink.cn  //域名
Connection: Upgrade
Pragma: no-cache  
Cache-Control: no-cache  //缓存相关
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.9 Safari/537.36 //ua
Upgrade: websocket  //下面这些就是websocket这些东西了
Origin: http://clink2.clink.cn:5050
Sec-WebSocket-Version: 13
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Sec-WebSocket-Key: O5GLCYKZVQi2jTLENobvtg==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits

//响应消息
HTTP/1.1 101 // 响应行，告诉你版本相关
Server: nginx/1.13.9  //服务器用的啥
Date: Mon, 30 Mar 2020 09:21:00 GMT   
Connection: upgrade
Vary: Origin
Vary: Access-Control-Request-Method  //跨域相关
Vary: Access-Control-Request-Headers
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Upgrade: websocket    //下面这些就是websocket的东西了
Sec-WebSocket-Accept: uZpmP+PDDvSeKsEg9vkAsWcqPzE=
Sec-WebSocket-Extensions: permessage-deflate;client_max_window_bits=15

В приведенных выше двух фрагментах кода вы найдете, что он добавил что-то в http, чтобы сообщить серверу, что я являюсь запросом веб-сокета. После того, как сервер проанализировал и обработал, он может надежно взаимодействовать!

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

  • 1. Идентификатор протокола — ws (или wss, если он зашифрован), а URL-адрес сервера — это URL-адрес
  • 2. Sec-WebSocket-Key — это значение в кодировке Base64, которое случайным образом генерируется браузером и используется для проверки совместимости серверов друг с другом.
  • 3. Sec — WebSocket-Protocol — это перечисленный подпротокол, запрошенный клиентом, и сервер должен быть расположен в порядке приоритета.
  • 4. Sec-WebSocket-Version указывает черновик Websocket (версию протокола), используемый сервером.
  • 5. Upgrade сообщает клиенту, что мы успешно перешли на протокол websocket
  • 6. Sec-WebSocket-Accept Это ключ Sec-WebSocket, подтвержденный сервером и зашифрованный (я думаю, что нижний уровень использует асимметричное шифрование).

После этого устанавливается ссылка на веб-сокет.

как использовать

Использование довольно простое, мы можем просто следовать операции mdn

//首先new一个websocket对象，
var ws = new WebSocket("wss://webchat-bj-test5.clink.cn");
//实例对象的onopen属性，用于指定连接成功后的回调函数。
ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  //实例对象的send()方法用于向服务器发送数据。
  ws.send("Hello WebSockets!");
};
//实例对象的onmessage属性，用于指定收到服务器数据后的回调函数。
ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};
//实例对象的onclose属性，用于指定连接关闭后的回调函数。
ws.onclose = function(evt) {
  console.log("Connection closed.");
};

Приведенный выше пример Ruan Yifeng в основном охватывает распространенные сценарии использования.Если вам интересно, найдите ответ на mdn.

Конечно родные вещи довольно сложны в использовании, потому что хотя вы и установили ссылку, но фоновый процессор не так удобен, поэтому в это время мощная библиотека снова родилась.Еще раз торжественно рекомендую socketIO

SocketIO

SocketIO инкапсулирует WebSocket, AJAX и другие методы связи в унифицированный коммуникационный интерфейс, то есть, когда мы используем SocketIO, нам не нужно беспокоиться о проблемах совместимости, а нижний уровень автоматически выберет лучший метод связи. Следовательно, WebSocket является подмножеством SocketIO.

Хватит нести чушь и говорить о коде

node端
//引入koa
var app = require('koa')();
//创建http服务
var server = require('http').createServer(app.callback());
//给http封装成io对象
var io = require('socket.io')(server);
// 建立链接
io.on('connection', function(socket){
// io.emit代表广播，socket.emit代表私发
socket.on('eventB', function(socket){ /* */ });

socket.emit('eventA', /* */);
});
server.listen(3000);

//前端
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script>
    //创建个服务
    var socket = new io()
        用on监听
        socket.on('eventA', function (res) {
        console.log('⽤户1接收到信息了了')
    })
    socket.emit('eventB', data)
</script>

На данный момент, даже если полное мгновенное сообщение реализовано с помощью платформы

Проблемы совместимости

Сегодня, в 2020 году, эта совместимость довольно оптимистична, пожалуйста, используйте ее с уверенностью!

Возможности websocket (акцент: интервью для тестирования)

  • 1. На основе протокола TCP реализация на стороне сервера относительно проста.
  • 2. Хорошая совместимость с протоколом HTTP. Порты по умолчанию также 80 и 443, а протокол HTTP используется на этапе рукопожатия, поэтому его нелегко экранировать во время рукопожатия, и он может проходить через различные прокси-серверы HTTP.
  • 3. Формат данных относительно легкий, производительность невелика, а связь эффективна.
  • 4. Вы можете отправлять текстовые или двоичные данные.
  • 5. Нет ограничений на одно и то же происхождение, и клиент может связываться с любым сервером.

Текущие решения для обмена мгновенными сообщениями в Интернете

1. Аякс-опрос

Принцип ajax-опроса очень прост: пусть браузер отправляет запрос каждые несколько секунд и спрашивает сервер, нет ли нового сообщения. Этот доступ очень удобен для бэкенда, и интерфейс можно вызывать бесконечно, но у него есть очень фатальный недостаток, который тратит впустую пропускную способность и ресурсы сервера. Небольшие приложения могут работать, но что, если тысячи людей хотят обмениваться мгновенными сообщениями? Этого недостаточно

2. длинный опрос

По сути, принцип аналогичен ajax-опросу, оба используют метод опроса, но принята модель блокировки (звонить все время и не вешать трубку, если вам не звонят), то есть после клиент инициирует соединение, если сообщения нет, ответ клиенту не возвращен. Он не возвращается, пока не будет сообщения.После возврата клиент снова устанавливает соединение, и цикл начинается снова и снова. Это устраняет недостатки бесконечного обращения к интерфейсу, но постоянно поддерживает длинную ссылку, которая будет удерживать http-запрос в состоянии pedding! Давление на сервер тоже довольно велико, так что все же не рекомендуется

3. веб-сокет

Это наш сегодняшний герой, у него нет недостатков?

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

SSE

Некоторые студенты в комментариях упомянули sse, давайте изучим

Так называемое SSE (Sever-Sent Event) означает, что браузер отправляет HTTP-запрос на сервер для поддержания длительного соединения, а сервер непрерывно отправляет «сообщение» браузеру в одном направлении — запрос на установление нового соединения.

Прочитав концепцию, вы обнаружите, что это на самом деле похоже на длинный опрос, у него есть встроенный в браузер объект EventSource для работы.

//进建立链接
var source = new EventSource();
//关闭链接
source.close();

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

Преимущество, конечно, в том, что это HTTP-запрос, поскольку он инкапсулируется браузером, его легко использовать и экономить затраты на разработку.

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

постскриптум

Прежде всего, спасибо за ваши статьи

Учебник по веб-сокетам Поговорим об обмене мгновенными сообщениями в Интернете

Из-за рабочих потребностей я изучил веб-сокет и снова разобрался с ним, чтобы помочь вам закончить статью Не благодарите меня, пожалуйста, зовите меня Лэй Фэн!

Категории