首頁 > web前端 > js教程 > 如何使用WebSocket發送和接收數據

如何使用WebSocket發送和接收數據

不言
發布: 2019-01-14 17:33:12
原創
13179 人瀏覽過

WebSocket是一種允許透過保持伺服器端和用戶端始終連接來進行雙向通訊的技術,所以WebSocket既可以發送資料也可以接收數據,本篇文章我們就來看看如何使用WebSocket發送和接收資料。

如何使用WebSocket發送和接收數據

我們先來看看如何傳送文字資料?

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

#具體示例如下

var connection = new WebSocket('wss://echo.websocket.org');
 
connection.send('样本数据');
登入後複製

在此範例中,以看到正在建立WebSocket實例並使用send()方法傳送資料。

但是,通常應該在任意時間傳輸資料。

因此,如果要透過點擊按鈕發送在表單中輸入的數據,可以如下編寫。

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

在這個例子中,我們得到輸入表單的字串並將其應用於send()的參數。

這樣,您就可以傳送任意文字資料。

如何接收文字資料?

這次使用的測試伺服器的Echo.websocket.org將原樣傳回傳輸的資料。

程式碼如下

connection.onmessage = function(e) {
    console.log(e.data);
};
登入後複製

我們使用onmessage()事件,該事件用於接收來自四種類型的事件處理的訊息。

雖然這是一個簡單的描述,但僅此一項就可以接收從伺服器傳回的資料。

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

connection.onmessage = function(e) {
    console.log(e.data);
    connection.close();
};
登入後複製

在這種情況下,在收到資料後立即斷開通訊。

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

以上是如何使用WebSocket發送和接收數據的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板