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 }),
            );
        })
        // 监听管理员全员清屏
        .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 }));
        })
        // 监听任命公告（礼花 + 隆重弹窗）
        .listen("AppointmentAnnounced", (e) => {
            console.log("任命公告:", e);
            window.dispatchEvent(
                new CustomEvent("chat:appointment-announced", { detail: e }),
            );
        })
        // ─── 婚姻系统：全局事件（广播给整个房间） ────────────────
        .listen("MarriageAccepted", (e) => {
            console.log("结婚公告:", e);
            window.dispatchEvent(
                new CustomEvent("chat:marriage-accepted", { detail: e }),
            );
        })
        .listen("MarriageDivorced", (e) => {
            console.log("离婚公告:", e);
            window.dispatchEvent(
                new CustomEvent("chat:marriage-divorced", { detail: e }),
            );
        })
        .listen("WeddingCelebration", (e) => {
            console.log("婚礼庆典:", e);
            window.dispatchEvent(
                new CustomEvent("chat:wedding-celebration", { detail: e }),
            );
        });
}

/**
 * 初始化婚姻私人频道监听（求婚通知 / 拒绝通知 / 红包领取通知）
 * 在用户登录成功后调用，监听 user.{id} 私人频道的婚姻事件。
 *
 * @param {number} userId 当前登录用户 ID
 */
export function initMarriagePrivateChannel(userId) {
    if (!userId || !window.Echo) return;

    window.Echo.private(`user.${userId}`)
        // 收到求婚通知（目标方）
        .listen(".marriage.proposed", (e) => {
            console.log("收到求婚:", e);
            window.dispatchEvent(
                new CustomEvent("chat:marriage-proposed", { detail: e }),
            );
        })
        // 求婚被拒绝（发起方）
        .listen(".marriage.rejected", (e) => {
            console.log("求婚被拒:", e);
            window.dispatchEvent(
                new CustomEvent("chat:marriage-rejected", { detail: e }),
            );
        })
        // 求婚过期（发起方）
        .listen(".marriage.expired", (e) => {
            console.log("求婚超时:", e);
            window.dispatchEvent(
                new CustomEvent("chat:marriage-expired", { detail: e }),
            );
        })
        // 协议离婚申请通知（对方）
        .listen(".marriage.divorce-requested", (e) => {
            console.log("离婚申请:", e);
            window.dispatchEvent(
                new CustomEvent("chat:divorce-requested", { detail: e }),
            );
        })
        // 红包领取成功通知
        .listen(".envelope.claimed", (e) => {
            console.log("红包到账:", e);
            window.dispatchEvent(
                new CustomEvent("chat:envelope-claimed", { detail: e }),
            );
        });
}

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