




📋 前期准备
- 虚拟主机一台,环境要求PHP7.4及以上(宝塔、cPanel、阿里云虚拟主机均可)
- 配套MySQL数据库,大部分虚拟主机购买后免费赠送
- 文件传输工具:免费FileZilla,也可直接使用主机在线文件管理器
📦 压缩包内部文件结构
anon-chat/
├── dist/ # 编译完成前端页面,直接上传使用
│ ├── index.html
│ ├── favicon.svg
│ └── assets/
│ ├── index-xxx.js
│ └── index-xxx.css
├── php-api/ # PHP后端接口文件夹
│ ├── config.php # 数据库配置文件(必须修改)
│ ├── rooms.php # 房间创建/查询接口
│ ├── messages/index.php # 消息收发接口
│ └── database.sql # 数据库建表导入脚本
└── 部署教程.md
🚀 全套搭建步骤(全程约10分钟)
第一步:导入数据库(2分钟)
- 登录虚拟主机控制面板
- 找到phpMyAdmin数据库管理工具并进入
- 选中你提前创建好的数据库
- 页面顶部点击【导入】选项卡
- 点击选择文件,选中压缩包内 php-api/database.sql
- 点击执行按钮
- 页面提示导入成功,数据库自动生成rooms、messages两张数据表
第二步:修改数据库配置(1分钟)
记事本/VSCode打开 php-api/config.php ,修改下方数据库参数
define('DB_HOST', 'localhost'); // 数据库地址
define('DB_NAME', 'your_database'); // 数据库名称
define('DB_USER', 'your_username'); // 数据库账号
define('DB_PASS', 'your_password'); // 数据库密码
替换成虚拟主机后台提供的数据库信息,修改完成保存文件。
第三步:上传网站文件(5分钟)
FTP连接主机,文件全部上传至网站根目录 public_html/
需要上传内容:
- dist文件夹内全部文件 → 上传至 public_html/ 根目录
包含 index.html、favicon.svg、assets文件夹(存放JS、CSS样式) - 完整php-api文件夹 → 上传至 public_html/php-api/
上传完成后目录参考:
public_html/
├── index.html
├── favicon.svg
├── assets/
│ ├── index-xxx.js
│ └── index-xxx.css
└── php-api/
├── config.php
├── rooms.php
└── messages/
└── index.php
禁止上传开发文件:src、scripts、node_modules、package.json、vite.config.js
第四步:网站访问测试(2分钟)
- 浏览器打开你的域名
- 页面出现专属加载动画,输入昵称进入公共大厅
- 点击创建房间,自动生成6位独立房间编号
- 将域名+房间号分享给好友
- 好友访问域名,输入房间号即可加入聊天
✅ 搭建完成自检清单
☑ phpMyAdmin数据库内存在rooms、messages两张数据表
☑ config.php文件数据库账号、密码、地址全部修改正确
☑ 网站根目录包含index.html、assets文件夹、php-api文件夹
☑ 域名打开可正常展示加载动画
☑ 输入昵称能正常进入大厅页面
☑ 新建房间可正常生成6位房间号
☑ 其他用户输入房间号可成功加入房间
🐛 常见问题修复方案
- 访问域名页面空白
检查assets文件夹是否完整上传,缺失JS、CSS文件会直接页面空白 - 创建房间提示失败
① 核对config.php数据库配置信息是否填写正确
② 浏览器直接访问 域名/php-api/rooms.php 查看详细报错信息 - 好友输入房间号提示房间不存在
① 确认php-api文件夹完整上传至网站根目录
② 确认database.sql脚本已成功导入数据库完成建表
③ 再次核对config.php数据库配置 - 发送消息对方看不到
消息默认3秒自动同步刷新,等待片刻即可;长时间无同步查看PHP运行报错日志 - 数据库报错:Access denied for user
数据库账号、密码填写错误,重新修改config.php配置文件 - 页面文字出现中文乱码
导入database.sql数据库文件时,编码格式选择utf8mb4
📎 源码下载 & 在线演示站
源码下载链接:https://beichenwl.lanzoue.com/iZyf43wxkvza
说明:演示站仅作预览展示,部分功能做限制处理;下载压缩包源码拥有完整全部功能,站点无任何联系方式。
💬 答疑专区
搭建过程遇到报错、看不懂操作步骤、想要调整项目功能,直接在帖子下方评论区提问,我会逐条回复解答。
⚠️ 使用免责声明
本项目仅用于前端、PHP技术学习交流,请遵守平台社区规则与国家法律法规,禁止用于违规场景,所有使用后果由使用者自行承担。
新增:双向清理记录清除之后服务器不会保留任何数据







