Web アプリケーションでの WebSocket アプリケーションシナリオ-PHPチュートリアル-php.cn

Web アプリケーションでの WebSocket アプリケーションシナリオ

Web アプリケーションにおける WebSocket のアプリケーションシナリオ

WebSocket は、最新の Web ブラウザとサーバー間の双方向通信のためのプロトコルです。従来の HTTP プロトコルとは異なり、WebSocket を使用すると、クライアントがリクエストを開始する必要がなく、サーバーがクライアントにデータをアクティブに送信できます。このリアルタイム双方向通信機能により、WebSocket はさまざまな Web アプリケーションシナリオで広く使用されます。

インスタントチャットアプリケーション
インスタントチャットアプリケーションは、WebSocket の最も一般的なアプリケーションシナリオの 1 つです。従来のHTTPプロトコルでは、リアルタイム通信を行う場合、最新のニュースを取得するためにロングポーリングまたはショートポーリングでサーバーにリクエストを送信し続ける必要がありました。このアプローチではサーバーの負荷が増加する可能性があり、メッセージの遅延はポーリングの頻度の影響を受けます。 WebSocket は永続的な接続を確立でき、サーバーに新しいメッセージがある場合、それをクライアントに直接プッシュして、リアルタイムのメッセージプッシュを実現できます。以下は、WebSocket を使用したインスタントチャットアプリケーションの簡単なサンプルコードです。

// 客户端代码 const socket = new WebSocket('ws://server:port/chat'); socket.onopen = function() { console.log('WebSocket连接已建立'); }; socket.onmessage = function(event) { const message = event.data; console.log('接收到消息：', message); // 处理接收到的消息 }; socket.onclose = function(event) { console.log('WebSocket连接已关闭'); }; document.querySelector('#send-button').addEventListener('click', function() { const message = document.querySelector('#message-input').value; socket.send(message); }); // 服务器端代码（使用Node.js和ws库） const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', function(ws) { console.log('已建立WebSocket连接'); ws.on('message', function(message) { console.log('接收到消息：', message); // 处理接收到的消息 // 模拟回复消息 ws.send('收到消息：' + message); }); ws.on('close', function() { console.log('WebSocket连接已关闭'); }); });

ログイン後にコピー

リアルタイムデータ表示
データのリアルタイム表示を必要とする一部の Web アプリケーションでは、株価や Web サイトのアクセス統計など、WebSocket は優れたサポートも提供します。 WebSocket 接続を通じて、サーバーは最新のデータをリアルタイムでクライアントにプッシュでき、クライアントはデータの変更に応じて表示を更新できます。以下は、WebSocket を使用して株価をリアルタイムに表示するサンプルコードです。

// 客户端代码 const socket = new WebSocket('ws://server:port/stock'); socket.onopen = function() { console.log('WebSocket连接已建立'); }; socket.onmessage = function(event) { const stockData = JSON.parse(event.data); console.log('接收到股票数据：', stockData); // 更新展示最新股票行情 }; socket.onclose = function(event) { console.log('WebSocket连接已关闭'); }; // 服务器端代码（使用Node.js和ws库） const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', function(ws) { console.log('已建立WebSocket连接'); // 模拟每秒推送一次股票数据 const stockData = { symbol: 'AAPL', price: 150.25, timestamp: Date.now() }; setInterval(function() { ws.send(JSON.stringify(stockData)); }, 1000); ws.on('close', function() { console.log('WebSocket连接已关闭'); }); });

ログイン後にコピー

複数の共同編集
共同編集アプリケーションでは、複数のユーザーが同じドキュメントを編集できます。同時。従来の実装方法では、サーバーがユーザーの編集操作を他のユーザーにブロードキャストし、他のユーザーが編集操作に基づいて対応する変更を加えます。 WebSocketを利用することで、複数人での共同編集機能をより便利に実現できます。以下は、WebSocket を使用して複数人による共同編集を実装するための簡単なコード例です。

// 客户端代码 const socket = new WebSocket('ws://server:port/editor'); socket.onopen = function() { console.log('WebSocket连接已建立'); }; socket.onmessage = function(event) { const editorData = JSON.parse(event.data); console.log('接收到编辑数据：', editorData); // 更新文档内容 }; socket.onclose = function(event) { console.log('WebSocket连接已关闭'); }; // 用户编辑操作示例（假设使用Quill.js作为富文本编辑器） const editor = new Quill('#editor-container', { theme: 'snow' }); editor.on('text-change', function(delta, oldDelta, source) { if (source === 'user') { const editorData = { delta: delta, timestamp: Date.now() }; socket.send(JSON.stringify(editorData)); } }); // 服务器端代码（使用Node.js和ws库） const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', function(ws) { console.log('已建立WebSocket连接'); ws.on('message', function(message) { const editorData = JSON.parse(message); console.log('接收到编辑数据：', editorData); // 处理编辑操作 // 广播编辑操作给其他用户 wss.clients.forEach(function(client) { if (client !== ws && client.readyState === WebSocket.OPEN) { client.send(JSON.stringify(editorData)); } }); }); ws.on('close', function() { console.log('WebSocket连接已关闭'); }); });

ログイン後にコピー

概要:
WebSocket の出現により、Web アプリケーションのリアルタイム通信機能が大幅に向上しました。 WebSocket は、インスタントチャット、リアルタイムデータ表示、複数人での共同編集などのシナリオで大きな役割を果たします。開発者は WebSocket を使用してこれらの機能を簡単に実装し、ユーザーエクスペリエンスとアプリケーションのリアルタイムパフォーマンスを向上させることができます。同時に、開発者は WebSocket を使用してアプリケーションの安定性とセキュリティを確保する際に、ネットワークセキュリティとパフォーマンスの問題を考慮する必要があることに注意してください。

以上がWeb アプリケーションでの WebSocket アプリケーションシナリオの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。