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

在创建web socket通讯后，发送数据时，出现下图所示现象:

问题代码演示

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