websocket+sockjs+stompjs detailed explanation and example code

Recently, there was a project requirement to use websocket. I thought it was very simple at first, but as I encountered problems and learned more about it, I realized that websocket is not as simple as imagined. This article mainly considers the use of websocket on the client.

Everyone is very familiar with the http hypertext transfer protocol. http has 1.0, 1.1, Several versions of 2.0, starting from http1.1, have Keep-Alive turned on by default to maintain connection continuity. Simply put, when a web page is opened, the TCP connection between the client and the server used to transmit http data is no longer available. will be closed if the client accesses the web page on this server again , will continue to use this established connection, thus reducing resource consumption and optimizing performance. However, Keep-Alive also has a time limit. There is also a client that can only actively initiate a request to obtain return data, and cannot actively receive it. For data pushed in the background, websocket came into being.

Websocket is one of the new features of HTML5. The purpose is to establish a full-duplex communication method between the browser and the server, solve the excessive resource consumption caused by http request-response, and provide a new implementation method for special scenario applications, such as Chat, stock trading, games and other industries with high real-time requirements.

Both http and websocket are based on TCP (Transmission Control Protocol). Websocket can be regarded as a supplement to the http protocol.

SockJS is a JavaScript library. In order to deal with the problem that many browsers do not support the WebSocket protocol, an alternative SockJs was designed. SockJS is an emulation of WebSocket technology. SockJS will correspond to the WebSocket API as much as possible, but if WebSocket technology is not available, it will automatically fall to the polling method.

STOMP - Simple Text Oriented Message Protocol - Simple Text Oriented Message Protocol.

SockJS provides an alternative to WebSocket. But no matter which scenario, this form of communication is too low-level for practical applications. STOMP protocol to add appropriate message semantics to the communication between browser and server.

In short, WebSocket is the underlying protocol, SockJS is an alternative to WebSocket and the underlying protocol, and STOMP is an upper-layer protocol based on WebSocket (SockJS).

1. The HTTP protocol solves the details of the web browser initiating a request and the web server responding to the request. Assuming that the HTTP protocol does not exist, only TCP sockets can be used to write web applications.

2. Using WebSocket (SockJS) directly is very similar to using TCP sockets to write web applications. Because there is no high-level protocol, we need to define the semantics of messages sent between applications, and we also need to ensure that both ends of the connection can follow these semantics;

3. Just like HTTP adds a request-response model layer to the TCP socket, STOMP provides a frame-based line format layer on top of WebSocket to define message semantics;

Install sockjs-client and stompjs; please pay attention here. I found in stompjs: ^2.3.3 version that when introducing stompjs, a net module cannot be found will be reported. You need to execute npm install in the stompjs module root directory. This is strange. problem.

Import module:

 import SockJS from 'sockjs-client';import Stomp from 'stompjs';//Connection function let number = 1;function reconnect(socketUrl) { let url = `${BASE_URL}/ws/sdfpoint`; //Connection address/ / Establish a connection object (the connection has not been initiated yet) let socket = new SockJS(url); // Get the client object of the STOMP sub-protocol let stompClient = Stomp.over(socket); // Initiate a websocket connection to the server and send a CONNECT frame stompClient.connect( {}, // You can add the client’s authentication information function connectCallback () { // Callback function for successful connection // Subscription channel stompClient.subscribe('/topic/display/control', function(data){ if (data) { console.log('subscribe data',data); } }) }, function errorCallBack(error){ //Call function number again when connection fails += 1; if(number<=10){ reconnect(url); } console.log('error',error); } ) }

Summary: The implementation of websocket on the client side seems relatively simple, but it requires good cooperation and debugging with the background to achieve the best results. Browser compatibility is achieved through SockJS and Stomp, message semantics are increased, and usability is enhanced. To thoroughly understand websocket, we also need to have an in-depth understanding of some underlying principles and related knowledge.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.