Vue で webSocket を使用してリアルタイムの天気を更新する方法

var Socket = new webSocket(url, [プロトコル] );

関数webSocketTest() {
    if ("webSocket" がウィンドウ内にある){
        alert("お使いのブラウザはwebSocketをサポートしています!");
        // WebSocketを開く
        var ws = new webSocket("ws://localhost:8080/test");
        ws.onopen = 関数() {
            // WebSocket が接続されたら、send() メソッドを使用してデータを送信します ws.send("send data");
            console.log("データを送信しています...");
        };
        
        ws.onmessage = 関数 (evt) { 
            // 受信したデータ var data = evt.data;
            console.log("データを受信しました...");
        };

        ws.onerror = 関数（）{
            // 接続エラー console.log('接続エラー...');
        }

        ws.onclose = 関数() { 
            // WebSocketを閉じる
            console.log("接続が閉じられました..."); 
        };
    } それ以外 {
        // ブラウザはwebSocketをサポートしていません
        alert("お使いのブラウザはwebSocketをサポートしていません!");
    }
}

<!-- レイアウトに使用される要素。そのまま使用してください -->
<el-popover
        配置="下"
        :title="天気.title"
        トリガー="ホバー"
        :content="天気.cont">
    <div スロット="reference" クラス="天気">
        <img :src="天気.url" alt="">
    </div>
</el-popover>

エクスポートデフォルト{
        データ（） {
            戻る {
                天気：
                    都市名: ''、
                    タイトル: '-- 市 / --℃',
                    続き: '--',
                    天気コード: '0',
                    URL: ''
                }
            }
        },
        メソッド: {
            // 天気を取得する async getTheWeather() {
                // まず、インターフェースを通じて現在の天気状況を要求します。let res = await this.$Http.getWeather({});
                （res.code === 200）の場合{
                    // ここで、インターフェースで取得した天気データを weather in data に格納します...

                    //次に、WebSocket を開いてリアルタイムで受信します。this.connectWebSocket();
                }
            },
            //ウェブソケット
            WebSocket() を接続する{
                _this = this とします。
                if (ウィンドウ内に「WebSocket」がある場合) {
                    console.log("お使いのブラウザはWebSocketをサポートしています!");
                    // WebSocketを開く
                    let url ='xxxxxxxxxxx'; // データプッシュ用のアドレスを提供します let ws = new webSocket(`ws://${url}`);
                    // 接続成功 ws.onopen = function () {
                        // Web Socket が接続されたら、send() メソッドを使用してデータを送信します ws.send("これは送信されたテスト データです");
                        console.log('接続に成功しました');
                    };
                    // 処理のためにデータを受信 ws.onmessage = function (evt) {
                        received_msg = evt.data とします。
                        // ここで、天気データをデータに入れると、天気が更新されます...
                    };
                    // 接続エラー ws.onerror = function () {
                        console.log('接続エラー...');
                    }
                    // 接続が閉じられました ws.onclose = function () {
                        // Webソケットを閉じる
                        console.log("接続が閉じられました...");
                    }
                } それ以外 {
                    // ブラウザはWebSocketをサポートしていません
                    console.log("お使いのブラウザはWebSocketをサポートしていません!");
                }
            },

        },
        マウント() {
            // ローカル天気を取得します this.getTheWeather();
        }
    }

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

// インポート import ReconnectingWebSocket from '@/util/ReconnectingWebSocket';

エクスポートデフォルト{
    データ（） {
        戻る {
            ...
        }
    },
    メソッド: {
        ...
        WebSocket() を接続する {
            _this = this とします。
                if (ウィンドウ内に「WebSocket」がある場合) {
                    console.log("お使いのブラウザはWebSocketをサポートしています!");
                    // WebSocketを開く
                    let url ='xxxxxxxxxxx'; // データプッシュ用のアドレスを提供します - let ws = new webSocket(`ws://${url}`); // 破棄します + let ws = new ReconnectingWebSocket(`ws://${url}`); // これに変更します // 接続が成功しました ws.onopen = function () {
                        // Web Socket が接続されたら、send() メソッドを使用してデータを送信します ws.send("これは送信されたテスト データです");
                        console.log('接続に成功しました');
                    };
                    // 処理のためにデータを受信 ws.onmessage = function (evt) {
                        ...
                    };
                    // 接続エラー ws.onerror = function () {
                        console.log('接続エラー...');
                    }
                    // 接続が閉じられました ws.onclose = function () {
                        // Webソケットを閉じる
                        console.log("接続が閉じられました...");
                    }
                } それ以外 {
                    // ブラウザはWebSocketをサポートしていません
                    console.log("お使いのブラウザはWebSocketをサポートしていません!");
                }
        }
    }
}