目錄前言關(guān)于 webSocket 的操作及示例：webSocket1.關(guān)于 webSocket2.與 AJAX 輪的區(qū)別3.webSocket 事件4. 一個(gè)簡(jiǎn)單的示例天氣更新圖片素材重連機(jī)制前言

在 vue 中使用 webSocket 做一個(gè)簡(jiǎn)單的天氣實(shí)時(shí)更新模塊。

關(guān)于 webSocket 的操作及示例：

1.webSocket 連接

2.接收數(shù)據(jù)

3.重連機(jī)制

webSocket1.關(guān)于 webSocket

webSocket 是 HTML5 開(kāi)始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。瀏覽器通過(guò) JavaScript 向服務(wù)器發(fā)出建立 webSocket 連接的請(qǐng)求，連接建立以后，客戶端和服務(wù)器端就可以通過(guò) TCP 連接直接交換數(shù)據(jù)。

當(dāng)你獲取 Web Socket 連接后，你可以通過(guò) send() 方法來(lái)向服務(wù)器發(fā)送數(shù)據(jù)，并通過(guò) onmessage 事件來(lái)接收服務(wù)器返回的數(shù)據(jù)。

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

protocol 是可選的，指定了可接受的子協(xié)議

2.與 AJAX 輪的區(qū)別

現(xiàn)在，很多網(wǎng)站為了實(shí)現(xiàn)推送技術(shù)，所用的技術(shù)都是 Ajax 輪詢。輪詢是在特定的的時(shí)間間隔（如每1秒），由瀏覽器對(duì)服務(wù)器發(fā)出HTTP請(qǐng)求，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。 這種傳統(tǒng)的模式帶來(lái)很 明顯的缺點(diǎn)，即瀏覽器需要不斷的向服務(wù)器發(fā)出請(qǐng)求，然而HTTP請(qǐng)求可能包含較長(zhǎng)的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會(huì)浪費(fèi)很多的帶寬等資源。

HTML5 定義的 webSocket 協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬，并且能夠更實(shí)時(shí)地進(jìn)行通訊。

3.webSocket 事件

4. 一個(gè)簡(jiǎn)單的示例

通過(guò)上述簡(jiǎn)單介紹，我們來(lái)創(chuàng)建一個(gè) webSocket 實(shí)例試一下：

function webSocketTest() { if ('webSocket' in window){alert('您的瀏覽器支持 webSocket!');// 打開(kāi)一個(gè) webSocketvar 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 () { // 連接報(bào)錯(cuò) console.log(’連接報(bào)錯(cuò)...’);}ws.onclose = function() { // 關(guān)閉 webSocket console.log('連接已關(guān)閉...'); }; } else {// 瀏覽器不支持 webSocketalert('您的瀏覽器不支持 webSocket!'); }}

可以看出，其實(shí) webSocket 使用方法很簡(jiǎn)單：

1.判斷瀏覽器是否支持 webSocket;2.創(chuàng)建一個(gè) webSocket 實(shí)例;3.羅列 webSocket 事件并在相應(yīng)事件中處理相應(yīng)業(yè)務(wù)即可。

在vue中使用方法一樣

天氣更新

此處展示一下前面說(shuō)過(guò)的天氣實(shí)時(shí)更新效果實(shí)現(xiàn)。項(xiàng)目框架為 vueelement。

基礎(chǔ)代碼

<!-- 布局 使用的element，直接使用即可 --><el-popoverplacement='bottom':title='weather.title'trigger='hover':content='weather.cont'> <div slot='reference' class='weather'><img :src='http://www.cgvv.com.cn/bcjs/weather.url' alt=''> </div></el-popover>

export default {data() { return {weather: { cityName: ’’, title: ’--市／--℃’, cont: ’--’, weatherCode: ’0’, url: ’’} }},methods: { // 獲取天氣 async getTheWeather() {// 先通過(guò)接口請(qǐng)求一次當(dāng)前天氣狀況let res = await this.$Http.getWeather({});if(res.code === 200) { // 這里將接口獲取到的天氣數(shù)據(jù)放入 data 中的 weather 中即可 ... // 然后打開(kāi) websocket 實(shí)時(shí)接收 this.connectWebSocket();} }, // websocket connectWebSocket (){let _this = this;if ('WebSocket' in window) { console.log('瀏覽器支持 WebSocket!'); // 打開(kāi)一個(gè) webSocket let url =’xxxxxxxxxxx’; // 給你提供數(shù)據(jù)推送的地址 let ws = new webSocket(`ws://${url}`); // 連接成功 ws.onopen = function () {// Web Socket 已連接上，使用 send() 方法發(fā)送數(shù)據(jù)ws.send('這是發(fā)送的測(cè)試數(shù)據(jù)');console.log(’連接成功’); }; // 接收數(shù)據(jù)處理 ws.onmessage = function (evt) {let received_msg = evt.data;// 這里將天氣數(shù)據(jù)放入 data，然后天氣就更新了... }; // 連接報(bào)錯(cuò) ws.onerror = function () {console.log(’連接報(bào)錯(cuò)...’); } // 連接關(guān)閉 ws.onclose = function () {// 關(guān)閉 websocketconsole.log('連接已關(guān)閉...'); }} else { // 瀏覽器不支持 WebSocket console.log('您的瀏覽器不支持 WebSocket!');} },},mounted() { // 獲取當(dāng)?shù)靥鞖? this.getTheWeather();} }圖片素材

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

this.weather.url = require(`@/assets/img/weather/${weatherInfo.weatherCode}@2x.png`);重連機(jī)制

最后，介紹一種重連機(jī)制。

簡(jiǎn)單的重連機(jī)制，直接使用 setTimeout 即可。在連接報(bào)錯(cuò)/連接關(guān)閉時(shí)，使用定時(shí)器定時(shí)去重新執(zhí)行 connectWebSocket 方法來(lái)重連即可。但是如此操作可能會(huì)存在多個(gè)問(wèn)題，因此找到一種更加優(yōu)雅的插件來(lái)重連——ReconnectingWebSocket。

ReconnectingWebSocket 其實(shí)就是封裝的一個(gè)帶有重連機(jī)制的 webSocketTest 實(shí)例，當(dāng)連接斷開(kāi)時(shí)，會(huì)以一種友好的方式來(lái)嘗試重新連接，直到連上為止。使用方法也比較簡(jiǎn)單，直接引入然后創(chuàng)建即可：

// 引入import ReconnectingWebSocket from ’@/util/ReconnectingWebSocket’;export default { data() {return { ...} }, methods: {...connectWebSocket() { let _this = this;if ('WebSocket' in window) { console.log('瀏覽器支持 WebSocket!'); // 打開(kāi)一個(gè) 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ā)送的測(cè)試數(shù)據(jù)');console.log(’連接成功’); }; // 接收數(shù)據(jù)處理 ws.onmessage = function (evt) {... }; // 連接報(bào)錯(cuò) ws.onerror = function () {console.log(’連接報(bào)錯(cuò)...’); } // 連接關(guān)閉 ws.onclose = function () {// 關(guān)閉 websocketconsole.log('連接已關(guān)閉...'); }} else { // 瀏覽器不支持 WebSocket console.log('您的瀏覽器不支持 WebSocket!');}} }}

ReconnectingWebSocket 是單個(gè)的JS文件，網(wǎng)上搜索即可。

到此這篇關(guān)于vue使用webSocket更新實(shí)時(shí)天氣的方法的文章就介紹到這了,更多相關(guān)vue webSocket更新實(shí)時(shí)天氣內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！