我在vue中使用了这个示例的代码创建websocket,但是经常在刷新的事情出现错误

vue 如何使用websocket

<script>
    export default {
        data() {
            return {
                websock: null,
            }
        },
        methods: {
            threadPoxi(){  // 实际调用的方法
                //参数
                const agentData = "mymessage";
                //若是ws开启状态
                if (this.websock.readyState === this.websock.OPEN) {
                    this.websocketsend(agentData)
                }
                // 若是 正在开启状态,则等待300毫秒
                else if (this.websock.readyState === this.websock.CONNECTING) {
                    let that = this;//保存当前对象this
                    setTimeout(function () {
                        that.websocketsend(agentData)
                    }, 300);
                }
                // 若未开启 ,则等待500毫秒
                else {
                    this.initWebSocket();
                    let that = this;//保存当前对象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){ //数据接收
                const redata = JSON.parse(e.data);
                console.log(redata.value);
            },
            websocketsend(agentData){//数据发送
                this.websock.send(agentData);
            },
            websocketclose(e){  //关闭
                console.log("connection closed (" + e.code + ")");
            }
        },
        created(){
            this.initWebSocket()
        }
    }
</script>

我在网上看到这篇文章介绍如何在vue中使用websocket,使用他的代码,能够成功创建websocket服务,但是经常会出现在刷新页面的时候报错如下错误
图片描述

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

我猜测是这一段setTimeout()执行的时候readyState依然没有打开的状态,我试着把时间设置长一点好像出现的概率小了很多,但是这似乎不是一个好的解决方案

// 若是 正在开启状态,则等待300毫秒
                else if (this.websock.readyState === this.websock.CONNECTING) {
                    let that = this;//保存当前对象this
                    setTimeout(function () {
                        that.websocketsend(agentData)
                    }, 300);
                }
                // 若未开启 ,则等待500毫秒
                else {
                    this.initWebSocket();
                    let that = this;//保存当前对象this
                    setTimeout(function () {
                        that.websocketsend(agentData)
                    }, 500);
                }
阅读 3.7k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题