How to use webSocket to update real-time weather in Vue

var Socket = new webSocket(url, [protocol] );

function webSocketTest() {
    if ("webSocket" in window){
        alert("Your browser supports webSocket!");
        // Open a webSocket
        var ws = new webSocket("ws://localhost:8080/test");
        ws.onopen = function() {
            // WebSocket is connected, use the send() method to send data ws.send("send data");
            console.log("Data is being sent...");
        };
        
        ws.onmessage = function (evt) { 
            // Received data var data = evt.data;
            console.log("Data received...");
        };

        ws.onerror = function () {
            // Connection error console.log('Connection error...');
        }

        ws.onclose = function() { 
            // Close the webSocket
            console.log("Connection closed..."); 
        };
    } else {
        // The browser does not support webSocket
        alert("Your browser does not support webSocket!");
    }
}

<!-- Element used for layout, just use it directly -->
<el-popover
        placement="bottom"
        :title="weather.title"
        trigger="hover"
        :content="weather.cont">
    <div slot="reference" class="weather">
        <img :src="weather.url" alt="">
    </div>
</el-popover>

export default {
        data() {
            return {
                weather:
                    cityName: '',
                    title: '-- City / --℃',
                    cont: '--',
                    weatherCode: '0',
                    url: ''
                }
            }
        },
        methods: {
            // Get the weather async getTheWeather() {
                // First request the current weather conditions through the interface let res = await this.$Http.getWeather({});
                if(res.code === 200) {
                    // Here, put the weather data obtained by the interface into weather in data...

                    //Then open the websocket to receive in real time this.connectWebSocket();
                }
            },
            //websocket
            connectWebSocket () {
                let _this = this;
                if ("WebSocket" in window) {
                    console.log("Your browser supports WebSocket!");
                    // Open a webSocket
                    let url ='xxxxxxxxxxx'; // Provide you with the address for data push let ws = new webSocket(`ws://${url}`);
                    // Connection successful ws.onopen = function () {
                        // Web Socket is connected, use the send() method to send data ws.send("This is the test data sent");
                        console.log('Connection successful');
                    };
                    // Receive data for processing ws.onmessage = function (evt) {
                        let received_msg = evt.data;
                        // Here, put the weather data into data, and then the weather is updated...
                    };
                    // Connection error ws.onerror = function () {
                        console.log('Connection error...');
                    }
                    // Connection closed ws.onclose = function () {
                        // Close the websocket
                        console.log("Connection closed...");
                    }
                } else {
                    // The browser does not support WebSocket
                    console.log("Your browser does not support WebSocket!");
                }
            },

        },
        mounted() {
            // Get the local weather this.getTheWeather();
        }
    }

this.weather.url = require(`@/assets/img/weather/${weatherInfo.weatherCode}@2x.png`);

// Import import ReconnectingWebSocket from '@/util/ReconnectingWebSocket';

export default {
    data() {
        return {
            ...
        }
    },
    methods: {
        ...
        connectWebSocket() {
            let _this = this;
                if ("WebSocket" in window) {
                    console.log("Your browser supports WebSocket!");
                    // Open a webSocket
                    let url ='xxxxxxxxxxx'; // Provide you with the address for data push - let ws = new webSocket(`ws://${url}`); // Throw away + let ws = new ReconnectingWebSocket(`ws://${url}`); // Change to this // Connection successful ws.onopen = function () {
                        // Web Socket is connected, use the send() method to send data ws.send("This is the test data sent");
                        console.log('Connection successful');
                    };
                    // Receive data for processing ws.onmessage = function (evt) {
                        ...
                    };
                    // Connection error ws.onerror = function () {
                        console.log('Connection error...');
                    }
                    // Connection closed ws.onclose = function () {
                        // Close the websocket
                        console.log("Connection closed...");
                    }
                } else {
                    // The browser does not support WebSocket
                    console.log("Your browser does not support WebSocket!");
                }
        }
    }
}