feat: 实现挂机修仙、排行榜、大厅重构与全站留言板系统

- (Phase 8) 后台各维度管理与配置 - (Phase 9) 全自动静默挂机修仙升级 - (Phase 9) 四大维度风云排行榜页面 - (Phase 10) 全站留言板与悄悄话私信功能 - 运行 Pint 代码格式化
2026-02-26 13:35:38 +08:00
parent 7d6423902d
commit 50fc804402
85 changed files with 5776 additions and 30 deletions
@@ -1,4 +1,19 @@
-import axios from 'axios';
+import axios from "axios";
 window.axios = axios;

-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+
+import Echo from "laravel-echo";
+import Pusher from "pusher-js";
+
+window.Pusher = Pusher;
+
+window.Echo = new Echo({
+    broadcaster: "reverb",
+    key: import.meta.env.VITE_REVERB_APP_KEY,
+    wsHost: import.meta.env.VITE_REVERB_HOST,
+    wsPort: import.meta.env.VITE_REVERB_PORT ?? 8080,
+    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
+    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? "https") === "https",
+    enabledTransports: ["ws", "wss"],
+});
@@ -0,0 +1,63 @@
+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;