WebSocketの基本的な使い方

WebSocket は、Web アプリケーションでの双方向通信を可能にするプロトコルです。クライアントとサーバー間でデータを転送するための永続的な接続を提供します。以下は、フロントエンドで WebSocket を使用するための一般的なガイドラインです。

WebSocket オブジェクトを作成する: JavaScript では、new WebSocket(url)を使用して WebSocket オブジェクトを作成できます。ここで、はurlWebSocket サーバーのアドレスです。
```
const socket = new WebSocket('ws://example.com/socket');
```
イベント監視: WebSocket オブジェクトは、サーバーとの接続およびデータ交換を監視するためのいくつかのイベントを提供します。
- openイベント: サーバーへの接続が確立されるとトリガーされます。
- messageイベント: サーバーによって送信されたメッセージが受信されるとトリガーされます。
- closeイベント: 接続が閉じられたときにトリガーされます。
- errorイベント: 接続またはデータ交換中にエラーが発生するとトリガーされます。
メソッドを使用して、これらのイベントのリスナーを追加できますaddEventListener。
```
socket.addEventListener('open', () => {
      
      
  console.log('Connected to the server.');
});

socket.addEventListener('message', (event) => {
      
      
  const message = event.data;
  console.log('Received message:', message);
});

socket.addEventListener('close', () => {
      
      
  console.log('Connection closed.');
});

socket.addEventListener('error', (error) => {
      
      
  console.error('WebSocket error:', error);
});
```
データの送信: sendWebSocket オブジェクトのメソッドを使用して、サーバーにデータを送信します。
```
socket.send('Hello, server!');
```
Close Connection : closeWebSocket オブジェクトのメソッドを使用して、サーバーとの接続を閉じます。
```
socket.close();
```

これは基本的なフロントエンド WebSocket の使用ガイドであり、ニーズに応じて拡張およびカスタマイズできます。WebSocket を使用する場合は、サーバー側も WebSocket プロトコルをサポートしていることを確認し、WebSocket プロトコルの仕様に従ってデータ交換を行うようにしてください。

WebSocketの基本的な使い方

WebSocketの基本的な使い方

おすすめ