ホームページ > 記事 > ウェブフロントエンド > JavaScript と WebSocket: 効率的なリアルタイム データ配信システムを作成する
JavaScript と WebSocket: 効率的なリアルタイム データ配信システムを作成する
- WBOYオリジナル
- 2023-12-18 12:49:11802ブラウズ
現在、リアルタイム データ配信は企業の最も重要なビジネス ニーズの 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 サイトの他の関連記事を参照してください。