Real-time refresh of long connection on Vue+WebSocket page

<template>
    <div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                websock: null,
            }
        },
    created(){
           //Open a long connection when the page is just entered this.initWebSocket()
       },
    destroyed: function() {
    //Close the long connection when the page is destroyed this.websocketclose();
    },
    methods: { 
      initWebSocket(){ //Initialize weosocket 
　
              const wsuri = process.env.WS_API + "/websocket/threadsocket"; //ws address this.websock = new WebSocket(wsuri); 
        this.websocket.onopen = this.websocketonopen;

        this.websocket.onerror = this.websocketonerror;

        this.websock.onmessage = this.websocketonmessage; 
        this.websock.onclose = this.websocketclose;
    }, 

      websocketonopen() {
        console.log("WebSocket connection successful");
      },
      websocketonerror(e) { //Error console.log("WebSocket connection error");
      },
      websocketonmessage(e){ //Data reception const redata = JSON.parse(e.data);
         //Note: For long connection, we push one piece of data per second directly in the background. 
          //But when you click on a list, an identifier will be sent to the backend, and the backend will return the corresponding data based on this identifier.
      //At this time, data can only be sent out from one exit, so a key is added to the background. For example, when the key is 1, data is pushed every 1 second, and when it is 2, data is pushed after sending the mark, for distinction console.log(redata.value); 
      }, 

      websocketsend(agentData){//data sending this.websock.send(agentData); 
      }, 

     websocketclose(e){ //Close console.log("connection closed (" + e.code + ")"); 
     },
   }, 
  }
 </script>