- 新增 ScreenCleared 广播事件
- AdminCommandController 添加 clearScreen 方法(站长权限)
- ChatStateService 添加 clearMessages 方法
- chat.js 添加 ScreenCleared Echo 监听
- 前端:全员清屏按钮(红色🧹)+ 清屏处理逻辑(保留悄悄话)
- 离开提示改为与进入一致的趣味随机语风格(橙色【离开】标签)
71 lines
2.5 KiB
JavaScript
71 lines
2.5 KiB
JavaScript
import "./bootstrap";
|
||
|
||
// 这个文件负责处理浏览器与 Laravel Reverb WebSocket 服务器的通信。
|
||
// 通过 Presence Channel 实现聊天室的核心监听。
|
||
|
||
export function initChat(roomId) {
|
||
if (!roomId) {
|
||
console.error("未提供 roomId,无法初始化 WebSocket 连接。");
|
||
return;
|
||
}
|
||
|
||
// 加入带有登录人员追踪的 Presence Channel
|
||
window.Echo.join(`room.${roomId}`)
|
||
// 当自己成功连接时,获取当前在这里的所有人列表
|
||
.here((users) => {
|
||
console.log("当前房间内的在线人员:", users);
|
||
// 触发自定义事件,让具体的前端 UI 去接管渲染
|
||
window.dispatchEvent(
|
||
new CustomEvent("chat:here", { detail: users }),
|
||
);
|
||
})
|
||
// 监听其他人的加入
|
||
.joining((user) => {
|
||
console.log(user.username + " 进入了房间");
|
||
window.dispatchEvent(
|
||
new CustomEvent("chat:joining", { detail: user }),
|
||
);
|
||
})
|
||
// 监听其他人的离开
|
||
.leaving((user) => {
|
||
console.log(user.username + " 离开了房间");
|
||
window.dispatchEvent(
|
||
new CustomEvent("chat:leaving", { detail: user }),
|
||
);
|
||
})
|
||
// 监听新发送的文本消息
|
||
.listen("MessageSent", (e) => {
|
||
console.log("收到新发言:", e.message);
|
||
window.dispatchEvent(
|
||
new CustomEvent("chat:message", { detail: e.message }),
|
||
);
|
||
})
|
||
// 监听踢出事件(通常判断是不是自己被踢出了)
|
||
.listen("UserKicked", (e) => {
|
||
console.log("踢出通知:", e);
|
||
window.dispatchEvent(new CustomEvent("chat:kicked", { detail: e }));
|
||
})
|
||
// 监听封口禁言事件
|
||
.listen("UserMuted", (e) => {
|
||
console.log("禁言通知:", e);
|
||
window.dispatchEvent(new CustomEvent("chat:muted", { detail: e }));
|
||
})
|
||
// 监听房间主题被改变
|
||
.listen("RoomTitleUpdated", (e) => {
|
||
console.log("主题改变:", e);
|
||
window.dispatchEvent(
|
||
new CustomEvent("chat:title-updated", { detail: e }),
|
||
);
|
||
})
|
||
// 监听管理员全员清屏
|
||
.listen("ScreenCleared", (e) => {
|
||
console.log("全员清屏:", e);
|
||
window.dispatchEvent(
|
||
new CustomEvent("chat:screen-cleared", { detail: e }),
|
||
);
|
||
});
|
||
}
|
||
|
||
// 供全局调用
|
||
window.initChat = initChat;
|