So verwenden Sie webSocket zum Aktualisieren des Echtzeitwetters in Vue

var Socket = neuer webSocket(URL, [Protokoll]);

Funktion webSocketTest() {
    if ("webSocket" im Fenster){
        alert("Ihr Browser unterstützt webSocket!");
        // Öffne einen WebSocket
        var ws = neuer webSocket("ws://localhost:8080/test");
        ws.onopen = Funktion() {
            // WebSocket ist verbunden, verwenden Sie die Methode send(), um Daten zu senden ws.send("send data");
            console.log("Daten werden gesendet...");
        };
        
        ws.onmessage = Funktion (evt) { 
            // Empfangene Daten var data = evt.data;
            console.log("Daten empfangen...");
        };

        ws.onerror = Funktion () {
            // Verbindungsfehler console.log('Verbindungsfehler...');
        }

        ws.onclose = Funktion() { 
            // Schließen Sie den WebSocket
            console.log("Verbindung geschlossen..."); 
        };
    } anders {
        // Der Browser unterstützt kein WebSocket
        alert("Ihr Browser unterstützt webSocket nicht!");
    }
}

<!-- Für das Layout verwendetes Element, einfach direkt verwenden -->
<el-popover
        Platzierung="unten"
        :title="wetter.title"
        Auslöser="schweben"
        :inhalt="wetter.cont">
    <div slot="Referenz" class="Wetter">
        <img :src="wetter.url" alt="">
    </div>
</el-popover>

Standard exportieren {
        Daten() {
            zurückkehren {
                Wetter:
                    Stadtname: '',
                    Titel: '-- Stadt / --℃',
                    Fortsetzung: '--',
                    Wettercode: '0',
                    URL: ''
                }
            }
        },
        Methoden: {
            // Das Wetter abrufen async getTheWeather() {
                // Fordern Sie zunächst die aktuellen Wetterbedingungen über die Schnittstelle an let res = await this.$Http.getWeather({});
                wenn(res.code === 200) {
                    // Hier werden die von der Schnittstelle erhaltenen Wetterdaten in „Wetter in Daten“ eingefügt …

                    //Öffnen Sie dann den WebSocket, um dies in Echtzeit zu empfangen. this.connectWebSocket();
                }
            },
            //WebSocket
            verbindeWebSocket () {
                lass _this = dies;
                if ("WebSocket" im Fenster) {
                    console.log("Ihr Browser unterstützt WebSocket!");
                    // Öffne einen WebSocket
                    let url ='xxxxxxxxxxx'; // Liefert Ihnen die Adresse für den Daten-Push let ws = new webSocket(`ws://${url}`);
                    // Verbindung erfolgreich ws.onopen = function () {
                        // Web Socket ist verbunden, verwenden Sie die Methode send(), um Daten zu senden ws.send("Dies sind die gesendeten Testdaten");
                        console.log('Verbindung erfolgreich');
                    };
                    // Daten zur Verarbeitung empfangen ws.onmessage = function (evt) {
                        Lassen Sie empfangene_Nachricht = evt.data;
                        // Hier werden die Wetterdaten in Daten eingefügt, anschließend wird das Wetter aktualisiert …
                    };
                    // Verbindungsfehler ws.onerror = function () {
                        console.log('Verbindungsfehler...');
                    }
                    // Verbindung geschlossen ws.onclose = function () {
                        // Schließen Sie den WebSocket
                        console.log("Verbindung geschlossen...");
                    }
                } anders {
                    // Der Browser unterstützt WebSocket nicht
                    console.log("Ihr Browser unterstützt WebSocket nicht!");
                }
            },

        },
        montiert() {
            // Lokales Wetter abrufen this.getTheWeather();
        }
    }

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

// Importieren Sie ReconnectingWebSocket von „@/util/ReconnectingWebSocket“;

Standard exportieren {
    Daten() {
        zurückkehren {
            ...
        }
    },
    Methoden: {
        ...
        verbindeWebSocket() {
            lass _this = dies;
                if ("WebSocket" im Fenster) {
                    console.log("Ihr Browser unterstützt WebSocket!");
                    // Öffne einen WebSocket
                    let url ='xxxxxxxxxxx'; // Gib die Adresse für den Daten-Push an - let ws = new webSocket(`ws://${url}`); // Wegwerfen + let ws = new ReconnectingWebSocket(`ws://${url}`); // Ändere dies // Verbindung erfolgreich ws.onopen = function () {
                        // Web Socket ist verbunden, verwenden Sie die Methode send(), um Daten zu senden ws.send("Dies sind die gesendeten Testdaten");
                        console.log('Verbindung erfolgreich');
                    };
                    // Daten zur Verarbeitung empfangen ws.onmessage = function (evt) {
                        ...
                    };
                    // Verbindungsfehler ws.onerror = function () {
                        console.log('Verbindungsfehler...');
                    }
                    // Verbindung geschlossen ws.onclose = function () {
                        // Schließen Sie den WebSocket
                        console.log("Verbindung geschlossen...");
                    }
                } anders {
                    // Der Browser unterstützt WebSocket nicht
                    console.log("Ihr Browser unterstützt WebSocket nicht!");
                }
        }
    }
}