WebSocket について知っておくべきこと

ウェブソケット

1. Webソケットとは何ですか? (リアルタイム + 暗号化)

WebSocket は、TCP プロトコルに基づく全二重通信プロトコルであり、クライアントとサーバーの間に永続的な接続を確立して双方向通信を実現できます。WebSocket プロトコルの利点は、リアルタイムのデータ送信を提供し、低遅延の通信効果を達成できることです。

WebSocket には、従来の HTTP プロトコルと次のような違いがあります。

接続方式: HTTP プロトコルは、クライアントがリクエストを送信し、サーバーが応答を返すとすぐに接続を切断するリクエスト/レスポンスプロトコルですが、WebSocket プロトコルは長期接続プロトコルで、クライアント間で永続的な接続が確立されます。サーバーとの接続状態を維持することができ、リアルタイムのデータ送信・通信を実現します。
データ形式: HTTP プロトコルによって送信されるデータ形式は主にテキストデータとバイナリデータですが、WebSocket プロトコルによって送信されるデータ形式にはテキストデータやバイナリデータなど、あらゆる種類のデータを含めることができます。
伝送効率: WebSocket プロトコルは長期接続プロトコルであるため、頻繁に接続を確立および切断するオーバーヘッドを回避できるため、伝送効率の点で優れたパフォーマンスを発揮します。
セキュリティ: HTTP プロトコルのデータ送信は平文で送信されるため、盗聴や改ざんが容易ですが、WebSocket プロトコルは TLS/SSL プロトコルを通じて暗号化してデータ送信のセキュリティを向上させることができます。
アプリケーションシナリオ: HTTP プロトコルは、ブラウザによる Web ページの読み込みやファイルのダウンロードなど、クライアントがサーバーに応答の取得を要求するシナリオに適しており、WebSocket プロトコルはリアルタイム通信やリアルタイム通信などのシナリオに適しています。オンラインゲーム、インスタントメッセージングなどの時間データ送信。

したがって、WebSocket プロトコルは、従来の HTTP プロトコルと比較して、リアルタイムパフォーマンス、伝送効率、セキュリティの点で優れたパフォーマンスを備えており、一部の特定のアプリケーションシナリオに適しています。

WebSocket プロトコルを使用するには、クライアントとサーバーの両方がそのプロトコルをサポートしている必要があります。通常、クライアントは JavaScript の WebSocket API を使用してサーバーとの接続を確立し、データを送信しますが、サーバーはクライアントの要求を処理してデータを送信するために WebSocket プロトコルの関連コードを実装する必要があります。一般的に使用されるサーバー側の実装には、Node.js の ws モジュールと Java の Java-WebSocket ライブラリが含まれます。

2. モノのインターネットプラットフォームで使用される webSocket の事例

WebSocket プロトコルは IoT プラットフォームで広く使用されており、次のようなケースが考えられます。

スマートホーム制御: スマートホームは IoT アプリケーションの代表的なシナリオの 1 つであり、WebSocket プロトコルを使用することで、スマート照明制御、スマートドアロック制御など、スマートホームデバイス間のリアルタイム通信とデータ送信を実現できます。
産業オートメーション制御: 産業オートメーション制御は、IoT アプリケーションのもう 1 つの典型的なシナリオです。産業オートメーションでは、WebSocket プロトコルを使用して、産業用ロボット制御、インテリジェントな倉庫管理などの機器の状態をリアルタイムで監視および制御できます。
物流監視：物流監視もIoTの重要な応用分野であり、WebSocketプロトコルを利用することで、物流輸送中の位置、温度、湿度などのデータをリアルタイムに監視することができ、物流管理の効率化と安全性の向上を実現します。
スマート農業: スマート農業は、IoT アプリケーションの新興分野であり、WebSocket プロトコルを使用することで、温室温度制御や自動灌漑システムなどの農業機器の状態をリアルタイムで監視および制御できます。

