PHP と WebSocket を使用してリアルタイム チャット アプリケーションを作成する
- WBOYオリジナル
- 2023-05-11 16:09:181319ブラウズ
インターネットの発展に伴い、リアルタイムコミュニケーションの需要も高まっています。ライブチャット アプリは、その即時性と利便性で人気があります。この記事では、PHP と WebSocket を使用して信頼性の高いリアルタイム チャット アプリケーションを作成する方法を説明します。
WebSocket とは何ですか?
WebSocket は、Web ブラウザと Web サーバー間の全二重通信のためのプロトコルです。これは、HTTP プロトコルを介したリクエストと応答の代わりに、サーバーとの双方向通信が可能であることを意味します。 WebSocket を使用すると、効率的なリアルタイム通信が可能になります。これは、リアルタイム チャット アプリケーションにとって非常に重要です。
PHP を使用して WebSocket サーバーを作成する方法
WebSocket サーバーを作成するには、Ratchet ライブラリを使用します。 Ratchet は、WebSocket サーバーを迅速かつ簡単に作成するのに役立つ Symfony コンポーネントに基づく PHP WebSocket ライブラリです。 Ratchet を使用するには、PHP アプリケーションの依存関係マネージャーである Composer を PHP にインストールする必要があります。 Composer をまだインストールしていない場合は、最初にインストールしてください。
新しい PHP プロジェクト フォルダーを作成し、次の Composer コマンドを使用して Ratchet をインストールします。
composer require cboden/ratchet
Ratchet がインストールされたら、WebSocket サーバー コードの作成を開始できます。以下は簡単な例です:
<?php
require __DIR__ . '/vendor/autoload.php';
use RatchetMessageComponentInterface;
use RatchetConnectionInterface;
use RatchetServerIoServer;
use RatchetHttpHttpServer;
use RatchetWebSocketWsServer;
class Chat implements MessageComponentInterface {
protected $clients;
public function __construct() {
$this->clients = new SplObjectStorage;
}
public function onOpen(ConnectionInterface $conn) {
$this->clients->attach($conn);
echo "New connection! ({$conn->resourceId})
";
}
public function onMessage(ConnectionInterface $from, $msg) {
foreach ($this->clients as $client) {
if ($from !== $client) {
$client->send($msg);
}
}
}
public function onClose(ConnectionInterface $conn) {
$this->clients->detach($conn);
echo "Connection {$conn->resourceId} has disconnected
";
}
public function onError(ConnectionInterface $conn, Exception $e) {
echo "An error has occurred: {$e->getMessage()}
";
$conn->close();
}
}
$server = IoServer::factory(
new HttpServer(
new WsServer(
new Chat()
)
),
8080
);
echo "Server started at port 8080...
";
$server->run();この例では、Ratchet の MessageComponentInterface インターフェースを実装する「Chat」という名前のクラスを定義します。 SplObjectStorage を使用してクライアント接続を保存し、クライアントがサーバーに接続するときに、onOpen() 関数を使用してクライアントをストレージに接続します。メッセージがサーバーに送信されるとき、onMessage() 関数を使用して他のすべてのクライアントにメッセージを送信します。クライアントが切断されると、onClose() 関数を使用してクライアントをストレージから削除します。
最後に、IoServer クラスを使用して WebSocket サーバーをポート 8080 にバインドし、サーバーを起動します。これで、単純な WebSocket サーバーが正常に作成され、JavaScript WebSocket API を使用して Web ブラウザーに接続できるようになりました。
JavaScript と WebSocket API を使用してクライアントを作成する方法
WebSocket サーバーを用意したので、それに接続するための JavaScript コードを作成する必要があります。 WebSocket APIを使用します。
以下は簡単な WebSocket クライアントの例です:
let ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
console.log('Connected to WebSocket server');
};
ws.onmessage = evt => {
console.log('Received message: ' + evt.data);
};
ws.onclose = () => {
console.log('Disconnected from WebSocket server');
};
ws.onerror = error => {
console.error('WebSocket error: ' + error);
};
function sendMsg() {
let input = document.getElementById('message');
let msg = input.value;
ws.send(msg);
input.value = '';
}WebSocket コンストラクターを使用して新しい WebSocket インスタンスを作成し、指定された WebSocket サーバーに接続します。 WebSocket のさまざまな状態とメッセージを処理するには、onopen、onmessage、onclose、onerror イベント ハンドラーを使用します。また、ユーザーが入力したメッセージをサーバーに送信する「sendMsg」という関数も定義します。この関数は、WebSocket の send() 関数を呼び出してデータを送信します。
最後に、メッセージを送信できるように、テキスト入力と送信ボタンを備えた単純なフォームを HTML ページに作成する必要があります。 HTML コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat App</title>
<script src="chat.js"></script>
</head>
<body>
<h1>WebSocket Chat App</h1>
<div id="messages"></div>
<input type="text" id="message">
<button onclick="sendMsg()">Send</button>
</body>
</html>JavaScript コードを含む HTML ページを使用することで、完全なライブ チャット アプリケーションを作成できます。ユーザーがブラウザにメッセージを入力して送信ボタンをクリックすると、メッセージは WebSocket 経由でサーバーに送信され、クライアントが接続されている他のすべてのブラウザに表示されます。
概要
この記事では、PHP と WebSocket を使用してリアルタイム チャット アプリケーションを作成しました。 Ratchet ライブラリを使用して WebSocket サーバーを迅速に作成し、JavaScript WebSocket API を使用してクライアントを作成します。 Ratchet と WebSocket API を使用すると、効率的なリアルタイム通信を簡単に実現し、信頼性の高いリアルタイム チャット アプリケーションを作成できます。
以上がPHP と WebSocket を使用してリアルタイム チャット アプリケーションを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。