鍍金池/ 問答/HTML/ 我在vue中使用了這個示例的代碼創(chuàng)建websocket,但是經(jīng)常在刷新的事情出現(xiàn)

我在vue中使用了這個示例的代碼創(chuàng)建websocket,但是經(jīng)常在刷新的事情出現(xiàn)錯誤

vue 如何使用websocket

<script>
    export default {
        data() {
            return {
                websock: null,
            }
        },
        methods: {
            threadPoxi(){  // 實(shí)際調(diào)用的方法
                //參數(shù)
                const agentData = "mymessage";
                //若是ws開啟狀態(tài)
                if (this.websock.readyState === this.websock.OPEN) {
                    this.websocketsend(agentData)
                }
                // 若是 正在開啟狀態(tài),則等待300毫秒
                else if (this.websock.readyState === this.websock.CONNECTING) {
                    let that = this;//保存當(dāng)前對象this
                    setTimeout(function () {
                        that.websocketsend(agentData)
                    }, 300);
                }
                // 若未開啟 ,則等待500毫秒
                else {
                    this.initWebSocket();
                    let that = this;//保存當(dāng)前對象this
                    setTimeout(function () {
                        that.websocketsend(agentData)
                    }, 500);
                }
            },
            initWebSocket(){ //初始化weosocket
                //ws地址
                const wsuri = process.env.WS_API + "/websocket/threadsocket";
                this.websock = new WebSocket(wsuri);
                this.websock.onmessage = this.websocketonmessage;
                this.websock.onclose = this.websocketclose;
            },
            websocketonmessage(e){ //數(shù)據(jù)接收
                const redata = JSON.parse(e.data);
                console.log(redata.value);
            },
            websocketsend(agentData){//數(shù)據(jù)發(fā)送
                this.websock.send(agentData);
            },
            websocketclose(e){  //關(guān)閉
                console.log("connection closed (" + e.code + ")");
            }
        },
        created(){
            this.initWebSocket()
        }
    }
</script>

我在網(wǎng)上看到這篇文章介紹如何在vue中使用websocket,使用他的代碼,能夠成功創(chuàng)建websocket服務(wù),但是經(jīng)常會出現(xiàn)在刷新頁面的時候報(bào)錯如下錯誤
圖片描述

Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.

我猜測是這一段setTimeout()執(zhí)行的時候readyState依然沒有打開的狀態(tài),我試著把時間設(shè)置長一點(diǎn)好像出現(xiàn)的概率小了很多,但是這似乎不是一個好的解決方案

// 若是 正在開啟狀態(tài),則等待300毫秒
                else if (this.websock.readyState === this.websock.CONNECTING) {
                    let that = this;//保存當(dāng)前對象this
                    setTimeout(function () {
                        that.websocketsend(agentData)
                    }, 300);
                }
                // 若未開啟 ,則等待500毫秒
                else {
                    this.initWebSocket();
                    let that = this;//保存當(dāng)前對象this
                    setTimeout(function () {
                        that.websocketsend(agentData)
                    }, 500);
                }
回答
編輯回答
浪蕩不羈

原網(wǎng)址需要登錄,進(jìn)不去。
CONNECTING的時候連接還沒開啟。改為OPEN。然后這里else要干嘛?

https://developer.mozilla.org...

2017年2月25日 08:37