WebSocket、socket.io-client

WebSocket、socket.io-クライアント

2024-07-12

ウェブソケット

WebSocket は、単一の長期持続的 TCP 接続を介した全二重通信のチャネルを提供するネットワーク通信プロトコルです。

WebSocket を使用すると、クライアントとサーバーの間で双方向のデータ交換が可能になります。つまり、サーバーは、クライアントのリクエストを待たずに、アクティブにデータをクライアントにプッシュできます。 WebSocket 接続が確立されると、クライアントとサーバーの両方がいつでもデータを送信できるようになり、リアルタイム性と対話性が大幅に向上します。

socket.io クライアント

フロントエンドを使用する場合は、直接渡すことができますnew WebSocket使用しますが、ネイティブを使用しますWebSocket提供されている機能は比較的シンプルであり、いくつかの問題には自分で対処する必要があります。これは次の方法で利用できますsocket.io-client動作します

socket.io-client ネイティブ WebSocket API と比較して、より豊富な機能と幅広い互換性を提供するため、多くの場合、より良い選択肢となります。以下はsocket.io-client 主な利点のいくつかは次のとおりです。

互換性:
socket.io-client WebSocket をサポートしていないブラウザーでは、ロングポーリング、Flash Sockets などの他の送信方法に自動的にフォールバックし、ほぼすべての最新のブラウザーと一部の古いブラウザーで確実に動作します。
自動的に再接続する:
ネットワーク接続が中断された場合、またはサーバーが再起動された場合、socket.io-client 再接続は自動的に試行できますが、ネイティブ WebSocket では再接続ロジックを手動で処理する必要があります。
エラー処理:
socket.io-client ネットワークエラーをより適切に報告および処理するための、より完全なエラー処理メカニズムを提供します。

基本的な使い方

socket.io-client クライアント (通常はブラウザーまたは Node.js アプリケーション) 上の Socket.IO サーバーと通信するためのライブラリです。自動再接続、ハートビート検出、エラー処理、その他の機能を含む、リアルタイムの双方向通信を処理できる強力な API を提供します。

インストール

まず、インストールする必要があります socket.io-client 。プロジェクトディレクトリで次のコマンドを実行します。

npm install socket.io-client
1

インポートモジュール

JavaScript ファイルでは、ES6 モジュールのインポートメソッドを使用して、 socket.io-client：

import { io } from 'socket.io-client';
1

または、CommonJS モジュールを使用している場合は、次のようにすることもできます。

const io = require('socket.io-client');
1

ソケットインスタンスの作成

Socket インスタンスを作成するには、通常、サーバーの URL を渡す必要があります。これは、相対パス (同じドメイン名の場合) または完全 URL (クロスドメイン接続の場合) にすることができます。例えば：

const socket = io('http://localhost:3000');
const socket = io('https://yourdomain.com');
const socket = io("wss://server-domain.com");
1
2
3

イベントをリッスンする

Socket インスタンスを作成すると、接続ステータスの変更、メッセージの受信などのさまざまなイベントをリッスンできるようになります。

socket.on('connect', () => {
  console.log('Connected to server');
});

socket.on('disconnect', (reason) => {
  console.log('Disconnected from server', reason);
});

socket.on('message', (data) => {
  console.log('Received message from server', data);
});
1
2
3
4
5
6
7
8
9
10
11

データを送る

使用できます emit メソッドはイベントとデータをサーバーに送信します。

socket.emit('chat message', { message: 'Hello from the client!' });
1

切断する

ソケット接続は、接続が不要になったときに明示的に閉じることができます。

socket.disconnect();
1

完全な例

これはクライアント側での使用方法を示す完全な例です。 socket.io-client：

import { io } from 'socket.io-client';

// 创建 Socket 实例
const socket = io('http://localhost:3000');

// 监听连接事件
socket.on('connect', () => {
  console.log('Connected to server');
});

// 监听接收消息事件
socket.on('message', (data) => {
  console.log('Received message from server', data);
});

// 发送消息到服务器
socket.emit('chat message', { message: 'Hello from the client!' });

// 当组件销毁时，关闭 Socket 连接
// 如果你是在 Vue 或 React 的生命周期钩子中使用，确保在这里调用 disconnect
// 或者使用适当的事件来触发断开连接
// socket.disconnect();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

技術共有