これらのケースはモノのインターネットのアプリケーションの一部にすぎませんが、実際、モノのインターネットプラットフォームにおける WebSocket プロトコルのアプリケーションシナリオは非常に豊富であり、特定のアプリケーションシナリオと要件に応じて適切な技術ソリューションを選択できます。

3. 実際の使用例

シーン:

フロントエンドはバックエンドにリクエストを送信し、一部のデバイスを制御したいことを示します。

バックエンドはデバイスにデバイスの電源をオンにする指示を送りますが、デバイスからバックエンドまでの時間が長すぎるため、この時点でデバイスがバックエンドに戻ってからフロントエンドに戻ると、デバイスの待ち時間が長くなってしまいます。フロントエンドは非常に長くなります、長いです。

解決：

1. 非同期呼び出し:

非同期呼び出しを使用して、デバイスからの応答を処理できます。バックエンドはデバイスにコマンドを送信した後、すぐにフロントエンドに応答を返すことができ、同時に非同期タスクを開始してデバイスからの応答を待つことができます。デバイスが応答すると、非同期タスクは即座に応答を処理し、結果をフロントエンドに返します。

短所: 非同期呼び出しを使用すると、フロントエンドに応答を返すため、フロントエンドはデバイスが制御されていると判断し、デバイスの現在のステータスを取得してしまいます。デバイスのステータスが更新されたため、データエラーが発生しました。

最適化スキーム: この状況を回避するために、フロントエンドとバックエンドの間に長い接続を確立して、リアルタイム通信とデータ送信を実現します。

WebSocketプロトコルを利用することで、クライアントとサーバー間のリアルタイム通信やデータ送信が実現でき、データエラーの問題を回避できます。さらに、WebSocket によりアプリケーションのリアルタイム性と応答速度も向上し、ユーザーエクスペリエンスが向上します。

フロントエンドは WebSocket 接続を確立します。フロントエンドコードは JavaScript の WebSocket API を使用してバックエンドとの WebSocket 接続を確立し、クライアントとサーバー間のリアルタイム通信を実現できます。
バックエンドはコマンドをデバイスに送信します。バックエンドはコマンドをデバイスに送信し、非同期タスクを開始してデバイスからの応答を待ちます。
デバイス側はステータス更新をバックエンドに送信します。デバイス側はステータス更新をバックエンドに送信し、バックエンドはステータス更新をフロントエンドに転送し、フロントエンドは WebSocket を通じてステータス更新を受信して、ページ内のデータを更新します。

2. ポーリング:

フロントエンドでポーリング方式を使用して、デバイスからの応答を取得できます。フロントエンドはコマンドを送信した後、応答を受信するまで、定期的にバックエンドにリクエストを送信して、デバイスからの応答を取得できます。ポーリング方式はリアルタイム通信は実現できませんが、一定時間内に機器からの応答を得ることが保証できるため、待ち時間が長くなる問題を回避できます。

フロントエンドでWebSocketを使用する方法

SocketJS は、リアルタイムデータ転送と双方向通信を実現する簡単な方法を提供する WebSocket ベースの JavaScript ライブラリです。フロントエンドで SocketJS を使用する簡単な手順は次のとおりです。

SocketJS ライブラリの導入: HTML ページに SocketJS ライブラリを導入します。例:

<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/sockjs.min.js>"></script>

WebSocket 接続を作成します。SockJSSockJSライブラリによって提供されるオブジェクトを使用して、WebSocket 接続を作成します。次に例を示します。

const socket = new SockJS('/websocket');

ここでは WebSocket 接続が作成され、接続の URL がとして指定されます/websocket。

WebSocket イベントのリスニング:socketオブジェクトを通じて WebSocket イベントをリスニングします。例:

socket.onopen = function() {
    
    
  console.log('WebSocket连接已建立');
};

socket.onmessage = function(event) {
    
    
  console.log('收到服务器发送的消息：', event.data);
};

