PHPを使用してオンラインチャットルームを実装する方法-PHPチュートリアル-php.cn

PHPを使用してオンラインチャットルームを実装する方法

WBOY

リリース： 2023-06-27 09:28:01

オリジナル

1585 人が閲覧しました

人々のインターネットへの依存度が高まるにつれ、リアルタイムのオンラインチャットルームが多くの Web サイトの標準機能になりました。この記事では、PHP を使用して基本的なリアルタイムオンラインチャットルームを実装する方法を紹介します。

前提条件

開始する前に、環境が次の条件を満たしていることを確認してください:

PHP5 以降;
Web サーバー (Apache、Nginx など);
MySQL データベース;
HTML および CSS の基本的な知識。

データベースとテーブルの作成

まず、チャット記録を保存するための MySQL データベースとテーブルを作成します。次のコマンドを実行します。

CREATE DATABASE chat;
USE chat;
CREATE TABLE messages (
    id INT(11) AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    message TEXT NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

ログイン後にコピー

上記のコマンドは、チャットレコードを保存するために、「chat」という名前のデータベースとその中に「messages」という名前のテーブルを作成します。テーブルには、「id」、「username」、「message」、および「created_at」という 4 つのフィールドが含まれています。このうち、「id」は自動的にインクリメントされる主キー、「username」は送信者のユーザー名、「message」はメッセージの内容、「created_at」はメッセージの送信時刻です。

HTML と CSS

次に、HTML ファイル chat.html と CSS ファイル chat.css を作成します。ここでは、HTML と CSS の主要なコードのみを示します:

chat.html

<!DOCTYPE html>
<html>
<head>
    <title>Online Chat Room</title>
    <link rel="stylesheet" type="text/css" href="chat.css">
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            <h2>Chat Room</h2>
        </div>
        <div class="chat-messages"></div>
        <div class="chat-form">
            <form>
                <input type="text" name="username" placeholder="Username" required>
                <input type="text" name="message" placeholder="Type your message here" required>
                <button type="submit">Send</button>
            </form>
        </div>
    </div>
    <script src="jquery.min.js"></script>
    <script src="chat.js"></script>
</body>
</html>

ログイン後にコピー

chat.css

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.chat-container {
    width: 80%;
    margin: 50px auto;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

.chat-header {
    padding: 10px;
    background-color: #eee;
}

.chat-header h2 {
    margin: 0;
    font-size: 18px;
}

.chat-messages {
    height: 300px;
    overflow: auto;
    padding: 10px;
}

.chat-form {
    padding: 10px;
}

.chat-form form {
    display: flex;
    flex-wrap: wrap;
}

.chat-form input {
    flex: 1;
    margin: 0 5px 0 0;
    padding: 10px;
    border: none;
    border-radius: 3px;
}

.chat-form button {
    flex-basis: 100px;
    padding: 10px;
    background-color: #0099ff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.chat-form button:hover {
    background-color: #0088cc;
}

ログイン後にコピー

ここでは、チャットを含む基本的なチャットルームページが作成されます。レコード領域、メッセージングフォーム、およびその他の関連要素。

PHP バックエンド

最後に、PHP を使用してバックエンドコードを作成し、リアルタイム通信機能を実装します。次のコードを含む chat.php という名前のファイルを作成します:

<?php
/* 设置响应格式为JSON */
header('Content-Type: application/json');

/* 连接数据库 */
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASSWORD', '123456');
define('DB_NAME', 'chat');

$conn = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);

/* 检查数据库连接是否成功 */
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

/* 处理消息发送请求 */
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $username = $_POST['username'];
    $message = $_POST['message'];

    $sql = "INSERT INTO messages (username, message) VALUES ('$username', '$message')";

    if (mysqli_query($conn, $sql)) {
        echo json_encode(['status' => 'success']);
    } else {
        echo json_encode(['status' => 'error', 'message' => mysqli_error($conn)]);
    }
} else {
    /* 处理消息获取请求 */
    $last_id = $_GET['last_id'];

    $sql = "SELECT * FROM messages WHERE id > $last_id ORDER BY created_at ASC";
    $result = mysqli_query($conn, $sql);

    $messages = [];
    while ($row = mysqli_fetch_assoc($result)) {
        $messages[] = $row;
    }

    echo json_encode(['status' => 'success', 'messages' => $messages]);
}

