websocket+sockjs+stompjs подробное объяснение и пример кода

Недавно в проекте появилось требование использовать веб-сокет. Сначала я подумал, что это очень просто, но когда я столкнулся с проблемами и узнал об этом больше, я понял, что веб-сокет не так прост, как представлялось. на клиенте.

Все хорошо знакомы с протоколом передачи гипертекста http. http имеет версии 1.0, 1.1, В нескольких версиях 2.0, начиная с http1.1, функция Keep-Alive включена по умолчанию для обеспечения непрерывности соединения. Проще говоря, при открытии веб-страницы TCP-соединение между клиентом и сервером, используемое для передачи http-данных, отсутствует. больше доступен, будет закрыт, если клиент снова получит доступ к веб-странице на этом сервере. , продолжит использовать это установленное соединение, тем самым уменьшая потребление ресурсов и оптимизируя производительность, но у Keep-Alive также есть ограничение по времени, а также есть клиент, который может только активно инициировать запрос для получения возвращаемых данных и не может активно их получать. Для передачи данных в фоновом режиме появился веб-сокет.

Websocket — одна из новых функций HTML5. Ее цель — установить полнодуплексный метод связи между браузером и сервером, решить проблему чрезмерного потребления ресурсов, вызванную запросом-ответом HTTP, и предоставить новый метод реализации для приложений специального сценария. , такие как чат, торговля акциями, игры и другие отрасли с высокими требованиями к работе в режиме реального времени.

И http, и websocket основаны на TCP (протокол управления передачей). Websocket можно рассматривать как дополнение к протоколу http.

SockJS — это библиотека JavaScript. Чтобы решить проблему, заключающуюся в том, что многие браузеры не поддерживают протокол WebSocket, была разработана альтернатива SockJs. SockJS — это эмуляция технологии WebSocket. SockJS будет максимально соответствовать API WebSocket, но если технология WebSocket недоступна, она автоматически перейдет к методу опроса.

STOMP — протокол простых текстовых сообщений — протокол простых текстовых сообщений.

SockJS предоставляет альтернативу WebSocket. Но независимо от сценария, эта форма связи слишком низкоуровневая для практического применения. Протокол STOMP для добавления соответствующей семантики сообщений к связи между браузером и сервером.

Короче говоря, WebSocket — это базовый протокол, SockJS — альтернатива WebSocket и базовому протоколу, а STOMP — это протокол верхнего уровня, основанный на WebSocket (SockJS).

1. Протокол HTTP решает детали веб-браузера, инициирующего запрос, и веб-сервера, отвечающего на запрос. Если предположить, что протокол HTTP не существует, для написания веб-приложений можно использовать только сокеты TCP.

2. Непосредственное использование WebSocket (SockJS) очень похоже на использование TCP-сокетов для написания веб-приложений. Поскольку протокола высокого уровня не существует, нам необходимо определить семантику сообщений, передаваемых между приложениями, а также необходимо гарантировать, что оба конца. связи могут следовать этой семантике;

3. Точно так же, как HTTP добавляет уровень модели запроса-ответа в сокет TCP, STOMP предоставляет уровень формата строки на основе кадров поверх WebSocket для определения семантики сообщений;

Установите sockjs-client и stompjs; обратите внимание здесь. Я обнаружил в версии stompjs: ^ 2.3.3, что при внедрении stompjs будет сообщено, что сетевой модуль не найден. Вам необходимо выполнить установку npm в корневом каталоге модуля stompjs. Это странная проблема.

Модуль импорта:

 импортировать SockJS из 'sockjs-client'; импортировать Stomp из 'stompjs';//Функция подключения let Number = 1;function reconnect(socketUrl) { let url = `${BASE_URL}/ws/sdfpoint` //Адрес подключения/; / Установить объект соединения (соединение еще не было инициировано) let Socket = new SockJS(url) // Получить клиентский объект подпротокола STOMP let; stompClient = Stomp.over(socket); // Инициируем соединение через веб-сокет с сервером и отправляем кадр CONNECT stompClient.connect( {}, // Вы можете добавить информацию об аутентификации клиента function connectCallback () { // Функция обратного вызова для успешного завершения соединение // Канал подписки stompClient.subscribe('/topic/display/control', function(data){ if (data) { console.log('subscribe data',data); } }) }, function errorCallBack(error){ //Вызов номера функции повторно при сбое соединения += 1; if(number<=10){ reconnect(url); console.log('error',error } ) }

Резюме: Реализация веб-сокета на стороне клиента кажется относительно простой, но для достижения наилучших результатов требуется хорошее взаимодействие и отладка в фоновом режиме. Совместимость с браузерами достигается за счет SockJS и Stomp, увеличивается семантика сообщений и повышается удобство использования. Чтобы полностью понять веб-сокет, нам также необходимо иметь глубокое понимание некоторых основополагающих принципов и связанных с ними знаний.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.