socket.onclose = function() {
    
    
  console.log('WebSocket连接已关闭');
};

onopenここでは、WebSocketとイベントが監視され、イベントが発生すると、対応するコールバック関数が実行されますonmessage。onclose

データの送信:socket.send()次のようなメソッドを使用してサーバーにデータを送信します。

socket.send('Hello, server!');

ここでは、文字列メッセージがサーバーに送信されます。

つまり、SocketJSを利用することで、フロントエンドのWebSocket接続とデータ送信を簡単に実現でき、リアルタイムのデータ送信と双方向通信の機能を実現できます。SocketJS を使用する場合、サーバー側でも、クライアントのリクエストを処理してデータを送信するために、対応する WebSocket プロトコルコードを実装する必要があることに注意してください。

完全なケース

フロントエンドはバックエンドにリクエストを送信し、一部のデバイスを制御したいことを示します。

サーバーはデバイスに指示を送信します。

デバイスが電源を入れた状態でサーバーに戻ったとき。

バックエンドはこのデータをフロントエンドに返します。

WebSocket プロトコルを使用すると、リアルタイムの双方向通信が実現できますが、WebSocket プロトコルをベースにしてデバイスのスイッチを制御するさらに高度なケースを以下に示します。

サーバー側のコード:

const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const app = express();

// 创建 HTTP 服务器
const server = http.createServer(app);

// 创建 WebSocket 服务
const wss = new WebSocket.Server({
    
     server });

// 模拟设备状态
let deviceStatus = 'off';

// 监听 WebSocket 连接
wss.on('connection', function connection(ws) {
    
    
  console.log('WebSocket connected');

  // 监听 WebSocket 消息
  ws.on('message', function incoming(message) {
    
    
    console.log('received: %s', message);

    // 解析消息内容
    const data = JSON.parse(message);

    // 如果消息类型为控制设备开关
    if (data.type === 'control') {
    
    
      // 模拟控制设备开关
      if (data.value === 'on') {
    
    
        deviceStatus = 'on';
      } else if (data.value === 'off') {
    
    
        deviceStatus = 'off';
      }

      // 发送设备状态给前端
      ws.send(JSON.stringify({
    
     type: 'status', value: deviceStatus }));
    }
  });
});

// 启动服务器
server.listen(3000, function() {
    
    
  console.log('Server is running on port 3000');
});

フロントエンドコード:

const socket = new WebSocket('ws://localhost:3000');

const buttonOn = document.getElementById('button-on');
const buttonOff = document.getElementById('button-off');
const statusLabel = document.getElementById('status-label');

socket.addEventListener('open', function(event) {
    
    
  console.log('WebSocket connected');
});

socket.addEventListener('message', function(event) {
    
    
  console.log(`Message from server: ${
      
      event.data}`);

  // 解析消息内容
  const data = JSON.parse(event.data);

  // 如果消息类型为设备状态
  if (data.type === 'status') {
    
    
    statusLabel.innerHTML = `Device status: ${
      
      data.value}`;
  }
});

buttonOn.addEventListener('click', function() {
    
    
  // 发送控制消息给服务器
  const message = JSON.stringify({
    
     type: 'control', value: 'on' });
  socket.send(message);
});

buttonOff.addEventListener('click', function() {
    
    
  // 发送控制消息给服务器
  const message = JSON.stringify({
    
     type: 'control', value: 'off' });
  socket.send(message);
});

上記のコードは、デバイスのスイッチを制御するための基本的な WebSocket 通信プロセスを示しています。フロントエンドは WebSocket オブジェクトを通じてサーバーに接続し、サーバーに制御メッセージを送信し、サーバーは制御デバイスのスイッチをシミュレートして、デバイスのステータスをフロントエンドに送信します。実際のアプリケーションでは、WebSocket 通信の機能とパフォーマンスを、特定のニーズやシナリオに応じてさらに拡張し、最適化できます。