Front end Vue

• Using constructors to build Websocket objects

WebSocket(url[, protocols])

• The callback functions of the object are:

WebSocket.onclose

Used to specify the callback function after the connection is closed.

WebSocket.onerror

Used to specify the callback function after a connection failure.

WebSocket.onmessage

Specifies the callback function when information is received from the server.

WebSocket.onopen

Used to specify the callback function after a successful connection.

• The methods are as follows:
  Close current connection

 WebSocket.close([code[, reason]])

send data

 WebSocket.send(data)

Example:

  data() {
    return {
    
      websock: null,
      websocketUrl: "ws://localhost:8080/webSocketServer/"+this.$store.state.userTel,
      
    };
  },
  
 
  methods: {
    

    initWebSocket() {
      //Initialize weosocket
      this.websock = new WebSocket(this.websocketUrl);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    //Here are the callback functions
    websocketonopen() {
      //Execute the send method to send data after the connection is established
      console.log("Connection successful");
    },
    websocketonerror() {
      //Connection establishment failed reconnect
      console.log("Connection failed reconnect");
      this.initWebSocket();
    },
    //Accept data
    websocketonmessage(e) {
      console.log("Accept data");
      let data = JSON.parse(e.data);
      console.log(data);
    },

    //Two methods
    websocketsend(message) {
      //Data transmission
      let data = {
        "message": "hello world"
      };
      this.websock.send(JSON.stringify(data));
    },
    websocketclose() {
      console.log("Disconnect");
    },
    created() {
      this.initWebSocket();
    },
    destroyed() {
      this.websock.close(); //Disconnect websocket after leaving the route
    }  

Back end SpringBoot

In the WebSocket application, the server publishes a WebSocket endpoint, and the client uses the URI of the endpoint to connect to the server. After the connection is established, the server and the client can send messages at any time when the connection is opened. The client usually only connects to one server, and a server accepts connections from multiple clients
WebSocket protocol has two parts: handshake and data transmission
WebSocket URL format: ws://host:port/path?query

• Creating WebSocket s with annotations
• send message
  • 1. Get the Session object from the connection
  • 2. Use Session object to get RemoteEndpoint object
  • 3. Use RemoteEndpoint object to send messages to the other party
• Send messages to all connecting parties
  Get all connected sessions and return Set
  This allows you to use traversal to send messages to each session object

session.getOpenSessions()

• receive messages
  Use @ OnMessage annotation to receive messages. Each @ ServerEndpoint class can have at most three @ OnMessage annotation methods, namely:

@ServerEndpoint("/receive")
public class ReceiveEndpoint {
   @OnMessage
   public void textMessage(Session session, String msg) {
      System.out.println("Text message: " + msg);
   }
   @OnMessage
   public void binaryMessage(Session session, ByteBuffer msg) {
      System.out.println("Binary message: " + msg.toString());
   }
   @OnMessage
   public void pongMessage(Session session, PongMessage msg) {
      System.out.println("Pong message: " + 
                          msg.getApplicationData().toString());
   }
}

encoder

• Implementation interface
  • Encoder.Text for text messages
  • Encoder.Binary for binary messages
• Add the encoder name to the optional parameter encoders in @ ServerEndpoint
• Using sendObject(Object data) to send messages

decoder

• Implementation interface
• Add the encoder name to the optional parameter decoders in @ ServerEndpoint
• Methods using @ OnMessage can use custom Java objects as parameters

Only make records, and improve after more understanding
Recommended blog:
https://blog.csdn.net/moshowgame/article/details/80275084

Reference website

https://docs.oracle.com/javaee/7/tutorial/websocket001.htm