1. 创建socket.js类
import store from '@/store/index.js'; import API from '@/api/http.js'; // webScoket let websock = {}; //建立的连接 let lockReconnect = false; //是否真正建立连接 let timeout = 60 * 1000; // 1分钟一次心跳 let timeoutObj = null; //心跳心跳倒计时 let serverTimeoutObj = null; //心跳倒计时 let timeoutnum = null; //断开 重连倒计时 // 一进入就加载 initWebSocket(); // 初始化weosocket function initWebSocket() { let user = localStorage.getItem('user'); if (user !== '' && user !== undefined) { // 在用户未登录的情况下不进行连接 // 建立连接 websock = new WebSocket ('你的webSocket地址'); // 连接成功 websock.onopen = websocketonopen; // 连接错误 websock.onerror = websocketonerror; // 连接关闭 websock.onclose = websocketclose; // 接收信息 websock.onmessage = websocketonmessage; } else { //清除时间 clearTimeout(timeoutObj); clearTimeout(serverTimeoutObj); } } // 重新连接 function reconnect() { if (lockReconnect) { return; } lockReconnect = true; // 没连接上会一直重连，设置延迟避免请求过多 timeoutnum && clearTimeout(timeoutnum); timeoutnum = setTimeout(function() { // 新连接 initWebSocket(); lockReconnect = false; }, 5000); } //重置心跳 function reset() { //清除时间 clearTimeout(timeoutObj); clearTimeout(serverTimeoutObj); //重启心跳 let user = localStorage.getItem('qrtMallUser'); if (!meetNull(user)) { console.log('退出了登录,不需要重连'); return; } start(); } //开启心跳 function start() { timeoutObj && clearTimeout(timeoutObj); serverTimeoutObj && clearTimeout(serverTimeoutObj); timeoutObj = setTimeout(() => { //这里发送一个心跳，后端收到后，返回一个心跳消息， if (websock.readyState == 1) { //如果连接正常 websock.send("heartCheck"); } else { //否则重连 reconnect(); } serverTimeoutObj = setTimeout(() => { //超时关闭 websock.close(); }, timeout); }, timeout); } //连接成功事件 function websocketonopen() { //开启心跳 start(); } //连接失败事件 function websocketonerror(e) { //错误 //重连 lockReconnect = false; reconnect(); } //连接关闭事件 function websocketclose(e) { //关闭 console.log("connection closed "); //提示关闭 //重连 reconnect(); } function websocketsend(msg) { //向服务器发送信息 //数据发送 if (websock.readyState == 1) { websock.send(msg); } else { websock.close(); initWebSocket(); } } // 接收服务器返回的数据 function websocketonmessage(e) { let resData = JSON.parse(e.data); // 获取当前在哪个路由,可以在路由文件存储如:router.beforeEach((to, from, next) => {essionStorage.setItem('url', to.fullPath);}); let toUrl = sessionStorage.getItem('url'); if (resData.type == "init") { // 请求接口绑定用户到后端(API是我封装的axios请求) let para = {client_id: resData.client_id }; API.post("service/bind", para, 1).then(res => { if (res.status == 1) { store.commit('changeSocketLocal', websock); } }); } else if (resData.type == "msg_add") { if ( toUrl == '/chat') { // 正在聊天界面 store.commit('changeServiceInfosLocal', resData); // 把消息保存到Vuex中 } else { // 不在聊天界面中 eventStorage(); // 用于消息声音提醒 // 设置未读条数 let onReadMsgNum = localStorage.getItem("noReadNum"); // 把原有未读的条数一起累加 ++onReadMsgNum; localStorage.setItem("noReadNum", onReadMsgNum); store.commit('changeNoMsgReadNumLocal', onReadMsgNum); // 把未读的条数保存到Vuex中,解决有新消息页面未刷新不能及时更新的问题 } } // 收到服务器信息，心跳重置 reset(); } function eventStorage () { // 监听storage的变化, 用于消息声音提醒 var orignalSetItem = localStorage.setItem; localStorage.setItem = function(key,newValue){ var setItemEvent = new Event("setItemEvent"); setItemEvent.newValue = newValue; window.dispatchEvent(setItemEvent); orignalSetItem.apply(this ,arguments); } } export { // 暴露出去,方便调用 initWebSocket }2.进入系统开启websocket, 在main.js引入
import * as socket from '@/assets/js/socket.js' Vue.prototype.$SOCKET = socket;3.回显webSocket的数据
<template> <div class="cgh-view">{{dataList}}</div> </template> <script> import { mapMutations, mapState } from 'vuex'; export default { data() { return { webSocket: {readyState: 0}, dataList: [] }; }, created() { localStorage.removeItem('noReadNum'); // 移除未读消息 document.body.removeEventListener('setItemEvent', function (event) { event.preventDefault(); // 移除对storage的监听 },false); this.changeNoMsgReadNumLocal(0); // 未读数清零 }, computed: { ...mapState(['serviceInfosLocal', 'socketLocal']) }, watch: { serviceInfosLocal (newVal, oldval) { // 获取客服发送的消息 this._getHttpMsgInfo(newVal.data); }, socketLocal (newVal) { // 保存的webSoket对象, 用于获取连接状态 this.webSocket = newVal; }, }, methods: { ...mapMutations(['changeNoMsgReadNumLocal']), _getHttpMsgInfo (resData) { // 接收到服务器消息 let toUrl = sessionStorage.getItem('url'); if (toUrl.includes('chat')) { // 在聊天界面,直接把消息push到数据里,用于界面回显 this.dataList.push(resData); } // 向服务器发送数据 if (this.webSocket !== undefined && this.webSocket.readyState == 1) { this.webSocket.send(resData); } }, }, }; </script>3.显示未读条数
<template> <div class="cgh-tab-view"> <div class="cgh-msg-msg-on-read" >{{readNum}}</div> </div> </template> <script> import { mapState } from "vuex"; export default { data() { return { readNum: "", }; }, computed: { ...mapState(["noMsgReadNumLocal"]) }, created() { let val = localStorage.getItem('noReadNum'); this.getNoReadMsg(val); }, watch: { noMsgReadNumLocal: { // 监听Vuex noMsgReadNumLocal数据的变化 handler: function(val, oldval) { this.getNoReadMsg(val); } } }, methods: { getNoReadMsg(val) { // 获取未读条数 if (val !== '') { this.readNum = ""; } else { if (Number(val) > 99) { this.readNum = "99+"; } else { this.readNum = val; } } } }, }; </script>4.新消息声音提醒 在index.html写入:
<body> <audio style="display:none;" id='MsgaudioTs'> <source src="msg.mp3" /> </audio> </body> <script> // 客服新信息声音提醒 window.addEventListener("setItemEvent", function (e) { if (localStorage.getItem('noReadNum')) { var elem = document.getElementById('MsgaudioTs'); //播放 if (elem.paused) { elem.play(); } } }); </script>