PHPを使用して簡単なチャットボックスを実装する方法

今日のインターネット時代では、人々はインスタント メッセージングの重要性にますます注目しています。ソーシャル ネットワーキング、電子商取引、オンライン教育などの分野において、ユーザーのニーズを満たすインスタント チャット機能を提供する必要があります。 Web 開発言語として、PHP は通常、Ajax と Websocket を使用してインスタント メッセージング機能を実装します。この記事では、PHPを使って簡単なチャットボックスを実装する方法を紹介します。

1. 準備

始める前に、次の環境があることを確認する必要があります:

1. PHP
2. MySQL
3. Apache サーバーを実行する機能

これらの環境は、この記事を完了するために必要な基盤です。

2. チャット ボックス インターフェイスの作成

まず、チャット ボックスを表示するための単純な HTML ページを作成する必要があります。このページは、チャット履歴を表示するエリアとチャット内容を入力するエリアの 2 つの部分で構成されます。 Bootstrap を使用すると、Web ページを美しくすることができます。

たとえば、ID が「chatbox」の Div 要素を作成できます。これには、ID が「message」の div 要素と、ID が「input」の form 要素という 2 つのサブ要素が含まれます。 「message」要素と「input」要素の CSS スタイルは、Bootstrap を使用して美しくすることができます。

3. チャット記録の表示を実現する

次にチャット記録の表示機能を実現します。チャット履歴をデータベースに保存し、データベースからメッセージを取得して、「message」Div 要素に表示する必要があります。

MySQL では、次のコマンドを使用して、「id」、「name」、「message」、および「time」の 4 つのフィールドを含む「chat」という名前のテーブルを作成できます。

CREATE TABLE `chat` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `message` text NOT NULL,
  `time` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

PHP で MySQL データベースに接続するには、次のコードを使用してデータベースに接続します。

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "chat";

// create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

次に、データベースからチャット履歴を取得して表示する必要があります。

$sql = "SELECT name, message, time FROM chat ORDER BY id ASC";
$result = $conn->query($sql);

// display chat history
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "<p><strong>" .$row["name"]. "</strong> " .$row["message"]. "</p>";
    }
} else {
    echo "No messages yet.";
}

上記のコードは、select ステートメントを使用してデータベースからチャット レコードを取得し、「while」ループを使用してこれらのレコードをページに 1 つずつ表示します。

4. チャット内容の送信を実現する

次に、QQ チャット ボックスのように、ユーザーがチャット内容を入力した後、他のユーザーがリアルタイムでチャット メッセージを受信できる機能を実現する必要があります。 。 Web ページ上でチャット内容を入力するには、「入力」フォームに入力ボックスと送信ボタンを追加します。ユーザーが送信ボタンをクリックすると、チャットのコンテンツが PHP コードに送信され、MySQL データベースに保存されます。

PHP コードでは、次のコードを使用してフォームからチャットのコンテンツとユーザー名を取得し、MySQL データベースに保存できます。

if (isset($_POST['submit'])) { //check if form submitted
    $name = $_POST['name'];
    $message = $_POST['message'];
    
    //insert message into database
    $sql = "INSERT INTO chat (name, message) VALUES ('$name', '$message')";
    $result = $conn->query($sql);
}

上記のコードは、ユーザーによって送信されたフォーム データを追加することで機能します。 user (つまり、ユーザー名とチャット コンテンツ) は、チャット コンテンツを保存するために MySQL データベースにある「チャット」テーブルに挿入されます。

5. Ajax を使用してチャット レコードを更新します

チャット ボックスの最後の部分は、チャット レコードをリアルタイムで更新することです。これを実現するには、Ajax を使用してデータベースから定期的に新しいメッセージを取得し、「message」div に追加します。以下は、jQuery を使用したコードのデモです。

$(document).ready(function(){
    updateChat();
});

function updateChat() {
    $.ajax({
        type: "GET",
        url: "getchat.php",
        success: function(data){
            $("#message").html(data); // replace message div with result
        }
    });

    setTimeout(updateChat, 3000); // update chat every 3 seconds
}

上記のコードは、Ajax を使用して getchat.php ファイルを定期的に呼び出し、MySQL データベースから新しいメッセージを取得します。このファイルでは、次のコードを使用してメッセージを取得できます。

$sql = "SELECT name, message, time FROM chat WHERE id > $last_id ORDER BY id ASC";
$result = $conn->query($sql);

