websocket通信failed to execute 'send'问题的解决

在建立web socket通信后,发送数据时,出现下图所示现象:
websocket error

问题代码演示

function TestSockets() {
    //实例化一个WebSocket对象
    var socket = new WebSocket("ws://127.0.0.1:8000/ws");
    //声明一个消息
    var message = {
        nickname: "benben_2015",
        email: "123456@qq.com",
        content: "I love programming"
    };
    //web sockets只能通过连接发送纯文本数据,所以对于复杂的数据结构,在通过连接发送之前,必须进行序列化。
    socket.send(JSON.stringify(message));
}

要明白这个问题产生的原因,就需要了解websocket的几个状态。通常在实例化一个websocket对象之后,客户端就会与服务器进行连接。但是连接的状态是不确定的,于是用readyState属性来进行标识。它有四个值,分别对应不同的状态:

  • CONNECTING:值为0,表示正在连接;
  • OPEN:值为1,表示连接成功,可以通信了;
  • CLOSING:值为2,表示连接正在关闭;
  • CLOSED:值为3,表示连接已经关闭,或者打开连接失败。

这样问题的原因就很明显了,之所以数据不能发送出去,是因为websocket还处在“CONNECTING”状态下,连接还没有成功。

解决办法

只要在函数中添加对状态的判断,在状态为OPEN时,执行send方法即可。方法一代码如下:

function TestSockets() {
    var socket = new WebSocket("ws://127.0.0.1:8000/ws");
    var message = {
        nickname: "benben_2015",
        email: "123456@qq.com",
        content: "I love programming"
    };
    //添加状态判断,当为OPEN时,发送消息
    if (socket.readyState===1) {
        socket.send(JSON.stringify(message));
    }else{
        //do something
    }
}

也可以设置事件监听,当为OPEN时,执行send操作。方案二代码如下:

function TestSockets() {
    var socket = new WebSocket("ws://127.0.0.1:8000/ws");
    var message = {
        nickname: "benben_2015",
        email: "123456@qq.com",
        content: "I love programming"
    };
    message = JSON.stringify(message);
    //添加事件监听
    socket.addEventListener('open', function () {
        socket.send(message)
    });
}

实例对象websocket的onopen属性,可以用来指定连接成功后的回调函数。方案三代码如下:

function TestSockets() {
    var socket = new WebSocket("ws://127.0.0.1:8000/ws");
    //设置连接成功后的回调函数
    socket.onopen=function () {
        console.log("socket has been opened");
        var message = {
            nickname: "benben_2015",
            email: "123456@qq.com",
            content: "I love programming"
        };
        message = JSON.stringify(message);
        socket.send(message);
    };
}

参阅文章:WebSocket-Web APIs |MDN

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:酷酷鲨 设计师:CSDN官方博客 返回首页
评论 6

打赏作者

benben_2015

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值