chatroom/resources/js/chat.js

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 }),
            );
        });
}

// 供全局调用
window.initChat = initChat;