十八 vue全域性使用WebSocket

2022-07-20 12:39:09 字數 1726 閱讀 2657

首先就是網上的寫法有很多但是 都是需要建立乙個物件進行相關的狀態**,有的是需要建立乙個初始化方法進行相關的狀態**,然後看的我就一句話 都挺好的,反正就是需要你去建立物件接收傳送訊息,然後我就在這寫乙個全域性的使用的,因為我覺得大部分就是作為訊息推送來用所以全域性來用蠻好的。

websocket是什麼:

首先是是基於tcp的 全雙工 通訊的協議 然後就是websoket是通過客戶端向伺服器建立連線,保持客戶端和伺服器端雙向的通訊的過程。相互收發訊息

1>readystate屬性返回例項物件的當前狀態。共四種:

connecting:值為0,表示正在連線。

open:值為1,表示連線成功,可以通訊了。

closing:值為2,表示連線正在關閉。

closed:值為3,表示連線已經關閉,或者開啟連線失敗。

2> onopen: 例項物件的onpen屬性,用於指定連線成功後的**函式。

3>onclose: 例項物件的onclose屬性,用於指定連線關閉後的**函式。

4>onmessage: 例項物件的onmessage屬性,用於指定收到伺服器 資料後的**函式。

5>send:例項物件的send()方法用於向伺服器傳送資料

具體使用:

1>首先建立乙個全域性檔案: 在main.js 裡面進行引入

// global.js 檔案

export default ,

setws: function(newws)

}

// main.js 檔案

import global from './xx/global.js'

vue.prototype.global = global

oncerate()

methods();

that.ws.onclose = function () , 2000);

};} else

},}3>然後就可以在其他頁面進行資料互動( 看**就能看出來 使用全域性的物件進行資料獲取傳送)

// 傳送和接收訊息

handdlemsg(msg)

that.global.ws.onmessage = function(res) ;

}

展示效果:我沒有截圖 就是連線成功後console裡面會輸出值的 跑起來看看就知道了長連線 在長時間不傳送訊息的時候,會自動斷開。原因是運維那塊使用了nginx服務,會配置乙個時間段, 在這個時間裡,如果一直滅有資料的傳輸,連線就會在這個時間之後自動關閉。因為我們無法控制使用者什麼時候去觸發websocket訊息的推送。所以下邊

//在onopen開始之後直接進行f方法呼叫 資料資料傳送

start() `);

}}, 2 * 60 * 1000)

}

我覺得這個寫的也行

測試:可以自己寫乙個服務端進行測試

我沒寫 看別人的吧

或者 用emq 測試 就是乙個本地的執行服務

下下來跑起來 我沒試過。

記錄問題就是服務端在使用的時候 應該是需要建立服務,從而能夠保證實現和客戶端的連線,具體使用我不是很清楚 服務端應該怎麼寫 ,有個人能教你是多麼的重要 靠。

VUE全域性使用element ui元件

npm i element ui s import elementui from element ui import element ui lib theme default index.css vue.use elementui 搜尋 過程中遇到乙個bug import element ui li...

使用use註冊Vue全域性元件和全域性指令

vue中的元件和指令分為區域性元件 區域性指令和全域性元件 全域性指令。對於註冊有一定數量的全域性指令和全域性元件時,官方文件中的方法就顯得有些不夠清爽了。import eg from components eg.vue export default vue import components fr...

vue全域性使用axios的方法

在vue專案開發中,我們使用axios進行ajax請求,很多人一開始使用axios的方式,會當成vue resoure的使用方式來用,即在主入口檔案引入import vueresource from vue resource 之後,直接使用vue.use vueresource 之後即可將該外掛程式...