mysqli_close($conn);

ログイン後にコピー

上記のコードには次の 3 つの部分が含まれています:

データベースに接続します: PHP ファイルでは、接続データベースへのアクセスは必須のアクションです。この例では、mysqli_connect 関数を使用してデータベースとの接続を確立します;
メッセージ送信リクエストの処理: クライアントによって送信されたリクエストメソッドが POST の場合、ユーザーが新しいメッセージを送信したことを意味します。この場合、$_POST 配列からユーザー名とメッセージテキストを取得し、メッセージテーブルに挿入することで、チャット履歴を保存できます。
メッセージ取得リクエストを処理します。リクエストがクライアントによって送信された場合、メソッドは GET です。これは、クライアントがすべての新しいメッセージを取得する必要があることを意味します。この場合、$_GET 配列から最後のメッセージの ID を取得し、メッセージテーブルからすべての新しいメッセージを取得して、JSON データとして返すことができます。

JavaScript

最後に、ページ上のリアルタイム通信を処理するための JavaScript コードを chat.js に記述します。この例では、jQuery を使用してコードを簡素化し、AJAX リクエストを処理します。以下は、chat.js ファイルのコア部分です:

$(function() {
    /* 存储最后一条消息的ID */
    var last_id = 0;

    /* 获取所有消息 */
    function getMessages() {
        $.get('chat.php', {'last_id': last_id}, function(data) {
            if (data.status == 'success') {
                /* 迭代所有消息并添加到聊天室中 */
                $.each(data.messages, function(index, message) {
                    var html = '<p><strong>' + message.username + ':</strong> ' + message.message + '</p>';
                    $('.chat-messages').append(html);

                    /* 更新最后一条消息的ID */
                    last_id = message.id;
                });

                /* 滚动到底部以显示最新的消息 */
                $('.chat-messages').scrollTop($('.chat-messages')[0].scrollHeight);
            }
        }, 'json');
    }

    /* 获取所有消息 */
    getMessages();

    /* 处理消息发送表单的提交事件 */
    $('.chat-form form').submit(function(e) {
        e.preventDefault();

        /* 获取表单输入 */
        var username = $('input[name="username"]').val();
        var message = $('input[name="message"]').val();

        /* 发送AJAX请求 */
        $.post('chat.php', {'username': username, 'message': message}, function(data) {
            if (data.status == 'success') {
                /* 清空输入框 */
                $('input[name="message"]').val('');
            } else {
                /* 处理错误 */
                alert('Error: ' + data.message);
            }
        }, 'json');
    });

    /* 每5秒获取一次消息 */
    setInterval(getMessages, 5000);
});

ログイン後にコピー

上記のコードは、jQuery と AJAX を使用して次のタスクを実行します:

すべての新しいメッセージを定期的に取得して追加します。チャットルームへ中;
メッセージ送信フォームが送信されると、AJAX を使用して新しいメッセージをデータベースに挿入し、成功後にフォームをクリアします;
すべての新しいメッセージを 5 秒ごとに取得します。

テストチャットルーム

これで、すべての準備が整いました。 chat.html ファイルを開いてユーザー名とメッセージを入力し、[送信] ボタンをクリックします。何も問題がなければ、今送信したメッセージだけでなく、以前に送信したメッセージもすべて表示されるはずです。おめでとうございます。リアルタイムオンラインチャットルームが正常に作成されました。

結論

この記事では、PHP と AJAX を使用してリアルタイムオンラインチャットルームを作成する方法を紹介しました。このチャットルームは比較的シンプルですが、これに基づいて自分で改良し、プライベートメッセージや絵文字などの機能を追加してみることができます。これをもとに、より実践的なWebアプリケーションを開発していただければ幸いです。

以上がPHPを使用してオンラインチャットルームを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。