Предисловие:

Я написал блог о сердцебиении веб-сокета два года назад.Предварительное исследование и реализация повторного подключения пульса веб-сокета. Объем чтения был относительно большим, и недавно я подумал о написании собственного пакета npm, поэтому я завершил библиотеку обнаружения сердцебиения веб-сокетов. Здесь я хотел бы поблагодарить нескольких старших братьев и друзей, которые оказали помощь Младшему брату очень помог.

представлять

websocket-heartbeat-js основан на встроенной инкапсуляции веб-сокетов браузера js, основной целью является обеспечение состояния соединения между клиентским веб-сокетом и сервером. Программа имеет механизм обнаружения сердцебиения и автоматического переподключения.Когда сеть отключена или проблема с серверной службой приводит к отключению клиентского веб-сокета, программа будет автоматически пытаться переподключиться до тех пор, пока соединение снова не будет успешным.

принцип

При использовании собственного веб-сокета, если сеть устройства отключена, никакая функция не будет запущена, и интерфейсная программа не может знать, что текущее соединение было отключено. В это время, если вызывается метод websocket.send, браузер обнаружит, что сообщение не может быть отправлено, и вызовет функцию onclose немедленно или через определенный период времени (разные браузеры или версии браузеров могут вести себя по-разному).

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

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

соглашение

Если вам нужно отключить веб-сокет, вы должны выполнить WebsocketHeartbeatJs.close(), WebsocketHeartbeatJs.ws — это собственный объект экземпляра Websocket, а WebsocketHeartbeatJs.ws.onclose привязан к методу повторного подключения.Если внутренняя служба веб-сокета напрямую закрывается соединение, внешний интерфейс WebsocketHeartbeatJs.ws.onclose будет выполнен, и WebsocketHeartbeatJs попытается повторно подключиться. Если серверная часть хочет сообщить интерфейсу, что соединение необходимо разорвать, он должен отправить интерфейсу определенное сообщение.Фронтенд получает конкретное сообщение и вызывает WebsocketHeartbeatJs.close(), и WebsocketHeartbeatJs не будет повторно подключаться.

websocketHeartbeatJs.onmessage = (e) => {
    if(e.data == 'close') websocketHeartbeatJs.close();
}

Внешний интерфейс отправляет сообщение ping. После того, как серверная часть получит его, он должен немедленно вернуть сообщение pong. Сообщение pong может быть любым значением. websocket-heartbeat-js не обрабатывает сообщение pong, а только сбрасывает пульс после получение любого сообщения, потому что получение любого сообщения о том, что соединение нормальное.

Применение

Установить

npm install websocket-heartbeat-js

Введение в использование

import WebsocketHeartbeatJs from 'websocket-heartbeat-js';
let websocketHeartbeatJs = new WebsocketHeartbeatJs({
    url: 'ws://xxxxxxx'
});
websocketHeartbeatJs.onopen = function () {
    console.log('connect success');
    websocketHeartbeatJs.send('hello server');
}
websocketHeartbeatJs.onmessage = function (e) {
    console.log(`onmessage: ${e.data}`);
}
websocketHeartbeatJs.onreconnect = function () {
    console.log('reconnecting...');
}

или

<script src="./node_modules/websocket-heartbeat-js/dist/index.js"></script>
let websocketHeartbeatJs = new window.WebsocketHeartbeatJs({
    url: 'ws://xxxxxxx'
});

API

websocketHeartbeatJs.ws (WebSocket)

websocket-heartbeat-js инкапсулирует только функции подключения, связанные с сердцебиением. websocketHeartbeatJs.ws — это собственный экземпляр Websocket. Если вам нужно использовать дополнительные функции веб-сокета, используйте websocketHeartbeatJs.ws напрямую.

websocketHeartbeatJs.ws 等于 WebSocket(websocketHeartbeatJs.opts.url);

websocketHeartbeatJs.opts (Object)

const options = {
    url: 'ws://xxxx',
    pingTimeout: 15000, 
    pongTimeout: 10000, 
    reconnectTimeout: 2000,
    pingMsg: "heartbeat"
}
let websocketHeartbeatJs = new WebsocketHeartbeatJs(options);

websocketHeartbeatJs.send(msg) (function)

отправить сообщение в бэкенд

websocketHeartbeatJs.send('hello server');

websocketHeartbeatJs.close() (function)

Внешний интерфейс вручную отключает соединение через веб-сокет, этот метод не вызовет повторного подключения. веб-сокетHeartbeatJs.close()

Хуки и функции событий

websocketHeartbeatJs.onclose (function)

websocketHeartbeatJs.onclose = () => {
    console.log('connect close');
}

websocketHeartbeatJs.onerror (function)

websocketHeartbeatJs.onerror = () => {
    console.log('connect onerror');
}

websocketHeartbeatJs.onopen (function)

websocketHeartbeatJs.onopen = () => {
    console.log('open success');
}

websocketHeartbeatJs.onmessage (function)

websocketHeartbeatJs.onmessage = (e) => {
    console.log('msg:', e.data);
}

websocketHeartbeatJs.onreconnect (function)

websocketHeartbeatJs.onreconnect = (e) => {
    console.log('reconnecting...');
}

demo

demo show

npmjs: https://www.npmjs.com/package/websocket-heartbeat-js

гитхаб: https://github.com/zimv/websocket-heartbeat-js