vueはwebSocketを使ってリアルタイムの天気を更新する方法です。

8457 ワード

vue webSocket リアルタイムの天気

前言
vueではwebSocketを使って簡単な天気更新モジュールを作っています。

webSocketの操作及び例について：
1.webSocket接続
在这里插入图片描述

2.受信データ

3.重連結機構

webSocket
1.webSocketについて
webSocketは、HTML 5が提供を開始する単一のTCP接続上で全二重通信を行うプロトコルである。ブラウザはJavaScriptを通じてサーバーにwebSocket接続の確立を要求しています。接続が確立されたら、クライアントとサーバ端はTCP接続で直接データを交換できます。
Webソケット接続を取得すると、send(send)方式でサーバにデータを送信し、オンラインメッセージイベントでサーバから返信されたデータを受信することができます。

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

protocolは任意で、受け入れ可能なサブプロトコルを指定しています。
2.AJAX輪との違い
現在、多くのサイトでは、プッシュ技術を実現するために、Ajaxポーリングを使用しています。ポーリングは、特定の時間間隔（例えば、1秒毎）で、ブラウザからサーバにHTTP要求を送信し、サーバから最新のデータをクライアントのブラウザに返信するものである。このような従来のモードは、ブラウザがサーバに要求を継続する必要があるという明白な欠点をもたらしているが、HTTP要求は、長いヘッダを含んでいる可能性があり、その中で、本当に有効なデータは小さい部分だけかもしれない。これは明らかに多くの帯域幅などのリソースを浪費することになる。
HTML 5で定義されたwebSocketプロトコルは、サーバリソースと帯域幅をよりよく節約し、よりリアルタイムに通信することができる。
在这里插入图片描述

3.webSocket事件
在这里插入图片描述

4.簡単な例
上記の簡単な紹介を通して、webSocketの実例を作成してみます。


function webSocketTest() {
    if ("webSocket" in window){
        alert("        webSocket!");
        //      webSocket
        var ws = new webSocket("ws://localhost:8080/test");
        ws.onopen = function() {
            // webSocket     ，   send()       
            ws.send("    ");
            console.log("     ...");
        };
        
        ws.onmessage = function (evt) { 
            //       
            var data = evt.data;
            console.log("     ...");
        };

        ws.onerror = function () {
            //     
            console.log('    ...');
        }

        ws.onclose = function() { 
            //    webSocket
            console.log("     ..."); 
        };
    } else {
        //        webSocket
        alert("         webSocket!");
    }
}

実はwebSocketの使い方は簡単です。
1.ブラウザがwebSocketをサポートしているかどうかを判断する。
2.webSocketの例を作成する。
3.webSocketイベントを羅列し、対応するイベントで対応業務を処理すればいいです。
vueでの使い方は同じです。
天気が変わる
ここでは前に述べた天気のリアルタイム更新効果を示します。プロジェクトのフレームはvue\elementです。
ベースコード


<!--       element，       -->
<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: '-- ／--℃',
                    cont: '--',
                    weatherCode: '0',
                    url: ''
                }
            }
        },
        methods: {
            //     
            async getTheWeather() {
                //                
                let res = await this.$Http.getWeather({});
                if(res.code === 200) {
                    //                 data    weather    
                    ...

                    //      websocket     
                    this.connectWebSocket();
                }
            },
            // websocket
            connectWebSocket (){
                let _this = this;
                if ("WebSocket" in window) {
                    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) {
                        let received_msg = evt.data;
                        //           data，        
                        ...
                    };
                    //     
                    ws.onerror = function () {
                        console.log('    ...');
                    }
                    //     
                    ws.onclose = function () {
                        //    websocket
                        console.log("     ...");
                    }
                } else {
                    //        WebSocket
                    console.log("         WebSocket!");
                }
            },

        },
        mounted() {
            //       
            this.getTheWeather();
        }
    }

画像の素材
天気図の情報はバックエンドと天気コードの値を相談したほうがいいです。これで直接値を取って交換すればいいです。
在这里插入图片描述

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

再結合機構
最後に，重結合機構を紹介した。
簡単な再接続機構で、setTimeoutを直接使用すればいいです。接続エラー/接続がオフになった時、タイマーを使って、connectWebSocket方法を再実行して再接続すればいいです。しかし、このような操作には複数の問題があるかもしれませんので、よりエレガントなプラグインを見つけて再接続します。
ReconnectingWebsocketとは、接続が切断されたときに、接続が再開されるまで、重篤なメカニズムを持つwebSocketTestのパッケージの例である。使い方も簡単です。直接に導入して作成すればいいです。


//   
import ReconnectingWebSocket from '@/util/ReconnectingWebSocket';

export default {
    data() {
        return {
            ...
        }
    },
    methods: {
        ...
        connectWebSocket() {
            let _this = this;
                if ("WebSocket" in window) {
                    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 () {
                        //    websocket
                        console.log("     ...");
                    }
                } else {
                    //        WebSocket
                    console.log("         WebSocket!");
                }
        }
    }
}

ReconnectingWebsocketは単一のJSファイルで、ネットで検索すればいいです。
以上で、webSocketを使ってリアルタイムの天気を更新する方法についての記事を紹介しました。もっと関連したvue webSocketでリアルタイムの気象内容を更新します。以前の文章を検索してください。または下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。