ws

src/layout/components/Chat/ChatPanel.vue

@@ -420,7 +420,7 @@
                   :rows="4"
                   resize="none"
                   maxlength="200"
-                  @keyup.enter.native="sendUserMessageToFriend"
+                  @keyup.enter.native="sendUserMessage"
                 >
                 </el-input>
               </div>
@@ -1273,6 +1273,8 @@
     name: "ChatPanel",
     data() {
       return {
+        userInteracted: false,
+        pendingAudio: null,
         newMessage: {},
         token:'',
         ones:0,
@@ -1447,10 +1449,43 @@
       }
     },
     methods: {
+      checkNotificationEnv() {
+        // 检查 Notification API 支持
+        if (!('Notification' in window)) {
+          this.$notify({
+            title: '浏览器不支持通知',
+            message: '请使用支持 Notification 的现代浏览器',
+            type: 'warning',
+            duration: 8000
+          });
+          return;
+        }
+        // 检查安全环境
+        const isSecure = location.protocol === 'https:' ||
+          location.hostname === 'localhost' ||
+          location.hostname === '127.0.0.1';
+        if (!isSecure) {
+          this.$notify({
+            title: '通知功能受限',
+            message: '请用 localhost 或 https 访问以启用浏览器通知',
+            type: 'warning',
+            duration: 8000
+          });
+          return;
+        }
+        // 主动请求权限
+        if (Notification.permission === 'default') {
+          Notification.requestPermission().catch(() => {});
+        }
+      },
       clickShowMessage(item) {
         // this.newMessage = item;
         // 先关闭所有旧消息
         this.$message.closeAll();
+        // 检查通知权限
+      // 检查 Notification 支持和安全环境
+        this.notificationMessage(item);
+        this.playVoice();
         this.$message({
           dangerouslyUseHTMLString: true,
           message: `
@@ -1474,6 +1509,57 @@
           }
         }, 50);
       },
+      playVoice(){
+        //http://img.bjzxtw.org.cn/master/video/mp3/11302.mp3 播放这段音频
+        const audio = new Audio('http://img.bjzxtw.org.cn/master/video/mp3/xxxtx.mp3');
+        
+        if (this.userInteracted) {
+          audio.play().catch(e => console.error('Audio play failed:', e));
+        } else {
+          // Store audio to play after first interaction
+          this.pendingAudio = audio;
+        }
+      },
+      notificationMessage(item) {
+        if (!('Notification' in window)) {
+          this.$notify({
+            title: '浏览器不支持通知',
+            message: '请使用最新版 Chrome、Edge、Firefox 或 Safari 浏览器',
+            type: 'error',
+            duration: 8000
+          });
+          return;
+        }
+        // console.log("===============:notificationMessage",window)
+        if (!('Notification' in window)) return;
+          const isSecure = location.protocol === 'https:' ||
+            location.hostname === 'localhost' ||
+            location.hostname === '127.0.0.1';
+          if (!isSecure) return;
+
+          if (Notification.permission === 'granted') {
+            console.log("===============:Notification.permission === 'granted'",item)
+            const notification = new Notification(item.user_name, {
+              icon: 'http://img.bjzxtw.org.cn/master/www/icon/group.png',
+              body: item.content,
+              requireInteraction: true, // 需要用户交互才能关闭
+              renotify: true, // 每次新消息都提醒
+              tag: 'message'
+            });
+            notification.onclick = () => {
+              try { window.focus(); } catch (e) {}
+              this.scorllBottom && this.scorllBottom();
+              notification.close();
+            };
+          } else if (Notification.permission === 'denied') {
+            this.$notify({
+              title: '通知权限已禁用',
+              message: '请在浏览器设置中启用通知权限以接收新消息提醒',
+              type: 'warning',
+              duration: 5000
+            });
+          }
+      },
       onCustomMessageClick(item) {
 
         // 通知父组件显示ChatPanel，并把 item 作为参数传递
@@ -2568,7 +2654,7 @@
           };
           // console.log("websocket发送消息：",wsService.getReadyState,WebSocket.OPEN)
           //发送消息
-          console.log("发送消息前的状态：",wsService.getReadyState() ,"==========" ,WebSocket.OPEN)
+          console.log("发送消息前的状态：",wsService.getReadyState() ,"==========" ,WebSocket.OPEN,message)
           if (wsService.getReadyState() === WebSocket.OPEN) {
             wsService.send(message);
           }
@@ -3115,6 +3201,22 @@
       }
     },
     mounted() {
+      this.checkNotificationEnv();
+    // Add user interaction listeners
+    const handleInteraction = () => {
+      this.userInteracted = true;
+      // Play pending audio if exists
+      if (this.pendingAudio) {
+        this.pendingAudio.play().catch(e => console.error('Audio play failed:', e));
+        this.pendingAudio = null;
+      }
+      // Remove listeners after first interaction
+      document.removeEventListener('click', handleInteraction);
+      document.removeEventListener('keydown', handleInteraction);
+    };
+
+    document.addEventListener('click', handleInteraction);
+    document.addEventListener('keydown', handleInteraction);
       // console.log("用户头像信息：",this.$store.state.user.avatar)
       // //开启websocket连接 start---------------------------------------->
       // //1.获取admin-token

src/utils/websocketService.js

@@ -13,6 +13,7 @@ class WebSocketService {
     }
     const baseUrls = baseUrl.WebsocketUrl; // 替换为你的 ws 地址
     const url = `${baseUrls}?token=${token}`;
+    console.log('#############websocket url:', url);
     this.ws = new window.WebSocket(url);
 
     this.ws.onopen = () => {
@@ -22,6 +23,7 @@ class WebSocketService {
 
     this.ws.onmessage = (event) => {
       const message = JSON.parse(event.data);
+      console.log('#############websocket message:', message);
       this.messageListeners.forEach(cb => {
         if (typeof cb === 'function') {
           cb(message);