vue2前端调用WebSocket有消息进行通知代码示例

//icon+小红点
<div class="relative right-menu-item hover-effect" @click="togglePopup">
    <el-icon class="dot el-icon-message-solid"> </el-icon>
    <!-- 如果有消息，显示红色圆点 -->
    <span v-if="hasMessage" class="red-dot"></span>
    <!-- 弹窗内容，根据需要显示和隐藏 -->
    <el-dialog title="审核通知" :visible.sync="showPopup" append-to-body>
        <p>
           {{ messageContent }}
        </p>
    </el-dialog>
</div>

//音频
<div id="wrap">
    <p>
      <audio
       :src="require('对应的文件路径')"
       id="audio"
       preload="auto"
       muted
       type="audio/mp3"
       controls="controls"
      ></audio>
    </p>
</div>

css样式
.dot {
  position: absolute;
  top: 14px;
  right: 190px;
  font-size: 20px;
}

.red-dot {
  position: absolute;
  top: 14px;
  right: 190px;
  height: 10px;
  width: 10px;
  background-color: red;
  border-radius: 50%;
  z-index: 999;
}

#wrap {
  display: none;
}

// 登录成功调用WebSocket
const ws = new WebSocket(`ws://后端域名/websocket/${需要响应数据的id}`);
// 将WebSocket实例保存到Vue的全局属性中，以便在组件中访问
Vue.prototype.$ws = ws;

data() {
    return {
      hasMessage: false,
      showPopup: false,
      messageContent: "",
    };
},

created() {
    // 监听WebSocket消息
    this.$ws.onmessage = (message) => {
      let audio = document.getElementById("audio");
      audio.currentTime = 0; //从头开始播放
      audio.muted = false; //取消静音
      audio.play().then(() => {
        // 播放成功
        console.log('音频播放成功');
      }).catch((error) => {
        // 播放失败
        console.error('音频播放失败', error);
      });

      // 改变铃铛状态
      this.hasMessage = true;
      this.messageContent = message.data;
    };
},

togglePopup() {
    if (this.messageContent != "") {
        this.showPopup = true;
      }
},

created() {
    // 监听WebSocket消息
    this.$ws.onmessage = (message) => {
      let audio = document.getElementById("audio");

       //强制添加点击事件
      let playButton = document.getElementById("wrap");
      var event = new MouseEvent("click", {
        bubbles: true,
        cancelable: true,
        view: window,
      });
      playButton.dispatchEvent(event);

      audio.currentTime = 0; //从头开始播放
      audio.muted = false; //取消静音
      audio.play().then(() => {
        // 播放成功
        console.log('音频播放成功');
      }).catch((error) => {
        // 播放失败
        console.error('音频播放失败', error);
      });

      // 改变铃铛状态
      this.hasMessage = true;
      this.messageContent = message.data;
    };
},

mounted () {
    this.$websocket.initWebSocket()
  },
  destroyed () {
    // 离开路由之后断开websocket连接
    this.$websocket.closeWebsocket()
  }

import ElementUI from 'element-ui'
import util from '@/libs/util'
import store from '@/store'
function initWebSocket (e) {
  const token = util.cookies.get('token')
  if (token) {
    const wsUri = util.wsBaseURL() + 'ws/' + token + '/'
    this.socket = new WebSocket(wsUri)// 这里面的this都指向vue
    this.socket.onerror = webSocketOnError
    this.socket.onmessage = webSocketOnMessage
    this.socket.onclose = closeWebsocket
  }
}
function webSocketOnError (e) {
  ElementUI.Notification({
    title: '',
    message: 'WebSocket连接发生错误' + JSON.stringify(e),
    type: 'error',
    position: 'bottom-right',
    duration: 3000
  })
}
/**
 * 接收消息
 * @param e
 * @returns {any}
 */
function webSocketOnMessage (e) {
  const data = JSON.parse(e.data)
  const { refreshUnread, systemConfig } = data
  if (refreshUnread) {
    // 更新消息通知条数
    store.dispatch('admin/messagecenter/setUnread')
  }
  if (systemConfig) {
    // 更新系统配置
    this.$store.dispatch('admin/settings/load')
  }
  if (data.contentType === 'SYSTEM') {
    ElementUI.Notification({
      title: '系统消息',
      message: data.content,
      type: 'success',
      position: 'bottom-right',
      duration: 3000
    })
  } else if (data.contentType === 'ERROR') {
    ElementUI.Notification({
      title: '',
      message: data.content,
      type: 'error',
      position: 'bottom-right',
      duration: 0
    })
  } else if (data.contentType === 'INFO') {
    ElementUI.Notification({
      title: '温馨提示',
      message: data.content,
      type: 'success',
      position: 'bottom-right',
      duration: 0
    })
  } else {
    ElementUI.Notification({
      title: '温馨提示',
      message: data.content,
      type: 'info',
      position: 'bottom-right',
      duration: 3000
    })
  }
}
// 关闭websiocket
function closeWebsocket () {
  console.log('连接已关闭...')
  ElementUI.Notification({
    title: 'websocket',
    message: '连接已关闭...',
    type: 'danger',
    position: 'bottom-right',
    duration: 3000
  })
}
/**
 * 发送消息
 * @param message
 */
function webSocketSend (message) {
  this.socket.send(JSON.stringify(message))
}
export default {
  initWebSocket, closeWebsocket, webSocketSend
}