在建立web socket通訊後，傳送資料時，出現下圖所示現象:

問題程式碼演示：

function TestSockets() {
    //例項化一個WebSocket物件
    var socket = new WebSocket("ws://127.0.0.1:8000/ws");
    //宣告一個訊息
    var message = {
        nickname: "benben_2015",
        email: "[email protected]",
        content: "I love programming"
    };
    //web sockets只能通過連線傳送純文字資料，所以對於複雜的資料結構，在通過連線傳送之前，必須進行序列化。
    socket.send(JSON.stringify(message));
}
 

問題原因:

通常在例項化一個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: "
 
[email protected]",
        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: "
 
[email protected]",
        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: "[email protected]",
            content: "I love programming"
        };
        message = JSON.stringify(message);
        socket.send(message);
    };
}

https://developer.mozilla.org/en-US/docs/Web/API/WebSocket