目錄

• 前言
• 關於 webSocket 的操作及示例：
• webSocket
• 1.關於 webSocket
  
• 2.與 AJAX 輪的區別
  
• 3.webSocket 事件
  
• 4. 一個簡單的示例
  
• 天氣更新
• 圖片素材
• 重連機制

前言

在 vue 中使用 webSocket 做一個簡單的天氣實時更新模組。

關於 webSocket 的操作及示例：

1.webSocket 連線

2.接收資料

3.重連機制

webSocket

1.關於 webSocket

webSocket 是 HTML5 開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議。瀏覽器通過 javascript 向伺服器發出建立 webSocket 連線的請求，連線建立以後，客戶端和伺服器端就可以通過 TCP 連線直接交換資料。

當你獲取 Web Socket 連線後，你可以通過 send() 方法來向伺服器傳送資料，並通過 onmessage 事件來接收伺服器返回的資料。

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

protocol 是可選的，指定了可接受的子協議

2.與 AJAX 輪的區別

現在，很多網站為了實現推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對伺服器發出HTTP請求，然後由伺服器返回最新的資料給客戶端的瀏覽器。 這種傳統的模式帶來很 程式設計客棧明顯的缺點，即瀏覽器需要不斷的向伺服器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的資料可能只是很小的一部分，顯然這樣會浪費很多的頻寬等資源。

HTML5 定義的 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="vue使用webSocket更新實時天氣的方法">
    </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();
        }
    }

圖片素材

天氣圖片資訊最好跟後端商量好天氣code值，這樣直接取值替換就完事了。

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

重連機制

最後，介紹一種重連機制。

簡單的重連機制，直接使用 setTimeout 即可。在連線報錯/連線關閉時，使用定時器定時去重新執行 connectWebSocket 方法來重連即可。但是如此操作可能會存在多個問題，因此找到一種更加優雅的外掛來重連——ReconnectingWebSocket。

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 ur程式設計客棧l ='xxxxxxxxxxx'; // 給你提供資料推送的地址
-                   let ws = new webSocket(`ws://${url}`); // 扔掉
+                   let ws = new ReconnectingWebSocket(`ws://${url}`); // 改成這樣
                    // 連線成功
                  http://www.cppcns.com  ws.onopen = function () {
                        // Web Socket 已連線上，使用 send() 方法傳送資料
                        ws.send("這是傳送的測試資料");
                        console.log('連線成功');
                    };
                    // 接收資料處理
                    ws.onmessage = function (evt) {
                        ...
                    };
                    // 連線報錯
                    ws.onerror = function () {
               nRtrcb         console.log('連線報錯...');
                    }
                    // 連線關閉
                    ws.onclose = function () {
                        // 關閉 websocket
                        console.log("連線已關閉...");
                    }
                } else {
                    // 瀏覽器不支援 WebSocket
               程式設計客棧     console.log("您的瀏覽器不支援 WebSocket!");
                }
        }
    }
}

ReconnectingWebSocket 是單個的js檔案，網上搜索即可。

到此這篇關於vue使用webSocket更新實時天氣的方法的文章就介紹到這了,更多相關vue webSocket更新實時天氣內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！