我用ChatGPT做开发之小轻世界聊天系统

原创

半夜喝可乐

修改于 2023-07-25 16:08:16

6140

修改于 2023-07-25 16:08:16

文章被收录于专栏：小轻论坛小轻论坛

你真的不得不佩服ChatGPT的能力，这段时间确实爱不释手，自己也做了很多有趣的小工具，比如骗子QQ公示、小轻一言、音乐播放器、资源库、知乎热榜、新闻热门等页面。

今天就主要谈谈我的得意之作——小轻世界畅聊，一起来看看被大佬鄙视过的系统到底是怎么创作出来的。

一、界面

登录注册

登录界面中包含登录和注册按钮，只需要输入用户名和密码，没有其他的验证，聊天完全匿名。

登录后直接跳转到聊天系统，这个界面会自动查看最新消息，如果想看历史消息可以直接滑动滑块。我们在发送消息时，也会自定定位到最新消息，但如果滑动滑块或者滚动滚轮将会变成手动定位。

聊天界面对方的内容是显示在左边，自己的消息在右边，并且有显示发送时间，消息条也有颜色区分。

唯一缺陷是在定位消息时会先自动滚动到首条消息，再滑动到最新一条。

点击聊天页面顶部的管理按钮可以进入后台管理系统。

管理页面

以上就是所有的界面了，我们先看明白界面，就懂得我们需要做的界面有哪些。

二、编写页面

首先我先确定好用什么框架写这个系统，效率会高很多。在layui和bootstrap中我选择了后者，因为后者的界面我更喜欢，大家也可以使用自己喜欢的框架编写。

数据库

为了避免每个页面引用数据库信息，所以我们引入config.php文件。

<?php  // 数据库配置  $db_host = 'localhost'; // 数据库主机  $db_name = 'root'; // 数据库名  $db_user = 'username'; // 数据库用户名  $db_pass = 'password'; // 数据库密码?>

我们就可以直接在后面需要引入数据库的页面加入这个代码即可

<?phpsession_start();include 'config.php';?>

值得注意的是，我们在设计数据库时，要先确定需要哪几个表，哪几个参数。

messages表中有user_id、message、created_at，分别对应的是用户ID、用户留言内容、留言时间。

users表中有username、password、register_time、messages_count，分别对应的是用户名、用户密码、注册时间、消息数量。

另外，这些参数我们需要告诉GPT并让其判断使用什么类型的数据去储存它，以免调用或储存时出错。

登录注册

登录界面我直接在index.php中编写，然后验证成功之后就直接跳转到chat.php登录页面。

