JavaScript と WebSocket: 効率的なリアルタイム データ収集システムを作成する

JavaScript と WebSocket: 効率的なリアルタイム データ収集システムの作成

最新の Web アプリケーションでは、リアルタイム データの処理がますます一般的になってきています。任意のリアルタイムデータを送信するには遅延を避ける必要があるため、効率的な通信方法を使用する必要があります。この記事では、JavaScript と WebSocket を使用して効率的なリアルタイム データ収集システムを構築する方法を紹介し、具体的なコード例を示します。

WebSocket は、クライアントとサーバー間の長期接続を可能にする全二重プロトコルです。必要なデータ量が多い場合、HTTP 通信トランスポートを使用するよりも WebSocket の方が利点があることがよくあります。さらに、WebSocket プロトコルは HTTP プロトコルと同時に使用されるため、既存の Web アプリケーションへの統合が容易になります。

以下は基本的な実装例です:

• まず、WebSocket オブジェクトを作成します:

  varソケット = new WebSocket('ws:// example.com/socket');

これにより、オンライン WebSocket オブジェクトが作成され、サーバーとの長期接続が確立されます。 URL「ws://example.com/socket」は WebSocket サーバーを指します。

• 次に、WebSocket イベントをリッスンします:

  socket.addEventListener('open', function (event) {

    console.log('WebSocket连接已建立');

  });

  socket.addEventListener('メッセージ', 関数 (イベント) {

    console.log('Received:', event.data);

  });

  socket.addEventListener('close', 関数 (イベント) {

    console.log('WebSocket连接已关闭');

  });

ここでは、addEventListener() 関数を使用して、WebSocket イベントに応答するイベント ハンドラーを追加します。 WebSocket 接続が確立されると「open」イベントが発生し、データを受信すると「message」イベントが発生し、WebSocket 接続が閉じられると「close」イベントが発生します。

• 最後に、WebSocket データの送受信:

  socket.send('Hello World'); // データの送信

  var data = JSON .parse(event.data); // データの受信

この簡単な例は、JavaScript と WebSocket を使用してクライアントからサーバーへのリアルタイム接続を確立する方法を示しています。ただし、実際のアプリケーションでは、より多くの状況や技術的な詳細を処理するために、より多くのコードが必要になります。

以下は、より完全な WebSocket アプリケーションの例です。

サーバー側

const WebSocket = require('ws');
const wss = new WebSocket.Server({
  port: 8080
});
console.log("WebSocket server started...");
 
wss.on('connection', function(ws) {
    console.log("WebSocket client connected...");
 
    ws.on('message', function(message) {
        console.log("Message received:"+message);
        if (message === 'close') {
            ws.close();
        }
        else {
            wss.clients.forEach(function each(client) {
                if (client.readyState === WebSocket.OPEN) {
                    console.log("Broadcasting:", message);
                    client.send(message);  // 实现广播
                }
            });
        }
    });
 
    ws.on('close', function() {
        console.log("WebSocket closed...");
    });
});

• この例では、サーバーは、メッセージの発生時にクライアント接続を受け入れます。接続されているすべてのクライアントにブロードキャストされます。 「close」メッセージを受信すると、クライアントの接続は閉じられます。ブロードキャストを実装するには、サーバーに接続されているすべてのクライアントをループする必要があることに注意してください。リアルタイム データ収集システムの中核として WebSocket を使用すると、HTTP 送信に比べて効率的かつ安定した送信が可能となるため、効果的な選択肢となります。

クライアント

var ws = new WebSocket('ws://localhost:8080');
console.log("WebSocket client started...");
 
ws.onmessage = function(msg) {
    console.log("Received: " + msg.data);
};
 
ws.onclose = function() {
    console.log("WebSocket closed...");
};
 
function send() {
    var val = document.getElementById('input').value;
    console.log("Sending: " + val);
    ws.send(val);
}
 
function close() {
    console.log("Closing WebSocket...");
    ws.send('close');
    ws.close();
}

• クライアントのコードは上に示したとおりで、前に作成したサーバー WebSocket に接続します。クライアントはメッセージを受信すると、メッセージの内容を表示します。 「send」関数はテキスト フィールド値を受け取り、WebSocket サーバー上のすべてのクライアントに送信します。 「close」関数は、クライアントの WebSocket 接続を閉じます。

この記事では、基本的な JavaScript と WebSocket の実装例、およびサーバーとクライアントの完全なサンプル コードを提供します。誰でも WebSocket の使用を開始し、独自のリアルタイム データ収集アプリケーションの構築を開始できます。

以上がJavaScript と WebSocket: 効率的なリアルタイム データ収集システムを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。