JavaScript と WebSocket: 効率的なリアルタイムデータ配信システムを作成する-jsチュートリアル-php.cn

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

WBOY

リリース： 2023-12-18 12:49:11

オリジナル

780 人が閲覧しました

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

現在、リアルタイムデータ配信は企業の最も重要なビジネスニーズの 1 つとなっており、JavaScript と WebSocket は効率的なリアルタイムデータ配信を実現する強力なツールとなっています。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイムデータ配信システムを構築する方法と、具体的なコード例を紹介します。

1.WebSocket とは何ですか?

WebSocket を導入する前に、まず HTTP プロトコルを理解する必要があります。 HTTP プロトコルは、現在最も一般的に使用されているアプリケーション層プロトコルであり、リクエストとレスポンスで構成されますが、リアルタイム通信には「リクエスト-レスポンス」モデルのプロトコルであるという欠点があります。

HTTP プロトコルでは、クライアントはデータを取得するためにサーバーにリクエストを継続的に送信する必要がありますが、リアルタイムのデータ配信の場合、この方法は明らかに実現可能ではありません。そこでWebSocketが登場しました。

WebSocket は、単一の TCP 接続を介した全二重通信のためのプロトコルであり、ハンドシェイクには HTTP プロトコルを使用し、データ転送には TCP ソケットを使用します。 WebSocket プロトコルは、リアルタイム通信に必要な低遅延の問題を解決するだけでなく、サーバーのプッシュデータに必要な高効率の問題も解決します。

2. JavaScript と WebSocket を使用してリアルタイムデータ配信を実現する

WebSocket 接続を作成する

JavaScript の WebSocket オブジェクトを使用して、 WebSocket接続。以下は例です:

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

ログイン後にコピー

WebSocket イベントのリッスン

WebSocket 接続のさまざまなイベントを処理するには、onopen などのいくつかの WebSocket イベントをリッスンする必要があります。、onmessage、onerror、および onclose イベント。以下に示すように:

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

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

socket.onerror = function (error) {
    console.log('WebSocket错误: ' + error);
};

socket.onclose = function (event) {
    console.log('WebSocket连接已关闭: ' + event.code + ' ' + event.reason);
};

ログイン後にコピー

WebSocket 接続が正常に確立されると、onopen イベントがトリガーされ、新しいメッセージを受信すると onmessage イベントがトリガーされ、WebSocket 接続でエラーが発生すると、 onerror イベントがトリガーされ、WebSocket 接続が閉じられると、onclose イベントがトリガーされます。

WebSocket メッセージの送信

JavaScript の WebSocket オブジェクトを使用して、サーバーにメッセージを送信できます。以下に例を示します。

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

ログイン後にコピー

WebSocket 接続を閉じる

close() メソッドを使用して WebSocket 接続を閉じることができます。以下に示すように:

socket.close();

ログイン後にコピー

3. サンプルコード

Node.js の WebSocket ライブラリを使用して WebSocket サーバーを実装します:

const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('收到消息: %s', message);
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
        console.log('消息已广播: %s', message);
      }
    });
  });

  ws.on('close', function () {
    console.log('WebSocket连接关闭');
  });
});

ログイン後にコピー

HTML と JavaScript を使用して WebSocket を実装しますclient:

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket实例</title>
  <meta charset="utf-8">
</head>
<body>
  <input type="text" id="message">
  <button onclick="send()">发送</button>
  <ul id="messages"></ul>
</body>
<script>
  var socket = new WebSocket('ws://localhost:8080');

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

  socket.onmessage = function (event) {
    console.log('收到消息: ' + event.data);
    var li = document.createElement("li");
    li.textContent = event.data;
    document.getElementById("messages").appendChild(li);
  };

  socket.onerror = function (error) {
    console.log('WebSocket错误: ' + error);
  };

  socket.onclose = function (event) {
    console.log('WebSocket连接已关闭: ' + event.code + ' ' + event.reason);
  };

  function send() {
    var message = document.getElementById("message").value;
    socket.send(message);
  }
</script>
</html>

ログイン後にコピー

4. まとめ

JavaScriptとWebSocket技術を利用することで、効率的なリアルタイムデータ配信システムを構築できます。 WebSocket プロトコルは TCP 接続を使用して全二重通信を実現するため、HTTP プロトコルの非効率性の問題を解決できます。 WebSocket 接続を介してメッセージを送受信すると、サーバーからクライアントへのリアルタイムのデータ配信を簡単に実現できます。この記事では詳細なコード例を提供します。読者の役に立つことを願っています。

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