vue使用webSocket更新實時天氣的方法
前言
在 vue 中使用 webSocket 做一個簡單的天氣實時更新模塊。
關于 webSocket 的操作及示例：
1.webSocket 連接
2.接收數(shù)據(jù)
3.重連機制
webSocket
1.關于 webSocket
webSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協(xié)議。瀏覽器通過 JavaScript 向服務器發(fā)出建立 webSocket 連接的請求，連接建立以后，客戶端和服務器端就可以通過 TCP 連接直接交換數(shù)據(jù)。
當你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務器發(fā)送數(shù)據(jù)，并通過 onmessage 事件來接收服務器返回的數(shù)據(jù)。
var Socket = new webSocket(url, [protocol] );
protocol 是可選的，指定了可接受的子協(xié)議
2.與 AJAX 輪的區(qū)別
現(xiàn)在，很多網(wǎng)站為了實現(xiàn)推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發(fā)出HTTP請求，然后由服務器返回最新的數(shù)據(jù)給客戶端的瀏覽器。 這種傳統(tǒng)的模式帶來很 明顯的缺點，即瀏覽器需要不斷的向服務器發(fā)出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。
HTML5 定義的 webSocket 協(xié)議，能更好的節(jié)省服務器資源和帶寬，并且能夠更實時地進行通訊。
3.webSocket 事件
4. 一個簡單的示例
通過上述簡單介紹，我們來創(chuàng)建一個 webSocket 實例試一下：
function webSocketTest() {
if ("webSocket" in window){
alert("您的瀏覽器支持 webSocket!");
// 打開一個 webSocket
var ws = new webSocket("ws://localhost:8080/test");
ws.onopen = function() {
// webSocket 已連接上，使用 send() 方法發(fā)送數(shù)據(jù)
ws.send("發(fā)送數(shù)據(jù)");
console.log("數(shù)據(jù)發(fā)送中...");
};
ws.onmessage = function (evt) {
// 接收到的數(shù)據(jù)
var data = evt.data;
console.log("數(shù)據(jù)已接收...");
};
ws.onerror = function () {
// 連接報錯
console.log('連接報錯...');
}
ws.onclose = function() {
// 關閉 webSocket
console.log("連接已關閉...");
};
} else {
// 瀏覽器不支持 webSocket
alert("您的瀏覽器不支持 webSocket!");
}
}
可以看出，其實 webSocket 使用方法很簡單：
1.判斷瀏覽器是否支持 webSocket;
2.創(chuàng)建一個 webSocket 實例;
3.羅列 webSocket 事件并在相應事件中處理相應業(yè)務即可。
在vue中使用方法一樣
天氣更新
此處展示一下前面說過的天氣實時更新效果實現(xiàn)。項目框架為 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) {
// 這里將接口獲取到的天氣數(shù)據(jù)放入 data 中的 weather 中即可
...
// 然后打開 websocket 實時接收
this.connectWebSocket();
}
},
// websocket
connectWebSocket (){
let _this = this;
if ("WebSocket" in window) {
console.log("瀏覽器支持 WebSocket!");
// 打開一個 webSocket
let url ='xxxxxxxxxxx'; // 給你提供數(shù)據(jù)推送的地址
let ws = new webSocket(`ws://${url}`);
// 連接成功
ws.onopen = function () {
// Web Socket 已連接上，使用 send() 方法發(fā)送數(shù)據(jù)
ws.send("這是發(fā)送的測試數(shù)據(jù)");
console.log('連接成功');
};
// 接收數(shù)據(jù)處理
ws.onmessage = function (evt) {
let received_msg = evt.data;
// 這里將天氣數(shù)據(jù)放入 data，然后天氣就更新了
...
};
// 連接報錯
ws.onerror = function () {
console.log('連接報錯...');
}
// 連接關閉
ws.onclose = function () {
// 關閉 websocket
console.log("連接已關閉...");
}
} else {
// 瀏覽器不支持 WebSocket
console.log("您的瀏覽器不支持 WebSocket!");
}
},
},
mounted() {
// 獲取當?shù)靥鞖?
this.getTheWeather();
}
}
圖片素材
天氣圖片信息最好跟后端商量好天氣code值，這樣直接取值替換就完事了。
this.weather.url = require(`@/assets/img/weather/${weatherInfo.weatherCode}@2x.png`);
重連機制
最后，介紹一種重連機制。
簡單的重連機制，直接使用 setTimeout 即可。在連接報錯/連接關閉時，使用定時器定時去重新執(zhí)行 connectWebSocket 方法來重連即可。但是如此操作可能會存在多個問題，因此找到一種更加優(yōu)雅的插件來重連——ReconnectingWebSocket。
ReconnectingWebSocket 其實就是封裝的一個帶有重連機制的 webSocketTest 實例，當連接斷開時，會以一種友好的方式來嘗試重新連接，直到連上為止。使用方法也比較簡單，直接引入然后創(chuàng)建即可：
// 引入
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'; // 給你提供數(shù)據(jù)推送的地址
- let ws = new webSocket(`ws://${url}`); // 扔掉
+ let ws = new ReconnectingWebSocket(`ws://${url}`); // 改成這樣
// 連接成功
ws.onopen = function () {
// Web Socket 已連接上，使用 send() 方法發(fā)送數(shù)據(jù)
ws.send("這是發(fā)送的測試數(shù)據(jù)");
console.log('連接成功');
};
// 接收數(shù)據(jù)處理
ws.onmessage = function (evt) {
...
};
// 連接報錯
ws.onerror = function () {
console.log('連接報錯...');
}
// 連接關閉
ws.onclose = function () {
// 關閉 websocket
console.log("連接已關閉...");
}
} else {
// 瀏覽器不支持 WebSocket
console.log("您的瀏覽器不支持 WebSocket!");
}
}
}
}
ReconnectingWebSocket 是單個的JS文件，網(wǎng)上搜索即可。
到此這篇關于vue使用webSocket更新實時天氣的方法的文章就介紹到這了,更多相關vue webSocket更新實時天氣內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
分頁在展示數(shù)據(jù)列表的場景肯定是非常多的,一般的項目開發(fā)中,數(shù)據(jù)量特別大,一般都是后端接口直接處理分頁返回,前端直接調(diào)用即可,本文給大家介紹了vue使用elementUI組件實現(xiàn)分頁效果,需要的朋友可以參考下2023-12-12
詳解vue-cli + webpack 多頁面實例配置優(yōu)化方法
本篇文章主要介紹了詳解vue-cli + webpack 多頁面實例配置優(yōu)化方法，具有一定的參考價值，有興趣的可以了解一下2017-07-07
這篇文章主要為大家詳細介紹了vue開發(fā)實現(xiàn)評論列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue中的methods、watch、computed的區(qū)別
這篇文章主要介紹了Vue中的methods、watch、computed的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要給大家介紹了關于Vue父子之間值傳遞的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-07-07
Vue中實現(xiàn)表單地區(qū)選擇與級聯(lián)聯(lián)動示例詳解
這篇文章主要為大家介紹了Vue中實現(xiàn)表單地區(qū)選擇與級聯(lián)聯(lián)動示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要為大家詳細介紹了vue-music關于Player播放器組件的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
本文主要介紹了Vue3刷新頁面報錯404的解決方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
在本文中,我們詳細講解了Vue路由的使用方法,我們首先安裝了Vue?Router,然后創(chuàng)建了一個Vue?Router實例,并配置了路由,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了如何用vue設計一個日歷表，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下2020-12-12