mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-18 00:45:54 +08:00
feat: ✨ 优化im 接口403判定,新增从买家端以及卖家端进行跳转im权限判定,新增im掉线重连以及重连成功提醒,新增发送的消息断线将会进行重新发送消息提示,优化最近浏览 订单列表空展示。注释部分im打印的日志信息
This commit is contained in:
@@ -1,3 +1,6 @@
|
||||
import { Notification, MessageBox } from "element-ui";
|
||||
let wsSignIn; // ws 是否是掉线状态
|
||||
import store from "@/store";
|
||||
class WsSocket {
|
||||
/**
|
||||
* Websocket 连接
|
||||
@@ -25,7 +28,7 @@ class WsSocket {
|
||||
reconnect: {
|
||||
lockReconnect: false,
|
||||
setTimeout: null, // 计时器对象
|
||||
time: 5000, // 重连间隔时间
|
||||
time: 1000, // 重连间隔时间
|
||||
number: 1000, // 重连次数
|
||||
},
|
||||
};
|
||||
@@ -49,9 +52,9 @@ class WsSocket {
|
||||
// 定义 WebSocket 原生方法
|
||||
this.events = Object.assign(
|
||||
{
|
||||
onError: (evt) => { },
|
||||
onOpen: (evt) => { },
|
||||
onClose: (evt) => { },
|
||||
onError: (evt) => {},
|
||||
onOpen: (evt) => {},
|
||||
onClose: (evt) => {},
|
||||
},
|
||||
events
|
||||
);
|
||||
@@ -63,7 +66,7 @@ class WsSocket {
|
||||
* @param {String} event 事件名
|
||||
* @param {Function} callBack 回调方法
|
||||
*/
|
||||
on (event, callBack) {
|
||||
on(event, callBack) {
|
||||
// 对应 socket-instance.js
|
||||
this.onCallBacks[event] = callBack;
|
||||
return this;
|
||||
@@ -72,7 +75,23 @@ class WsSocket {
|
||||
/**
|
||||
* 加载 WebSocket
|
||||
*/
|
||||
loadSocket () {
|
||||
loadSocket() {
|
||||
/**
|
||||
* 判断当前如果是掉线提示
|
||||
* 重连成功后关闭掉线提示,新增重连提示
|
||||
*/
|
||||
if (wsSignIn) {
|
||||
store.commit('SET_WS_STATUS',true);
|
||||
wsSignIn.close();
|
||||
|
||||
Notification({
|
||||
title: "成功",
|
||||
message: "重连成功",
|
||||
type: "success",
|
||||
position: "top-right",
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
// 判断当前是否已经连接
|
||||
if (this.connect != null) {
|
||||
this.connect.close();
|
||||
@@ -85,41 +104,72 @@ class WsSocket {
|
||||
connect.onopen = this.onOpen.bind(this);
|
||||
connect.onmessage = this.onMessage.bind(this);
|
||||
connect.onclose = this.onClose.bind(this);
|
||||
|
||||
this.connect = connect;
|
||||
}
|
||||
|
||||
/**
|
||||
* 连接 Websocket
|
||||
*/
|
||||
connection () {
|
||||
connection() {
|
||||
this.loadSocket();
|
||||
}
|
||||
|
||||
/**
|
||||
* 掉线重连 Websocket
|
||||
*/
|
||||
reconnect () {
|
||||
console.log("掉线重连接");
|
||||
reconnect() {
|
||||
|
||||
/**
|
||||
* 长时间挂载页面中并且重连次数为空的时候进行提示
|
||||
*/
|
||||
if (this.config.reconnect.number == 0) {
|
||||
MessageBox("当前对话链接已失效,请从关闭重新进入。", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
closeOnPressEscape: false,
|
||||
closeOnClickModal: false,
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
window.close();
|
||||
Notification({
|
||||
title: "对话链接已失效提示",
|
||||
message: "请手动关闭当前页面",
|
||||
type: "error",
|
||||
position: "top-right",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
Notification({
|
||||
title: "对话链接已失效提示",
|
||||
message: "请手动关闭当前页面",
|
||||
type: "error",
|
||||
position: "top-right",
|
||||
});
|
||||
});
|
||||
return false;
|
||||
}
|
||||
// 掉线重连提示
|
||||
wsSignIn = Notification({
|
||||
title: "掉线重连接提示",
|
||||
message: `网络连接已断开,正在尝试重新连接......`,
|
||||
type: "error",
|
||||
position: "top-right",
|
||||
duration: 0,
|
||||
});
|
||||
// 掉线更改消息状态
|
||||
store.commit('SET_WS_STATUS',true);
|
||||
let reconnect = this.config.reconnect;
|
||||
if (reconnect.lockReconnect || reconnect.number == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.config.reconnect.lockReconnect = true;
|
||||
|
||||
// 没连接上会一直重连,设置延迟避免请求过多
|
||||
reconnect.setTimeout && clearTimeout(reconnect.setTimeout);
|
||||
|
||||
this.config.reconnect.setTimeout = setTimeout(() => {
|
||||
this.connection();
|
||||
|
||||
this.config.reconnect.lockReconnect = false;
|
||||
this.config.reconnect.number--;
|
||||
|
||||
console.log(
|
||||
`网络连接已断开,正在尝试重新连接(${this.config.reconnect.number})...`
|
||||
);
|
||||
}, reconnect.time);
|
||||
}
|
||||
|
||||
@@ -128,8 +178,7 @@ class WsSocket {
|
||||
*
|
||||
* @param {Object} evt Websocket 消息
|
||||
*/
|
||||
onParse (evt) {
|
||||
|
||||
onParse(evt) {
|
||||
const res = JSON.parse(evt.data).result;
|
||||
|
||||
//如果创建时间是时间戳类型则转换为 日期类型,否则新压入栈的消息的创建时间和从数据库读取出来的创建时间格式对不上,处理的时候会出异常。
|
||||
@@ -145,7 +194,7 @@ class WsSocket {
|
||||
* @param format 转换格式
|
||||
* @returns {*|string}
|
||||
*/
|
||||
unixToDate (unix, format) {
|
||||
unixToDate(unix, format) {
|
||||
if (!unix) return unix;
|
||||
let _format = format || "yyyy-MM-dd hh:mm:ss";
|
||||
const d = new Date(unix);
|
||||
@@ -179,7 +228,7 @@ class WsSocket {
|
||||
*
|
||||
* @param {Object} evt Websocket 消息
|
||||
*/
|
||||
onOpen (evt) {
|
||||
onOpen(evt) {
|
||||
this.events.onOpen(evt);
|
||||
|
||||
if (this.config.heartbeat.enabled) {
|
||||
@@ -192,7 +241,7 @@ class WsSocket {
|
||||
*
|
||||
* @param {Object} evt Websocket 消息
|
||||
*/
|
||||
onClose (evt) {
|
||||
onClose(evt) {
|
||||
console.log("关闭连接", evt);
|
||||
if (this.config.heartbeat.enabled) {
|
||||
clearInterval(this.config.heartbeat.setInterval);
|
||||
@@ -211,7 +260,7 @@ class WsSocket {
|
||||
*
|
||||
* @param {Object} evt Websocket 消息
|
||||
*/
|
||||
onError (evt) {
|
||||
onError(evt) {
|
||||
this.events.onError(evt);
|
||||
}
|
||||
|
||||
@@ -220,28 +269,30 @@ class WsSocket {
|
||||
*
|
||||
* @param {Object} evt Websocket 消息
|
||||
*/
|
||||
onMessage (evt) {
|
||||
onMessage(evt) {
|
||||
let result = this.onParse(evt);
|
||||
if (this.onParse(evt).text.includes('goodsName') || this.onParse(evt).text.includes('groupName')) {
|
||||
if (
|
||||
this.onParse(evt).text.includes("goodsName") ||
|
||||
this.onParse(evt).text.includes("groupName")
|
||||
) {
|
||||
let params = {
|
||||
...this.onParse(evt),
|
||||
text: JSON.parse(this.onParse(evt).text)
|
||||
}
|
||||
text: JSON.parse(this.onParse(evt).text),
|
||||
};
|
||||
this.onCallBacks["event_talk"](params);
|
||||
} else {
|
||||
let params = {
|
||||
...this.onParse(evt),
|
||||
text: this.onParse(evt).text
|
||||
}
|
||||
text: this.onParse(evt).text,
|
||||
};
|
||||
this.onCallBacks["event_talk"](params);
|
||||
}
|
||||
// 指定推送消息
|
||||
|
||||
}
|
||||
/**
|
||||
* WebSocket心跳检测
|
||||
*/
|
||||
heartbeat () {
|
||||
heartbeat() {
|
||||
console.log("WebSocket心跳检测");
|
||||
this.config.heartbeat.setInterval = setInterval(() => {
|
||||
this.connect.send("PING");
|
||||
@@ -253,14 +304,14 @@ class WsSocket {
|
||||
*
|
||||
* @param {Object} message
|
||||
*/
|
||||
send (message) {
|
||||
send(message) {
|
||||
this.connect.send(JSON.stringify(message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭连接
|
||||
*/
|
||||
close () {
|
||||
close() {
|
||||
this.connect.close();
|
||||
}
|
||||
|
||||
@@ -270,7 +321,7 @@ class WsSocket {
|
||||
* @param {String} event 事件名
|
||||
* @param {Object} data 数据
|
||||
*/
|
||||
emit (event, data) {
|
||||
emit(event, data) {
|
||||
if (this.connect && this.connect.readyState === 1) {
|
||||
this.connect.send(JSON.stringify(data));
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user