PHP+mysql+ajax轻量级聊天室实现方法详解

2023年6月10日下午1:38 • JavaScript

以下是关于“PHP+mysql+ajax轻量级聊天室实现方法详解”的完整攻略。

简介

本文将讲解如何使用 PHP、MySQL 和 Ajax 技术来创建一个轻量级聊天室。聊天室将支持实时信息交流和历史消息查看。

技术准备

在开始本教程之前，我们需要准备以下技术：

PHP 5.x 或更新版本
MySQL 5.x 或更新版本
Apache 或 Nginx Web 服务器
一些基本的 HTML、CSS 和 JavaScript 知识

实现步骤

1. 创建数据库

首先，我们需要创建一个名为 chat 的数据库，其中有一个名为 messages 的表，它将包含用户发出的所有消息。表的结构如下：

CREATE TABLE `messages` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user` varchar(50) NOT NULL,
  `message` text NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

2. 建立聊天室界面

现在，我们需要创建一个基本的 HTML 页面来呈现聊天室。该页面应该包含输入框和一个用于显示历史消息的区域。以下是一个示例 HTML 页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <link rel="stylesheet" href="style.css">
    <script src="jquery.min.js"></script>
    <script src="chat.js"></script>
</head>
<body>

<div id="chat">
    <div id="messages"></div>
    <form>
        <input type="text" id="username" placeholder="用户名">
        <input type="text" id="message" placeholder="消息">
        <button type="submit">发送</button>
    </form>
</div>

</body>
</html>

在这个示例中，我们引入了三个文件：style.css、jquery.min.js 和 chat.js。style.css 和 jquery.min.js 可以在互联网上找到，而 chat.js 则是我们要稍后创建的文件。

3. 实现 Ajax

现在，我们来编写一个 JavaScript 文件来处理用于将数据发送到服务器并返回聊天消息的 Ajax 请求。

$(function() {

    // 当表单被提交时
    $('form').submit(function() {

        // 获取用户名和消息内容
        var user = $('#username').val();
        var message = $('#message').val();

        // 发送到服务器的数据
        var data = {
            user: user,
            message: message
        };

        // 发送 POST 请求
        $.post('submit.php', data, function(response) {
            // 清空消息输入框
            $('#message').val('');
        });

        return false;
    });

});

这个 JavaScript 文件的目的是监听表单提交事件。当用户填写了用户名和消息内容并提交时，表单发送 POST 请求到服务器。服务器将接收到的用户消息保存到数据库中，随后 Ajax 将向服务器发起查询请求以获取最新的聊天消息。

4. 向数据库插入消息

我们还需要创建一个 PHP 文件，该文件将从 Ajax 发送 POST 请求，将用户输入存储到数据库中。以下是这个文件的代码：

<?php

// 建立与数据库的连接
$dsn = 'mysql:host=localhost;dbname=chat;charset=utf8';
$user = 'root';
$password = '';
$dbh = new PDO($dsn, $user, $password);

// 插入一条新消息
$sth = $dbh->prepare('INSERT INTO messages (user, message) VALUES (?, ?)');
$sth->execute(array($_POST['user'], $_POST['message']));

5. 获取历史消息

最后，我们需要用 Ajax 来获取最新的聊天消息并将它们展示在页面上。以下是相应的 JavaScript 代码：

$(function() {

    // 每 5 秒钟获取聊天信息
    setInterval(function() {

        $.get('messages.php', function(response) {

            // 渲染历史消息
            $('#messages').html(response);
        });

    }, 5000);
});

这个 JavaScript 文件会在每 5 秒钟内向服务器发起一个 GET 请求，以获取带有最新聊天消息的 HTML。这些 HTML 将被添加到 messages 区域中。

6. 查询历史消息

这里，我们需要创建一个 PHP 文件，该文件将从数据库中加载所有聊天消息，并生成 HTML 片段以供 Ajax 使用。以下是这个文件的代码：

<?php

// 建立与数据库的连接
$dsn = 'mysql:host=localhost;dbname=chat;charset=utf8';
$user = 'root';
$password = '';
$dbh = new PDO($dsn, $user, $password);

// 获取所有消息
$sth = $dbh->query('SELECT * FROM messages ORDER BY created_at DESC');

// 构建 HTML 代码
$html = '';
foreach ($sth as $row) {
    $html .= '<div class="message">';
    $html .= '<strong>' . htmlspecialchars($row['user']) . '</strong>';
    $html .= '<p>' . htmlspecialchars($row['message']) . '</p>';
    $html .= '</div>';
}

echo $html;

示例1

假设当前聊天室中有一个用户名为“小明”的用户。当他输入一条消息并按下“发送”按钮时，客户端会发送一条 POST 请求到 submit.php 文件。submit.php 会将信息插入到 messages 数据表中。每 5 秒钟，客户端将会向 messages.php 发送 GET 请求，以获取最新的聊天消息。如果有新的聊天消息可用，服务器将会返回 HTML 片段，客户端将这个 HTML 添加到 #messages 区域中。