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

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

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

1. インスタント チャット アプリケーション
   インスタント チャット アプリケーションは、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连接已关闭');
  });
});

2. リアルタイム データ表示
   データのリアルタイム表示を必要とする一部の 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连接已关闭');
  });
});

3. 複数の共同編集
   共同編集アプリケーションでは、複数のユーザーが同じドキュメントを編集できます。同時。従来の実装方法では、サーバーがユーザーの編集操作を他のユーザーにブロードキャストし、他のユーザーが編集操作に基づいて対応する変更を加えます。 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 サイトの他の関連記事を参照してください。