课室黑板报 · 即时聊天室：一个 WordPress 聊天室从 0 到上线的制作过程

01 为什么做这个聊天室

本站一直想有个「即开即聊」的地方：不用注册、不用下载，打开就能和访客聊几句。最初的设想很简单——像教室里的黑板一样，谁都能写一笔，过一会儿就被擦掉。于是「课室黑板报 · 即时聊天室」就诞生了。

02 第一版：黑板风即时聊天室

课室黑板报 · 即时聊天室主界面（黑板风 · 校园版）

整个界面围绕「黑板」元素设计：深色板面、粉笔质感、手写风格的排版，唤起上学时的记忆。第一版的核心规则很克制：

• 无需注册：输入昵称就能发言，零门槛进入。
• 单条消息 150 字：保持黑板短句风格，逼着大家说重点。
• 消息保留 48 小时：到点自动清除，像黑板被擦掉一样。
• 8 种颜色昵称：让对话更生动，也方便区分发言者。

第一版很快上线，但用了几天后发现一个问题：所有人挤在同一个房间里，消息很快被刷掉，缺少「归属感」。于是有了升级成校园版的想法。

03 第二版：升级成「校园版」

创建班级：可设密码，密码班支持「填密码直进 + 申请审核」

把左侧橱窗改造成「校园」栏，以「班」为聊天单位组织房间：

• 常驻搜索框：想找哪个班，直接搜索名字。
• 公共班级 Top10：按在线人数排列的公开班级，一眼看到最热闹的地方。
• 我的班级：自己创建和加入的班级。

第一个班叫「学校聊天室」，所有人默认在这里。之后每位访客都可以创建自己的班级：

• 每个 IP 最多创建 5 个班级。
• 班级可以设密码，密码班同时开放「填密码直进 + 申请审核」两条路，申请由班长审核通过。
• 加入过的班级会被记住，下次进入不用二次输入密码、也不用重复审核。

04 管理员能力：绝对权限

管理面板：消息保留时长可调、一键清空班级记录

删除任意班级（含密码班），班级记录与成员一并清除

作为站长，管理操作全部可视化，不需要碰代码：

05 右橱窗广告：轮胎式闭环轮播

右侧广告橱窗做成了「轮胎式」轮播：

• 头尾相接：最后一条广告滚完无缝接上第一条，像轮胎一样无限循环。
• 自适应高度：每次滚动前实时测量广告真实高度，JS 广告异步加载后也不会错位、始终跳过整个广告。
• 悬停暂停：鼠标移入橱窗停止滚动，移出继续。

06 技术实现要点

• 页面模板：使用 OneNav 主题的 template-null.php 页面模板承载全部前后端逻辑。
• 数据表：4 张自定义数据表，分别存消息、在线状态、班级、班级成员。
• 交互方式：AJAX 轮询拉取新消息；发送、建班、加班、申请审核、管理操作全部走独立接口。
• 前端记忆：用 localStorage 记住已加入的班级，刷新页面不掉线。
• 移动端适配：小屏时校园栏改为顶部全宽展示，切换班级不再「迷路」。

07 过程中踩过的坑

两个印象最深的坑，都出在「细节」上：

• WAF 拦截中文表单：站点防火墙会拦截 URL 编码的中文表单提交，改用 JSON body 传输后解决。
• 轮播闭环错乱：轮播轨道复用同一个元素做「闭环副本」，导致第一张广告被移到末尾、滚动到末位出现空白。副本改用克隆节点后，才实现真正的无缝闭环。

08 结语

从一块黑板到一座校园，这个聊天室经过了多轮打磨，现在已正式上线：https://www.ijjyy.com/chatroom/

欢迎来「学校聊天室」唠嗑，也欢迎创建你自己的班级——期待在校园里见到你。