websocket+sockjs+stompjs 자세한 설명 및 예제 코드

최근에 websocket을 사용하라는 프로젝트 요구사항이 있었는데, 처음에는 아주 간단하다고 생각했는데, 문제를 접하고 좀 더 알아보다 보니 websocket이 생각만큼 간단하지 않다는 것을 깨닫게 되었습니다. 클라이언트에서.

http 하이퍼텍스트 전송 프로토콜에는 모두가 매우 익숙합니다. http에는 1.0, 1.1이 있습니다. http1.1부터 시작하는 여러 버전의 2.0에서는 연결 연속성을 유지하기 위해 기본적으로 Keep-Alive가 켜져 있습니다. 간단히 말해서 웹 페이지가 열릴 때 http 데이터를 전송하는 데 사용되는 클라이언트와 서버 간의 TCP 연결은 없습니다. 클라이언트가 이 서버의 웹페이지에 다시 액세스하면 더 이상 사용할 수 없게 됩니다. , 설정된 연결을 계속 사용하여 리소스 소비를 줄이고 성능을 최적화합니다. 그러나 Keep-Alive에는 반환 데이터를 얻기 위한 요청을 적극적으로 시작할 수만 있고 이를 적극적으로 수신할 수 없는 클라이언트도 있습니다. .백그라운드로 푸시된 데이터를 위해 웹소켓이 탄생했습니다.

Websocket은 HTML5의 새로운 기능 중 하나로서 브라우저와 서버 간의 전이중 통신 방식을 확립하고, http 요청-응답으로 인한 과도한 자원 소모를 해결하며, 특수한 시나리오 응용을 위한 새로운 구현 방법을 제공하는 것이 목적입니다. , 채팅, 주식 거래, 게임 및 실시간 요구 사항이 높은 기타 산업 등.

http와 websocket은 모두 TCP(Transmission Control Protocol)를 기반으로 하며, Websocket은 http 프로토콜의 보완으로 간주될 수 있습니다.

SockJS는 많은 브라우저가 WebSocket 프로토콜을 지원하지 않는 문제를 해결하기 위해 대체 SockJ가 설계되었습니다. SockJS는 WebSocket 기술을 에뮬레이션한 것입니다. SockJS는 최대한 WebSocket API에 대응하지만, 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를 도입할 때 net 모듈을 찾을 수 없다는 메시지가 표시됩니다. Stompjs 모듈 루트 디렉터리에서 npm install을 실행해야 합니다. 이것은 이상한 문제입니다.

가져오기 모듈:

 import SockJS from 'sockjs-client'; import Stomp from 'stompjs';//연결 함수 let number = 1;function reconnect(socketUrl) { let url = `${BASE_URL}/ws/sdfpoint` //연결 주소/ / 연결 개체 설정(연결이 아직 시작되지 않음) let 소켓 = 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) } );

요약: 클라이언트 측에서 websocket을 구현하는 것은 상대적으로 간단해 보이지만 최상의 결과를 얻으려면 배경과의 긴밀한 협력과 디버깅이 필요합니다. SockJS 및 Stomp를 통해 브라우저 호환성이 달성되고 메시지 의미가 향상되며 유용성이 향상됩니다. 웹소켓을 완전히 이해하려면 몇 가지 기본 원리와 관련 지식에 대한 심층적인 이해도 필요합니다.

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.