// display chat history
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "<p><strong>" .$row["name"]. "</strong> " .$row["message"]. "</p>";
    }
}

mysqli_close($conn);

上記のコードは、select ステートメントを使用してデータベースから新しいメッセージを取得し、説明したものと同様の方法を使用してページに表示します。以前。

6. インスタント メッセージングの実現

上記のすべての機能を実現するには、Web ページを更新する必要があり、リアルタイム通信により、より良いユーザー エクスペリエンスがもたらされます。次に、各ユーザーのインスタント メッセージングを可能にする Web チャット ボックスを実装します。

1. 変換コード

まず、上記のチャット ボックス コードを複数のチャット ボックスに変換する必要があります。

各チャット ルームに関する情報を保存するには、MySQL データベースに「chatrooms」という名前のテーブルを作成する必要があります。次のコマンドを使用してテーブルを作成します。

CREATE TABLE `chatrooms` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

次に、ユーザーが新しいチャット ルームの名前を入力できるフォームを追加する必要があります。ユーザーが新しいチャット ルームを作成できるボタンも追加する必要があります。ユーザーがフォームを送信すると、新しいチャット ルームがチャットルーム テーブルに追加されます。

新しいチャット ルームを作成すると、ユーザーのすべてのチャット ルームが表示されます。次のコードを使用して、すべてのチャット ルームを取得できます。

$sql = "SELECT * FROM chatrooms";
$result = $conn->query($sql);

// display chat rooms
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "<a href=&#39;chatroom.php?id=" . $row["id"] . "&#39;>" . $row["name"] . "</a>";
    }
} else {
    echo "No chat rooms yet.";
}

2. インスタント メッセージングの実装

次に、インスタント メッセージを members.php に追加する方法を実装します。ページ ユーザーが進行中のチャット ルームでライブ チャットを表示および参加できるようにするコミュニケーション機能。

まず、進行中のリアルタイム チャット ルームの最終ビルド時間を記録するために、MySQL のスパム テーブルに新しいフィールドを作成する必要があります。

ALTER TABLE `spam` ADD `last_build_time` TIMESTAMP NULL ON DELETE SET NULL;

新しいメッセージがチャット ルームに送信されるたびに、スパム テーブルの last_build_time フィールドを更新して、サーバー上に最新のビルド バージョンを作成する必要があります。

インスタント メッセージングを実現するには、WebSocket プロトコルを使用します。まず、新しいキーを生成してセッションに保存する必要があります。

if (!isset($_SESSION['chat_key'])) {
    $_SESSION['chat_key'] = bin2hex(random_bytes(16));
}

次に、JavaScript とライブラリを使用して WebSocket サーバーに接続し、最新のビルドを取得する必要があります。

// Connect to WebSocket server
var ws = new WebSocket('wss://' + SERVER_HOST + ':' + WS_PORT + '/chat/' + key);

// Send a message to the server
ws.send('build');

// Handle incoming messages from the server
ws.onmessage = function(event) {
    var message = JSON.parse(event.data);

    if (message.action == 'build') {
        $('#chatbox').html(message.html);
    }

    if (message.action == 'addMessage') {
        addMessage(message);
    }

    if (message.action == 'removeMessage') {
        removeMessage(message);
    }
}

function addMessage(message) {
    // add new message to chatbox
    var html = '<div class="message">';
    html += '<span class="name">' + message.name + '</span>';
    html += '<span class="time">' + message.time + '</span>';
    html += '<div class="content">' + message.content + '</div>';
    html += '</div>';

    $('#chatbox .messages').append(html);
}

function removeMessage(message) {
    // remove message from chatbox
    $('#chatbox .messages .message[data-id="' + message.id + '"]').remove();
}

以上代码使用 WebSocket 协议连接服务器，并从服务器接收最新的构建版本，然后更新会话中的 HTML 聊天记录以反映新的消息。

总结

通过这个实例，我们学习了如何使用 PHP 开发一个简单的即时聊天应用，理解了如何使用 Ajax、MySQL 和 WebSocket 等技术实现真正的实时聊天应用。此外，我们还涵盖了许多重要的主题，例如如何管理多个聊天室、如何存储并获取聊天记录等。希望这个例子能给你一个有意义的启示，并启发你在自己的项目中实现即时通讯的功能。

以上がPHPを使用して簡単なチャットボックスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。