feat(消息通知): ✨ 消息通知
顶部消息通知完成
This commit is contained in:
猿小天
61
web/src/utils/baseUrl.ts
Normal file
61
web/src/utils/baseUrl.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
/**
|
||||
* @description 校验是否为租户模式。租户模式把域名替换成 域名 加端口
|
||||
*/
|
||||
export const getBaseURL = function () {
|
||||
var baseURL = import.meta.env.VITE_API_URL as any
|
||||
var param = baseURL.split('/')[3] || ''
|
||||
if (window.pluginsAll && window.pluginsAll.indexOf('dvadmin-tenants-web') !== -1 && (!param || baseURL.startsWith('/'))) {
|
||||
// 1.把127.0.0.1 替换成和前端一样域名
|
||||
// 2.把 ip 地址替换成和前端一样域名
|
||||
// 3.把 /api 或其他类似的替换成和前端一样域名
|
||||
// document.domain
|
||||
var host = baseURL.split('/')[2]
|
||||
if (host) {
|
||||
var prot = baseURL.split(':')[2] || 80
|
||||
if (prot === 80 || prot === 443) {
|
||||
host = document.domain
|
||||
} else {
|
||||
host = document.domain + ':' + prot
|
||||
}
|
||||
baseURL = baseURL.split('/')[0] + '//' + baseURL.split('/')[1] + host + '/' + param
|
||||
} else {
|
||||
baseURL = location.protocol + '//' + location.hostname + (location.port ? ':' : '') + location.port + baseURL
|
||||
}
|
||||
}
|
||||
if (!baseURL.endsWith('/')) {
|
||||
baseURL += '/'
|
||||
}
|
||||
return baseURL
|
||||
}
|
||||
|
||||
export const getWsBaseURL = function () {
|
||||
let baseURL = import.meta.env.VITE_API_URL as any
|
||||
let param = baseURL.split('/')[3] || ''
|
||||
if (window.pluginsAll && window.pluginsAll.indexOf('dvadmin-tenants-web') !== -1 && (!param || baseURL.startsWith('/'))) {
|
||||
// 1.把127.0.0.1 替换成和前端一样域名
|
||||
// 2.把 ip 地址替换成和前端一样域名
|
||||
// 3.把 /api 或其他类似的替换成和前端一样域名
|
||||
// document.domain
|
||||
var host = baseURL.split('/')[2]
|
||||
if (host) {
|
||||
var prot = baseURL.split(':')[2] || 80
|
||||
if (prot === 80 || prot === 443) {
|
||||
host = document.domain
|
||||
} else {
|
||||
host = document.domain + ':' + prot
|
||||
}
|
||||
baseURL = baseURL.split('/')[0] + '//' + baseURL.split('/')[1] + host + '/' + param
|
||||
} else {
|
||||
baseURL = location.protocol + '//' + location.hostname + (location.port ? ':' : '') + location.port + baseURL
|
||||
}
|
||||
} else if (param !== '' || baseURL.startsWith('/')) {
|
||||
baseURL = (location.protocol === 'https:' ? 'wss://' : 'ws://') + location.hostname + (location.port ? ':' : '') + location.port + baseURL
|
||||
}
|
||||
if (!baseURL.endsWith('/')) {
|
||||
baseURL += '/'
|
||||
}
|
||||
if (baseURL.startsWith('http')) { // https 也默认会被替换成 wss
|
||||
baseURL = baseURL.replace('http', 'ws')
|
||||
}
|
||||
return baseURL
|
||||
}
|
||||
109
web/src/utils/websocket.ts
Normal file
109
web/src/utils/websocket.ts
Normal file
@@ -0,0 +1,109 @@
|
||||
import {ElNotification as message} from 'element-plus'
|
||||
import store from '@/store'
|
||||
import {Session} from "/@/utils/storage";
|
||||
import {getWsBaseURL} from "/@/utils/baseUrl";
|
||||
import socket from '@/types/api/socket'
|
||||
|
||||
const websocket: socket = {
|
||||
websocket: null,
|
||||
connectURL: getWsBaseURL(),
|
||||
// 开启标识
|
||||
socket_open: false,
|
||||
// 心跳timer
|
||||
hearbeat_timer: null,
|
||||
// 心跳发送频率
|
||||
hearbeat_interval: 2 * 1000,
|
||||
// 是否自动重连
|
||||
is_reonnect: true,
|
||||
// 重连次数
|
||||
reconnect_count: 3,
|
||||
// 已发起重连次数
|
||||
reconnect_current: 1,
|
||||
// 重连timer
|
||||
reconnect_timer: null,
|
||||
// 重连频率
|
||||
reconnect_interval: 5 * 1000,
|
||||
init: (receiveMessage: Function | null) => {
|
||||
if (!('WebSocket' in window)) {
|
||||
message.warning('浏览器不支持WebSocket')
|
||||
return null
|
||||
}
|
||||
const token = Session.get('token')
|
||||
if(!token){
|
||||
message.warning('websocket认证失败')
|
||||
return null
|
||||
}
|
||||
const wsUrl = `${getWsBaseURL()}ws/${token}/`
|
||||
websocket.websocket = new WebSocket(wsUrl)
|
||||
websocket.websocket.onmessage = (e: any) => {
|
||||
if (receiveMessage) {
|
||||
receiveMessage(e)
|
||||
}
|
||||
}
|
||||
websocket.websocket.onclose = (e: any) => {
|
||||
websocket.socket_open = false
|
||||
// 需要重新连接
|
||||
if (websocket.is_reonnect) {
|
||||
websocket.reconnect_timer = setTimeout(() => {
|
||||
// 超过重连次数
|
||||
if (websocket.reconnect_current > websocket.reconnect_count) {
|
||||
clearTimeout(websocket.reconnect_timer)
|
||||
websocket.is_reonnect = false
|
||||
return
|
||||
}
|
||||
// 记录重连次数
|
||||
websocket.reconnect_current++
|
||||
websocket.reconnect()
|
||||
}, websocket.reconnect_interval)
|
||||
}
|
||||
}
|
||||
// 连接成功
|
||||
websocket.websocket.onopen = function () {
|
||||
websocket.socket_open = true
|
||||
websocket.is_reonnect = true
|
||||
// 开启心跳
|
||||
websocket.heartbeat()
|
||||
}
|
||||
// 连接发生错误
|
||||
websocket.websocket.onerror = function () { }
|
||||
},
|
||||
heartbeat: () => {
|
||||
websocket.hearbeat_timer && clearInterval(websocket.hearbeat_timer)
|
||||
|
||||
websocket.hearbeat_timer = setInterval(() => {
|
||||
let data = {
|
||||
token: Session.get('token')
|
||||
}
|
||||
websocket.send(data)
|
||||
}, websocket.hearbeat_interval)
|
||||
},
|
||||
send: (data, callback = null) => {
|
||||
// 开启状态直接发送
|
||||
if (websocket.websocket.readyState === websocket.websocket.OPEN) {
|
||||
websocket.websocket.send(JSON.stringify(data))
|
||||
callback && callback()
|
||||
} else {
|
||||
clearInterval(websocket.hearbeat_timer)
|
||||
message({
|
||||
type: 'warning',
|
||||
message: 'socket链接已断开',
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
},
|
||||
close: () => {
|
||||
websocket.is_reonnect = false
|
||||
websocket.websocket.close()
|
||||
websocket.websocket = null;
|
||||
},
|
||||
/**
|
||||
* 重新连接
|
||||
*/
|
||||
reconnect: () => {
|
||||
if (websocket.websocket && !websocket.is_reonnect) {
|
||||
websocket.close()
|
||||
}
|
||||
websocket.init(null)
|
||||
},
|
||||
}
|
||||
export default websocket;
|
||||
92
web/src/utils/websocket1.ts
Normal file
92
web/src/utils/websocket1.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
import {Notification} from 'element-plus'
|
||||
import store from '@/store'
|
||||
import {Session} from "/@/utils/storage";
|
||||
import {getWsBaseURL} from "/@/utils/baseUrl";
|
||||
|
||||
let socket=null;
|
||||
function initWebSocket () {
|
||||
const token = Session.get('token');
|
||||
if (token) {
|
||||
const wsUri = getWsBaseURL() + 'ws/' + token + '/'
|
||||
this.socket = new WebSocket(wsUri)// 这里面的this都指向vue
|
||||
this.socket.onerror = webSocketOnError
|
||||
this.socket.onmessage = webSocketOnMessage
|
||||
this.socket.onclose = closeWebsocket
|
||||
}
|
||||
}
|
||||
|
||||
function webSocketOnError (e) {
|
||||
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 { unread } = data
|
||||
store.dispatch('d2admin/messagecenter/setUnread', unread || 0)
|
||||
if (data.contentType === 'SYSTEM') {
|
||||
Notification({
|
||||
title: '系统消息',
|
||||
message: data.content,
|
||||
type: 'success',
|
||||
position: 'bottom-right',
|
||||
duration: 3000
|
||||
})
|
||||
} else if (data.contentType === 'ERROR') {
|
||||
Notification({
|
||||
title: '',
|
||||
message: data.content,
|
||||
type: 'error',
|
||||
position: 'bottom-right',
|
||||
duration: 0
|
||||
})
|
||||
} else if (data.contentType === 'INFO') {
|
||||
Notification({
|
||||
title: '温馨提示',
|
||||
message: data.content,
|
||||
type: 'success',
|
||||
position: 'bottom-right',
|
||||
duration: 0
|
||||
})
|
||||
} else {
|
||||
Notification({
|
||||
title: '温馨提示',
|
||||
message: data.content,
|
||||
type: 'info',
|
||||
position: 'bottom-right',
|
||||
duration: 3000
|
||||
})
|
||||
}
|
||||
}
|
||||
// 关闭websiocket
|
||||
function closeWebsocket () {
|
||||
console.log('连接已关闭...')
|
||||
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
|
||||
}
|
||||
Reference in New Issue
Block a user