1. 程式人生 > >vue websoket的編寫與應用

vue websoket的編寫與應用

這段時間使用了一下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連線
        }
    }
}