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