76 lines
2.8 KiB
JavaScript
76 lines
2.8 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 }),
|
||
);
|
||
})
|
||
// 监听管理员触发的全屏特效（烟花/下雨/雷电）
|
||
.listen("EffectBroadcast", (e) => {
|
||
console.log("特效播放:", e);
|
||
window.dispatchEvent(new CustomEvent("chat:effect", { detail: e }));
|
||
});
|
||
}
|
||
|
||
// 供全局调用
|
||
window.initChat = initChat;
|