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() イベントを使用します。これは、4 種類のイベント処理からメッセージを受信するために使用されます。

簡単な説明ですが、これだけでもサーバーから返されるデータを受け取ることができます。

ちなみに、close()メソッドを併用した場合のエンコードは以下のようになります。

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

この場合、データ受信後すぐに通信が切断されます。

このとき、close()で通信が切断されると、再度WebSocketで接続しないと通信できなくなるので注意が必要です！

以上がWebSocketを使用してデータを送受信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。