今回は、PHPを使ってリアルタイムチャットアプリを作成する方法を紹介します。このアプリを通じて、PHPの基本的な使い方やWebSocketという技術について学べます。
リアルタイムチャットアプリとは、ユーザー同士がメッセージを即座にやり取りできるアプリのことです。このアプリでは、PHPをバックエンドに使用し、HTMLとJavaScriptでフロントエンドを作成します。さらに、リアルタイム通信を実現するためにWebSocketを使用します。
アプリを作成するために、いくつかの準備をしましょう。
PHPを動かすために、まずはサーバー環境が必要です。以下の方法で環境を整えましょう。
チャットアプリに必要なファイルを作成します。以下の3つを用意しましょう。
まずは、index.phpを以下のように作成します。ここでは簡単なHTMLとJavaScriptを含めます。
<!DOCTYPE html>
<html>
<head>
<title>リアルタイムチャットアプリ</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var ws;
function init() {
ws = new WebSocket("ws://localhost:8080/ws.php");
ws.onmessage = function(event) {
$("#messages").append("<p>" + event.data + "</p>");
};
}
function sendMessage() {
var message = $("#message").val();
ws.send(message);
$("#message").val("");
}
</script>
</head>
<body onload="init()">
<h1>チャットルーム</h1>
<div id="messages"></div>
<input type="text" id="message">
<button onclick="sendMessage()">送信</button>
</body>
</html>
次に、chat.phpを作成します。このファイルは、データベースと連携してメッセージを保存する役割を果たします。簡単なDB接続のコードはこちらです。
<?php
$host = 'localhost';
$db = 'chat_db';
$user = 'username';
$pass = 'password';
$dsn = "mysql:host=$host;dbname=$db;charset=utf8";
try {
$pdo = new PDO($dsn, $user, $pass);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo "接続失敗: " . $e->getMessage();
}
?>
最後に、ws.phpを作成します。ここではWebSocket通信を扱い、チャットメッセージをリアルタイムで送受信します。
<?php
$host = 'localhost';
$port = 8080;
$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
socket_bind($socket, $host, $port);
socket_listen($socket);
while ($client = socket_accept($socket)) {
while ($msg = socket_read($client, 1024)) {
// メッセージを他のクライアントに送信する処理
socket_write($client, $msg);
}
socket_close($client);
}
socket_close($socket);
?>
ここまでで必要なファイルが揃いました。XAMPPやMAMPを使ってサーバーを立ち上げたら、index.phpにアクセスしてみましょう。メッセージを入力し、送信ボタンを押すと、メッセージがリアルタイムで表示されるはずです。