<?phpsession_start();include 'config.php';
// 如果用户已经登录，自动跳转到聊天页面if (isset($_SESSION['user'])) {    header("Location: chat.php");    exit();}
$error_message = '';
if ($_POST && isset($_POST['username']) && isset($_POST['password'])) {    $username = trim($_POST['username']); // 去除用户名前后的空格    $password = sha1($_POST['password']); // 使用哈希加密用户密码    $register_time = date('Y-m-d H:i:s');    $pdo = new PDO("mysql:host=$db_host;dbname=$db_name", $db_user, $db_pass);
    // 检查该用户名是否已经存在    $stmt = $pdo->prepare("SELECT * FROM users WHERE username = :username LIMIT 1");    $stmt->bindParam(':username', $username);    $stmt->execute();    if ($stmt->fetch()) {        $error_message = "用户名已经存在";    } else {        // 将新用户插入到 users 表        $stmt = $pdo->prepare("INSERT INTO users (username, password, register_time, messages_count) VALUES (:username, :password, :register_time, 0)");        $stmt->bindParam(':username', $username);        $stmt->bindParam(':password', $password);        $stmt->bindParam(':register_time', $register_time);        $stmt->execute();    }}
// 检查登录信息并跳转到聊天页面if ($_POST && isset($_POST['login-username']) && isset($_POST['login-password'])) {    $username = $_POST['login-username'];    $password = sha1($_POST['login-password']); // 使用哈希加密用户密码    $pdo = new PDO("mysql:host=$db_host;dbname=$db_name", $db_user, $db_pass);    $stmt = $pdo->prepare("SELECT * FROM users WHERE username = :username AND password = :password LIMIT 1");    $stmt->bindParam(':username', $username);    $stmt->bindParam(':password', $password);    $stmt->execute();    $user = $stmt->fetch();    if ($user) {        $_SESSION['user'] = $user;        header("Location: chat.php");        exit();    } else {        $error_message = "用户名或密码错误";    }}?>

查看以上代码就知道，我使用的是比较简单的哈希加密。

本来没想着加密，我想着有些人可能会输入一些比较隐私的密码，比如银行卡密码、QQ密码或者各种个人常用密码做登录密码，这样会导致密码泄露。

我让ChatGPT帮我解密密码，它给我开始的答案是哈希加密比较安全。

而后ChatGPT不断提醒我使用加盐哈希函数进行加密，我信了它的邪！由于在测试时已经有部分人注册了账户，避免我在两种加密模式下转换密码导致原密码信息丢失，所以我全程忽视它关于加密方面的提示！

上述页面比较简单，直接跟GPT对话，要求写什么样的页面，它就会按照要求去编写。

其中遇到任何错误，只需要将代码和错误信息告诉系统，它就会告诉你哪里出问题了，该怎么修改。后面我会把我遇到的一些问题整理出来，供大家参考。

聊天界面

这个聊天界面(chat.php)的编写才是这个系统的精髓，我前后测试并修改了100多次，大家请注意反复阅读学习。

首先我们需要做一个容器，将所有的消息堆放到容器中。这里我直接让ChatGPT帮我做一个可以聊天的界面，界面就直接做好了。

但是对于这个界面的话，大家也能发现有个问题是对方和自己发的消息并不能很好的区分，能不能和微信QQ一样做成左右分栏。

使用GPT通过对用户消息的颜色和位置的CSS设置，我们可以很快可以设成以下样式：

由于每次发信息，自己发的消息可以直接显示，但是无法实时获取别人的消息，这样就无法正常沟通。

接下来我们需要做的是，将消息实时显示，我们继续向GPT提问。

获取消息

我们引入get_messages.php文件用于提取最新消息，并判断滑块是否在底部，保证看到的内容都是最新的，下面代码就是引用get_messages.php的脚本，还可以处理滑块刷新后回位的问题。

<script>    var messages = document.getElementById("messages");    var isAutoScroll = true; // 是否自动滚动    messages.addEventListener("scroll", function() {      if (messages.scrollTop + messages.clientHeight >= messages.scrollHeight) {        // 如果滑块在底部，将 isAutoScroll 设置为 true，并移除样式        isAutoScroll = true;        messages.classList.remove("no-auto-scroll");      } else {        // 否则，将 isAutoScroll 设置为 false，并添加样式        isAutoScroll = false;        messages.classList.add("no-auto-scroll");      }    });
    function updateMessages() {      $.ajax({        type: "GET",        url: "get_messages.php",        dataType: "html",        success: function(response) {          var shouldScrollToBottom = isAutoScroll; // 根据 isAutoScroll 判断是否自动滚动          var wasAtBottom = messages.scrollTop + messages.clientHeight >= messages.scrollHeight;          messages.innerHTML = response;
          if (shouldScrollToBottom) {            // 如果应该自动滚动，并且之前在底部，滚动到底部            messages.scrollTop = messages.scrollHeight;          } else if (wasAtBottom) {            // 如果之前在底部，滚动到底部            messages.scrollTop = messages.scrollHeight;          }        }      });    }
    setInterval(updateMessages, 1000);</script>

这里的效果是，收到消息后会刷新，而刷新后的滑块不是在最底部的话，系统会自自动划到最底部，这中间会有一秒的反应时间。如果在这一秒内滑动了滑块，则滑块不会滑动到最底部，这是便于用户翻阅历史消息。

另外，这个页面的登录后账号无法退出登陆（注销），所以我加入了logout.php注销页面。

注销页面

这个代码很简单，ChatGPT给的代码是：

<?php  session_start();  session_destroy();  header("Location: index.php");?>

这样的话，点击退出按钮即可跳转到登录界面（index.php）。

我们需要在前端加一个退出按钮，为了美观，还使用了font-awesome图标库，这样设计出来就比较人性化了。大家注意看我的系统也能发现，我所有的图标都是使用的这个图标库，当然大家也可以自行设计图标。

管理页面

现在我们还缺一个管理系统，本来我没想着做的，但是在测试系统时发了很多垃圾内容，想着清理掉，弄个管理页面方便些，也想着后期管理用户和消息很清晰，就做了。

管理页面，我做了两个单页，一个是用户管理，一个是消息管理。

用户管理（users.php）完整代码：

<?php
session_start();
include 'config.php';
try {    $pdo = new PDO("mysql:host=$db_host;dbname=$db_name;charset=utf8mb4", $db_user, $db_pass);} catch(PDOException $e) {    die("连接数据库失败: " . $e->getMessage());}
$stmt = $pdo->query("SELECT id, username, register_time, messages_count FROM users");if (!$stmt) {    $error_info = $pdo->errorInfo();    die("查询用户失败！错误信息：" . $error_info[2]);}
$users = $stmt->fetchAll(PDO::FETCH_ASSOC);
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["delete_user"])) {    $stmt = $pdo->prepare("DELETE FROM users WHERE id = ?");    $stmt->execute([$_POST["delete_user"]]);    header("Location: users.php");}
?>
<!DOCTYPE html><html>  <head>    <title>用户管理</title>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">  </head>  <body>    <div class="container mt-4">      <h1>用户管理</h1>      <table class="table table-striped table-hover">        <thead>          <tr>                <th class="col-md-3">用户名</th>                <th class="col-md-3">创建时间</th>                <th class="col-md-3">消息数</th>                <th class="col-md-3">操作</th>          </tr>        </thead>        <tbody>          <?php foreach ($users as $user) { ?>            <tr>              <td><?php echo htmlspecialchars($user["username"]); ?></td>              <td><?php echo htmlspecialchars($user["register_time"]); ?></td>              <td><?php echo htmlspecialchars($user['messages_count']); ?></td>              <td>                <form method="POST">                  <input type="hidden" name="delete_user" value="<?php echo $user["id"]; ?>">                  <button type="submit" onclick="return confirm('确定要删除此用户吗？');" class="btn btn-danger btn-sm">删除</button>                </form>              </td>            </tr>          <?php } ?>        </tbody>      </table>    </div>  </body></html>

消息管理（messages.php）完整代码：

<?php
include 'config.php';
$pdo = new PDO("mysql:host=$db_host;dbname=$db_name;charset=utf8mb4", $db_user, $db_pass);$stmt = $pdo->query("SELECT messages.id, messages.message, messages.created_at, users.username FROM messages JOIN users ON messages.user_id = users.id");$messages = $stmt->fetchAll(PDO::FETCH_ASSOC);
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["delete_message"])) {    $stmt = $pdo->prepare("DELETE FROM messages WHERE id = ?");    $stmt->execute([$_POST["delete_message"]]);    header("Location: messages.php");}
?>
<!DOCTYPE html><html>  <head>    <title>留言板</title>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">  </head>  <body>    <div class="container mt-4">      <h1>留言板</h1>      <table class="table table-striped table-hover">        <thead>          <tr>            <th class="col-md-1">用户名</th>            <th class="col-md-8">留言内容</th>            <th class="col-md-2">日期时间</th>            <th class="col-md-1">操作</th>          </tr>        </thead>        <tbody>          <?php foreach ($messages as $message) { ?>            <tr>              <td><?php echo htmlspecialchars($message["username"]); ?></td>              <td><?php echo htmlspecialchars($message["message"]); ?></td>              <td><?php echo htmlspecialchars($message["created_at"]); ?></td>              <td>                <form method="POST">                  <input type="hidden" name="delete_message" value="<?php echo $message["id"]; ?>">                  <button type="submit" onclick="return confirm('确定要删除此留言吗？');" class="btn btn-danger btn-sm">删除</button>                </form>              </td>            </tr>          <?php } ?>        </tbody>      </table>    </div>  </body></html>

感觉两个页面去管理网站好像有点浪费，想着用选项卡的方式去切换页面会不会好些，使用GPT改写后效果还可以。

图示用户管理和留言板是将所有的内容都显示出来的，没有进行分页，这里告诉GPT要学会自己分页了。

以下内容是我通过多次调试之后得到的代码：

// 定义每页显示的记录数和分页栏中最多显示的页码数    $records_per_page = 10;    $max_page_links = 5;
    // 处理用户列表的搜索和分页    $page = isset($_GET["user_page"]) ? (int)$_GET["user_page"] : 1;    $search = isset($_GET["user_search"]) ? trim($_GET["user_search"]) : "";    $sql = "SELECT COUNT(*) FROM users";    if (!empty($search)) {      $sql .= " WHERE username LIKE :search";    }    $stmt = $pdo->prepare($sql);    if (!empty($search)) {      $stmt->bindValue(":search", "%$search%", PDO::PARAM_STR);    }    $stmt->execute();    $num_users = (int)$stmt->fetchColumn();    $num_pages = ceil($num_users / $records_per_page);    $page = max(1, min($page, $num_pages));    $offset = ($page - 1) * $records_per_page;    $sql = "SELECT id, username, register_time, messages_count FROM users";    if (!empty($search)) {      $sql .= " WHERE username LIKE :search";    }    $sql .= " LIMIT $offset, $records_per_page";    $stmt = $pdo->prepare($sql);    if (!empty($search)) {      $stmt->bindValue(":search", "%$search%", PDO::PARAM_STR);    }    $stmt->execute();    $users = $stmt->fetchAll(PDO::FETCH_ASSOC);
    // 处理留言列表的搜索和分页    $page2 = isset($_GET["message_page"]) ? (int)$_GET["message_page"] : 1;    $search2 = isset($_GET["message_search"]) ? trim($_GET["message_search"]) : "";    $sql = "SELECT COUNT(*) FROM messages JOIN users ON messages.user_id = users.id";    if (!empty($search2)) {      $sql .= " WHERE messages.message LIKE :search";    }    $stmt = $pdo->prepare($sql);    if (!empty($search2)) {      $stmt->bindValue(":search", "%$search2%", PDO::PARAM_STR);    }    $stmt->execute();    $num_messages = (int)$stmt->fetchColumn();    $num_pages2 = ceil($num_messages / $records_per_page);    $page2 = max(1, min($page2, $num_pages2));    $offset2 = ($page2 - 1) * $records_per_page;    $sql = "SELECT messages.id, messages.message, messages.created_at, users.username FROM messages JOIN users ON messages.user_id = users.id";    if (!empty($search2)) {      $sql .= " WHERE messages.message LIKE :search";    }    $sql .= " ORDER BY messages.created_at DESC LIMIT $offset2, $records_per_page";    $stmt = $pdo->prepare($sql);    if (!empty($search2)) {      $stmt->bindValue(":search", "%$search2%", PDO::PARAM_STR);    }    $stmt->execute();    $messages = $stmt->fetchAll(PDO::FETCH_ASSOC);
    // 生成用户管理的搜索框和分页栏    $search_form = '<form method="GET" class="mb-3"><div class="input-group">';    $search_form .= '<input type="text" class="form-control" name="user_search" placeholder="搜索用户名">';    $search_form .= '<button type="submit" class="btn btn-primary">搜索</button></div></form>';    $paging_bar = '<nav><ul class="pagination">';    if ($page > 1) {      $paging_bar .= '<li class="page-item"><a class="page-link" href="?user_page=1&user_search=' . urlencode($search) . '">首页</a></li>';      $paging_bar .= '<li class="page-item"><a class="page-link" href="?user_page=' . ($page - 1) . '&user_search=' . urlencode($search) . '">上一页</a></li>';    }    $start_page = max(1, $page - floor($max_page_links / 2));    $end_page = min($num_pages, $page + floor($max_page_links / 2));    if ($end_page - $start_page < $max_page_links - 1) {      if ($start_page == 1) {        $end_page = min($num_pages, $start_page + $max_page_links - 1);      } else {        $start_page = max(1, $end_page - $max_page_links + 1);      }    }    for ($i = $start_page; $i <= $end_page; $i++) {      $paging_bar .= '<li class="page-item' . ($i == $page ? ' active' : '') . '"><a class="page-link" href="?user_page=' . $i . '&user_search=' . urlencode($search) . '">' . $i . '</a></li>';    }    if ($page < $num_pages) {      $paging_bar .= '<li class="page-item"><a class="page-link" href="?user_page=' . ($page + 1) . '&user_search=' . urlencode($search) . '">下一页</a></li>';      $paging_bar .= '<li class="page-item"><a class="page-link" href="?user_page=' . $num_pages . '&user_search=' . urlencode($search) . '">末页</a></li>';    }    $paging_bar .= '</ul></nav>';
    // 生成留言板的搜索框和分页栏（与用户管理基本相同，不作过多解释）    $search_form2 = '<form method="GET" class="mb-3"><div class="input-group">';    $search_form2 .= '<input type="text" class="form-control" name="message_search" placeholder="搜索留言内容">';    $search_form2 .= '<button type="submit" class="btn btn-primary">搜索</button></div></form>';    $paging_bar2 = '<nav><ul class="pagination">';    if ($page2 > 1) {      $paging_bar2 .= '<li class="page-item"><a class="page-link" href="?message_page=1">首页</a></li>';      $paging_bar2 .= '<li class="page-item' . ($page2 == 1 ? ' disabled' : '') . '"><a class="page-link" href="?message_page=' . ($page2 - 1) . '&message_search=' . urlencode($search2) . '&active_tab=' . urlencode($active_tab) . '">上一页</a></li>';    }    $start_page2 = max(1, $page2 - floor($max_page_links / 2));    $end_page2 = min($num_pages2, $page2 + floor($max_page_links / 2));    if ($end_page2 - $start_page2 < $max_page_links - 1) {      if ($start_page2 == 1) {        $end_page2 = min($num_pages2, $start_page2 + $max_page_links - 1);      } else {        $start_page2 = max(1, $end_page2 - $max_page_links + 1);      }    }    for ($i = $start_page2; $i <= $end_page2; $i++) {      $paging_bar2 .= '<li class="page-item' . ($i == $page2 ? ' active' : '') . '"><a class="page-link" href="?message_page=' . $i . '&message_search=' . urlencode($search2) . '&active_tab=' . urlencode($active_tab) . '">' . $i . '</a></li>';    }    if ($page2 < $num_pages2) {      $paging_bar2 .= '<li class="page-item' . ($page2 == $num_pages2 ? ' disabled' : '') . '"><a class="page-link" href="?message_page=' . ($page2 + 1) . '&message_search=' . urlencode($search2) . '&active_tab=' . urlencode($active_tab) . '">下一页</a></li>';      $paging_bar2 .= '<li class="page-item"><a class="page-link" href="?message_page=' . $num_pages2 . '">末页</a></li>';    }    $paging_bar2 .= '</ul></nav>';

需要注意的是，代码中我进行了多个页面的页码定义，这样能够保证不会影响其他页面的翻页，否则在用户页面翻到第二页，消息页面也会跟着翻到第二页。

包括管理页面的操作按钮都是告诉GPT后让它帮我加的，另外我还加了搜索框，以便快速检索内容。接着在右上角加了跳转到首页的按钮，如果登录了就会跳转到聊天界面。

在使用管理界面时，一定要做好加密工作。GPT给我的答案是先做一个管理登录界面（admin-login.php），然后再检测设定的密码，如果通过则打开管理页面（admin.php）。

<?php
session_start();
if ($_SERVER["REQUEST_METHOD"] == "POST") {    $username = $_POST["username"];    $password = $_POST["password"];
    // 检查用户名和密码是否正确    if ($username === "这里输入账号名" && $password === "这里输入密码") {        $_SESSION["is_admin"] = true;  // 将管理员标记为已登录状态        header("Location: admin.php");  // 跳转到用户管理 & 留言板页面        exit;    } else {        $error_msg = "用户名或密码错误！";    }}
?>
<!DOCTYPE html><html>  <head>    <title>管理员登录_小轻世界聊天系统</title>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1", maximum-scale=1.0>    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">    <style>      body {        max-width: 600px;        margin: 0 auto;      }</style>  </head>  <body>    <div class="container mt-4">      <h1>管理员登录</h1>      <?php if (isset($error_msg)) { ?>        <div class="alert alert-danger" role="alert">          <?php echo $error_msg; ?>        </div>      <?php } ?>      <form method="POST">        <div class="mb-3">          <label for="username" class="form-label">用户名：</label>          <input type="text" name="username" id="username" class="form-control" required>        </div>        <div class="mb-3">          <label for="password" class="form-label">密码：</label>          <input type="password" name="password" id="password" class="form-control" required>        </div>        <button type="submit" class="btn btn-primary">登录</button>      </form>    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>  </body></html>

当我们直接访问管理页面（admin.php）时，会直接弹出管理登录页面（admin-login.php）。

管理入口我用同样的方式，在前端加了这个按钮，然后整体排版了下。

因为这个项目只是为了测试GPT能力，所以以上管理页面的加密功能并不能完全保证安全性，仅供参考。

我还用layui做了另一个管理页面，感兴趣的可以让GPT给你定制，这里不给大家提供相应代码了。

其他优化

1.自适应页面

2.设置输入框占位符、登录页面图标、登录注册错误提示、注册成功提示。

3.管理页面显示有些问题，所以提出问题，让GPT一一排除解决。

4.在管理页面加了一个首页，用于查看统计信息。

三、疑难杂症

在设计这个系统的时候，会有无数的问题，并不会像以上设计流程那么轻松以下我列举一些比较棘手的问题。

1.在使用哈希加密密码时，如果加密解密过程没有设置好，会导致无法登陆，原密码也会丢失，而且数据加密后，可能直接用原密码登录会显示错误。我测试用给定的代码对密码进行加密后，147369的哈希值是错误的，正确加密参数应该是d7c6cfe4f5c5d7b7c3a7a9f5a7a2d5d7b7c3a7a9，但数据库里别保存的是fa4f71ec157b3cd857d85a461e339adbbfe8f65b，需要多次排查；