如何使用WebSocket發(fā)送和接收數(shù)據(jù)

我們先來看一下如何發(fā)送文本數(shù)據(jù)？

使用免費提供的echo.websocket.org作為樣本

具體示例如下

var connection = new WebSocket('wss://echo.websocket.org');
 
connection.send('樣本數(shù)據(jù)');

在此示例中，以看到正在創(chuàng)建WebSocket實例并使用send()方法發(fā)送數(shù)據(jù)。

但是，通常應該在任意時間傳輸數(shù)據(jù)。

因此，如果要通過單擊按鈕發(fā)送在表單中輸入的數(shù)據(jù)，可以按如下方式編寫。

btn.addEventListener('click', function(e) {
 var text = document.getElementById('text');
 
 connection.send(text.value);
})

在這個例子中，我們得到輸入表單的字符串并將其應用于send（）的參數(shù)。

這樣，您就可以發(fā)送任意文本數(shù)據(jù)。

如何接收文本數(shù)據(jù)？

這次使用的測試服務器的Echo.websocket.org將按原樣返回傳輸?shù)臄?shù)據(jù)。

代碼如下

connection.onmessage = function(e) {
 console.log(e.data);
};

我們使用onmessage()事件，該事件用于接收來自四種類型的事件處理的消息。

雖然這是一個簡單的描述，但僅此一項就可以接收從服務器返回的數(shù)據(jù)。

順便說一下，當你一起使用close()方法時，編碼如下

connection.onmessage = function(e) {
 console.log(e.data);
 connection.close();
};

在這種情況下，在收到數(shù)據(jù)后立即斷開通信。

此時，需注意的是如果close()斷開通信，除非再次與WebSocket建立連接，否則無法通信！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com