vue websoket的編寫與應用
阿新 • • 發佈:2018-12-13
這段時間使用了一下websoket,抽出時間做個記錄和總結
注:js自帶websoket,不需要引入
本方法,通過按鍵觸發,事件寫在methods的方法中,通過按鈕以及destroyed週期來關閉
websocket的建立以及使用,JS(方法內程式碼,自定義方法包裹一下程式碼即可)如下
let that = this let wsuri = 'ws//192.168.1.1:8080:/baidu' // 設定要訪問的websoket路徑 that.websock = new WebSocket(wsuri) that.websock.onmessage = function(e) { console.log(e) // 列印後端返回的引數,方法也寫在這裡 } that.websock.onopen = function () { console.log('建立連線') // 連線建立成功後的提示 that.websock.send("傳送資料"); // 用於傳送給後臺驗證或呼叫的資料 } that.websock.onerror = function () { that.initWebSocket() // 用於斷開時的重連 } that.websock.onclose = function () { console.log('斷開連線') // 斷開連線的時候列印,用於提示 }
斷開連線的方法(可以改為方法,在需要斷開和銷燬元件的時候呼叫,本方法為銷燬元件時呼叫)
destroyed () {
if (this.websock) { // 判斷websockt連線物件有沒有建立
if (this.websock.readyState == 1) { // 判斷是否處於連線狀態
this.websock.close() // 斷開websockt連線
}
}
}