Recently, I happened to encounter large screen data need to be displayed in real time, so I studied websocket, recorded in the backup here, and realized real-time communication function through SockJS, so as to facilitate the next direct CTRL + C, CTRL + V haha

  • The first step is to install websocket in the project. How to install websocket

    npm install sockjs-client

    npm install stompjs

    Why sockjs-client and stompjs are sockjs-client and stompjs?

  • When the soha is finished, it is imported into the place where it is used and continued with the soha

    import SockJS from 'sockjs-client'

    import Stomp from 'stompjs'

    initWebSocket() {this.personList = [] // Create a connection objectlet socket = new SockJS('address XXXXXX XXXXXX'This.stompclient = stomp.over (socket) this.stompClient.debug = null // Remove webSocket logs // Initiate a websocket connection to the server this.stompClient.connect(this.headers, () => { // // console.log(new Date()) this.stompClient.subscribe('/user/topic/news', (res) => {// Subscribe to a topic provided by the server // // console.log(new Date()))let response = JSON.parse(res.body)
          if (response.code === 200) {
            if (response.data && response.data.actionName === 'home.getData'This.getsum = response.data}else {
            // console.log('Fetch failed')
            console.log(response.msg)
          }
        }, this.headers)
        this.stompClient.send('/app/home.getData', this.headers)}, (err) => {// connection error handler // console.log()'failure') console.log(err) this.initwebSocket () // reconnect})},disconnect() {// Disconnectif (this.stompClient) {
        // console.log('Disconnect')
        this.stompClient.disconnect()
      }
    }
Copy the code

Knowledge class

What does sockjs-client and stompJS do

  • sockjs-client

Sockjs-client is a communication module separated from SockJS for clients. SockJS is a browser JavaScript library that provides a Web like object.SockJS provides a coherent, cross-browser JavaScriptAPI that creates a low-latency, full-duplex, cross-domain interface between the browser and the Web server Communication channel. You may ask, why don’t I just use native WebSocket instead of SockJS? This is due to the lack of WebSocket support in some browsers, so fallback options are necessary, and the Spring framework provides transparent fallback options based on SockJS. SockJS provides browser compatibility. Native WebSocket is preferred. If a browser does not support WebSocket,SockJS automatically degrades to polling.

  • stompjs

Simple Text-orientated Messaging Protocol (STOMP) is a message-oriented Simple Text Protocol. WebSocket is a messaging architecture that does not enforce any particular messaging protocol and relies on the application layer to interpret messages. Unlike HTTP,WebSocket is a very thin layer on top of TCP that converts bytes into text/binary messages. Therefore, the communication form of WebSocket is too low-level for practical applications. Therefore, STOMP can be used on top of WebSocket. To add appropriate message semantics to the communication between the browser and the server.

  • Relationship between STOMP and WebSocket
  • The HTTP protocol takes care of the details of how web browsers make requests and how Web servers respond to requests. If HTTP didn’t exist, you’d think it would be crazy to write Web applications using TCP sockets.
  • Using WebSocket(SockJS) directly is very similar to writing a Web application using TCP sockets, because without a high-level protocol, we need to define the semantics of sending messages between applications and ensure that both ends of the connection follow those semantics;
  • Just as HTTP adds a request-response model layer on TOP of TCP sockets,STOMP provides a frame-based line format layer on top of WebSocket to define message semantics.

Finally done, writing technical documentation is much harder than typing code…

Look at all the friends here, and give me a thumbs up and encouragement to contribute more to tech blogs in the future