WebSocket is used in Vue

This is the 12th day of my participation in the August More Text Challenge. For details, see:August is more challenging

1. Introduction of WebSocket

The most common interaction pattern between the front end and the back end is that the front end sends a data request, gets the data from the back end and presents it to the page.

If the front end does not perform operations, the back end cannot actively push data to the forward end, which is also a drawback of HTTP.

A new communication protocol WebSocket emerged, its biggest characteristic is that the server can take the initiative to push the message to the client, the client can also take the initiative to send the message to the server, to achieve the true equality.

WebSocket other features:

1. Based on TCP protocol, the implementation of the server side is relatively easy;
2. Good compatibility with HTTP protocol;

The default ports are also 80 and 443, and the handshake phase uses THE HTTP protocol, so it is not easy to mask the handshake and can pass through various HTTP proxy servers.

3. The data format is relatively light, the performance overhead is small, the communication is efficient;
4. You can send text, you can send binary data;
5. Without the same origin restriction, the client can communicate with any server;
6. The protocol identifier is WS (or WSS if encrypted), and the server URL is the URL;

2. Use WebSocket in Vue

2.1 Using WebSocket in VUE note items

1. Determine whether the browser supports WebSocket;

Portal: Resolves WebSocket compatibility issues

2. The websocket is connected when the component is loaded and disconnected when the component is destroyed.
3. The socket module must be introduced into the back-end interface; otherwise, the connection cannot be realized.

2.2 Complete Code

<template>
  <div class="test">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        websock: null,}},methods: {
      // Initialize weosocket
      initWebSocket(){ 
        if(typeof(WebSocket) === "undefined") {console.log("Your browser does not support WebSocket")}else{
          const wsurl = Ws: / / 127.0.0.1:8080 "";
          // Instantiate WebSocket
          this.websock = new WebSocket(wsurl);
          // Listen for WebSocket connections
          this.websock.onopen = this.websocketonopen;
          // Listen for WebSocket error messages
          this.websock.onerror = this.websocketonerror;
          // Listen for WebSocket messages
          this.websock.onmessage = this.websocketonmessage;
        
          this.websock.onclose = this.websocketclose; }},// After the connection is established, execute the send method to send data
      websocketonopen(){
        console.log("Socket connection successful")
        let actions = {"test":"12345"};
        this.websocketsend(JSON.stringify(actions));
      },
      // Reconnect after the connection fails to be established
      websocketonerror(){
        console.log("Connection error");
        this.initWebSocket();
      },
      // Receive data
      websocketonmessage(e){
        const resdata = JSON.parse(e.data);
        console.log(resdata);
      },
      // Send data
      websocketsend(Data){
        this.websock.send(Data);
      },
      / / close
      websocketclose(e){
        console.log('WebSocket disconnected ',e); }},beforeMount() {
      this.initWebSocket();
    },
    destroyed() {
      // Disconnect the WebSocket connection after leaving the route
      this.websock.close(); }},</script>
Copy the code