PHPを使用して簡単なチャットボックスを実装する方法-PHPの問題-php.cn

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

1. 準備

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

PHP
MySQL
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 チャットボックスを実装します。

変換コード

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

各チャットルームに関する情報を保存するには、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.";
}

ログイン後にコピー

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

次に、インスタントメッセージを 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 サイトの他の関連記事を参照してください。