WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー

WebSocket と JavaScript: リアルタイム監視システムを実現するための主要技術

はじめに:
インターネット技術の急速な発展により、リアルタイム監視システムはさまざまな分野で幅広く使用されており、幅広い用途に使用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。

1. WebSocket テクノロジーの概要
WebSocket は、単一の TCP 接続での全二重通信のためのプロトコルです。従来の HTTP プロトコルと比較して、WebSocket には優れたリアルタイム パフォーマンス、低遅延、低帯域幅使用という利点があり、リアルタイム監視システムに特に適しています。

2. WebSocket 接続を実装する JavaScript
JavaScript を使用して WebSocket 接続を実装するのは非常に簡単です。まず、WebSocket オブジェクトを作成し、接続 URL を指定する必要があります。

var socket = new WebSocket("ws://localhost:8080/monitor");

このうち、ws:// は WebSocket プロトコルの使用を意味し、localhost:8080 は WebSocket サーバーのアドレスとポート、/モニターは、特定の WebSocket サービス エンドポイントです。

次に、サーバーと通信するために、WebSocket のイベント処理関数をいくつか定義する必要があります。一般的なイベントには、onopen、onmessage、onclose、onerror などがあります。

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

socket.onmessage = function(event){
  console.log("收到消息：" + event.data);
};

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

socket.onerror = function(error){
  console.log("WebSocket连接发生错误：" + error);
};

これらのイベント処理関数を通じて、サーバーとのリアルタイムのデータ対話を実現できます。

3. サーバー側のコード例
WebSocket サーバー側は、Node.js と WebSocket ライブラリを使用して実装されます。以下は、単純な WebSocket サーバー側のコード例です。

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('WebSocket连接已建立');

  // 监听客户端发来的消息
  ws.on('message', function incoming(message) {
    console.log('收到消息：', message);
  });

  // 发送消息给客户端
  ws.send('欢迎连接WebSocket服务器');
});

上記のコードは、WebSocket サーバーを作成し、クライアントがサーバーとの接続を確立したときにログを出力し、クライアントからのメッセージを受信および出力し、メッセージを送信します。 to クライアントはウェルカム メッセージを送信します。

4. リアルタイム監視システムへの応用
リアルタイム監視システムでは、WebSocket と JavaScript を組み合わせることで、リアルタイムデータのプッシュと受信を実現できます。たとえば、温度監視システムは、センサーによって収集された温度データを WebSocket を通じてリアルタイムで監視インターフェースにプッシュでき、同時に監視インターフェースは WebSocket を通じてセンサー データの変化を監視できます。以下は、単純な監視インターフェイスのコード例です。

  
    
  
  
    
实时温度监控系统
    


    <script>
      var socket = new WebSocket(&quot;ws://localhost:8080/monitor&quot;);

      socket.onmessage = function(event){
        var temperature = document.getElementById("temperature");
        temperature.innerHTML = "当前温度为：" + event.data;
      };
    </script>
  

上記のコードは、WebSocket 経由でサーバーから送信される温度データを監視し、リアルタイムでインターフェイスに表示する単純な監視インターフェイスを作成します。

結論:
WebSocket と JavaScript の組み合わせは、リアルタイム監視システムを実装するための重要なテクノロジの 1 つです。 WebSocket と JavaScript を介して、リアルタイム データをリアルタイム監視システムでプッシュおよび受信できます。上記のコード例は、読者の参考のための単純なリアルタイム温度監視システムです。実際のアプリケーションでは、特定のニーズに応じてさらなる開発と最適化を実行できます。

以上がWebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。