こんにちは、かじです。
今回はPHPのWeb Socketサーバー構築用のライブラリである、Ratchetを使用してWeb Socket Serverを構築していきたいと思います。
Web SocketはHTTP通信では実現できなかった、双方向通信を実現するための通信方法になり、チャットアプリなどのSNSやオンライン通話や通信ゲームなどに使用されます。
Web Socketに関する説明は下記の記事をご覧ください。
https://rundevlog.com/2023/07/05/【web開発入門-vol-4】websocketとは〜双方向通信の実現〜/(新しいタブで開く)
1.前準備
1-1.プロジェクトフォルダの作成
まずは、プロジェクトフォルダを作成します。任意の場所で結構ですのでフォルダを作成をし、任意のフォルダ名をつけてください。
自分は「MAMP\htdocs」配下に「chatBackend」というフォルダ名でプロジェクトフォルダを作成しました。
1-2.composer.jsonの作成とライブラリのインストール
プロジェクトフォルダを作成したら、プロジェクトフォルダの直下に「composer.json」を作成し、下記を記載ください。
{
"autoload": {
"psr-4": {
"MyApp\\": "src"
}
},
"require": {
"cboden/ratchet": "0.4.*"
}
}
続いて、windowsの方はコマンドプロンプト、Macの方はターミナルを開いて、下記コマンドを実行します。
$ cd プロジェクトフォルダのディレクトリ
$ composer install
上記のコマンドを実行した後に、「composer.lock」というファイルと「vendor」というフォルダが作成されたら成功になります。
2.アプリケーションプログラムの作成
ライブラリのインストールまで完了しましたら、次は、アプリケーションプログラムの作成です。
プロジェクトフォルダ直下に「src」を作成し、その配下に「Chat.php」を作成し、下記のプログラムソースを記述してください。
<?php
namespace MyApp;
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
class Chat implements MessageComponentInterface {
public function onOpen(ConnectionInterface $conn) {
}
public function onMessage(ConnectionInterface $from, $msg) {
}
public function onClose(ConnectionInterface $conn) {
}
public function onError(ConnectionInterface $conn, \Exception $e) {
}
}
上記の4つの関数は下記イベントに応じて実行されます。
・onOpen:クライアントからとの接続が確立された際に実行される関数
・onMessage:クライアントからメッセージが送られた際に実行される関数
・onClose:クライアントとの接続が切れた際に実行される関数
・onError:エラーが起こった際に実行される関数
続いて同じファイルにそれぞれの関数にロジックを書いていきましょう。
今回は、公式ドキュメントに書いてあるロジックをそのまま引用しますが、それぞれのイベントに対して必要なプログラムを追加してみてください。
<?php
namespace MyApp;
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
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})\n";
}
public function onMessage(ConnectionInterface $from, $msg) {
$numRecv = count($this->clients) - 1;
echo sprintf('Connection %d sending message "%s" to %d other connection%s' . "\n"
, $from->resourceId, $msg, $numRecv, $numRecv == 1 ? '' : 's');
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\n";
}
public function onError(ConnectionInterface $conn, \Exception $e) {
echo "An error has occurred: {$e->getMessage()}\n";
$conn->close();
}
}
3.Web Socketサーバープログラムの作成
続いてプロジェクトフォルダ直下に「bin」フォルダを作成し、binフォルダに「chat-server.php」ファイルを作成します。
<?php
use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;
use MyApp\Chat;
require dirname(__DIR__) . '/vendor/autoload.php';
$server = IoServer::factory(
new HttpServer(
new WsServer(
new Chat()
)
),
8080
);
$server->run();
こちらは、Web Socketサーバーを8080ポートを使用して立ち上げる際のロジックになります。Web Socketサーバーを立ち上げた際には2で作成したchatクラスのロジックを使用します。
4.実行
3のステップまで完了しましたら、再度コマンドを立ち上げプロジェクトフォルダまで移動し、下記コマンドを実行します。
$ php bin/chat-server.php
続いてGoogle Chromeを起動し、2つのタブを開き、それぞれのタブでデベロッパーツールを開き、コンソールに下記のJavaScriptのプログラムを追加します。
var conn = new WebSocket('ws://localhost:8080');
conn.onopen = function(e) {
console.log("Connection established!");
};
conn.onmessage = function(e) {
console.log(e.data);
};
下記画面のように「Connection established!」と表示されていたら無事Web Socketサーバーを立ち上げることおよび、WebブラウザがWeb Socketサーバーへ接続することが成功しています。。
続いて、リアルタイムで双方向通信できているかを確認してみましょう。
下記JavaScriptプログラムを先ほど立ち上げた一方のタブのコンソールに入力してみましょう。
conn.send('Hello World!');
下記のように二つのコンソール画面で互いにメッセージを送信することができていれば、双方向通信も成功になります。
今回はここまでです。次回はJavaScriptを使用して実際にチャットアプリっぽいのを作っていこうと思います。
最後まで閲覧くださりありがとうざいました。
参考URL
~画像出展元~