WebSocketとリアルタイム通信の適用事例分析-PHPチュートリアル-php.cn

WebSocketとリアルタイム通信の適用事例分析

王林

リリース： 2023-10-15 09:52:01

オリジナル

637 人が閲覧しました

WebSocketとリアルタイム通信の適用事例分析

WebSocket とリアルタイム通信の応用事例分析

インターネットの発達とテクノロジーの進歩に伴い、リアルタイム通信の重要性はますます高まっていますさまざまな用途に。従来の HTTP ベースの要求/応答モデルでは、リアルタイム通信のニーズを満たすことができないことが多いため、WebSocket が新しいプロトコルとして登場しました。 WebSocket プロトコルは TCP に基づいており、クライアントとサーバー間の永続的な接続の確立を可能にし、全二重リアルタイム通信を実現します。

この記事では、単純なチャットルームアプリケーションを通じて WebSocket アプリケーションのケースを分析し、対応するコード例を提供します。

プロジェクトの概要
ユーザーが Web ページでメッセージを送信し、他のオンラインユーザーとリアルタイムでコミュニケーションできる、シンプルなチャットルームアプリケーションを実装したいと考えています。アプリケーションはリアルタイム通信に WebSocket プロトコルを使用します。
テクノロジーの選択
バックエンドプラットフォームとして Node.js を使用し、WebSocket ライブラリとして Socket.io を使用することを選択しました。 Socket.io は、WebSocket プロトコルをカプセル化し、シンプルで使いやすい API を提供するオープンソースのリアルタイムアプリケーションフレームワークです。
サーバー側の実装
まず、サーバー側の Socket.io インスタンスを作成し、指定されたポートをリッスンする必要があります。

// 引入依赖
const app = require('http').createServer();
const io = require('socket.io')(app);

// 监听指定端口
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

// 处理连接事件
io.on('connection', (socket) => {
  console.log(`User connected: ${socket.id}`);

  // 处理接收到的消息
  socket.on('message', (message) => {
    console.log(`Received message: ${message}`);
    // 广播消息给所有连接的客户端
    io.emit('message', message);
  });

  // 处理断开连接事件
  socket.on('disconnect', () => {
    console.log(`User disconnected: ${socket.id}`);
  });
});

ログイン後にコピー

クライアント実装
Web ページでは、Socket.io クライアントライブラリを導入し、サーバーに接続する必要があります。

<!DOCTYPE html>
<html>
<head>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    // 连接到服务器
    const socket = io('http://localhost:3000');

    // 处理接收到的消息
    socket.on('message', (message) => {
      console.log(`Received message: ${message}`);
      // 更新页面显示
      document.getElementById('messages').innerHTML += `<li>${message}</li>`;
    });

    // 发送消息
    function sendMessage() {
      const input = document.getElementById('input');
      const message = input.value;
      // 发送消息给服务器
      socket.emit('message', message);
      input.value = '';
    }
  </script>
</head>
<body>
  <ul id="messages"></ul>
  <input type="text" id="input">
  <button onclick="sendMessage()">发送</button>
</body>
</html>

ログイン後にコピー

上記のコードでは、socket.emit はサーバーにメッセージを送信するために使用され、socket.on はサーバーからのメッセージを受信するために使用されます。ページが表示されます。

プロジェクトの実行
コマンドラインでプロジェクトディレクトリを入力し、次のコマンドを実行してサーバーを起動します:

node server.js

ログイン後にコピー

次に、http を開きます。ブラウザで ://localhost:3000 と入力し、チャットルームアプリケーションに入ります。複数のユーザーが Web ページ上で同時にメッセージを送信し、リアルタイムのコミュニケーションを実現できます。

上記の事例を通じて、リアルタイム通信における WebSocket のアプリケーションの利点がわかります。従来の HTTP リクエスト/レスポンスモデルと比較して、WebSocket は永続的な接続を確立し、リアルタイムの双方向通信を実現できるため、ユーザーエクスペリエンスが大幅に向上します。

概要
この記事では、簡単なチャットルームのアプリケーション事例を通じて、WebSocket のアプリケーションとリアルタイムコミュニケーションを紹介します。 Node.js と Socket.io を使用すると、リアルタイム通信アプリケーションを簡単に構築して、ユーザーに優れたインタラクティブなエクスペリエンスを提供できます。この記事が、WebSocket のアプリケーションとリアルタイム通信を実現する方法を理解するのに役立つことを願っています。

参考資料: