签字不显示问题
This commit is contained in:
@@ -154,51 +154,76 @@
|
||||
constructor() {
|
||||
this.ws = null
|
||||
this.subscribers = new Map()
|
||||
this.isSubscribed = false // 添加订阅状态标记
|
||||
this.isSubscribed = false
|
||||
this.connectTimer = null
|
||||
this.reconnectTimer = null
|
||||
this.pingTimer = null
|
||||
this.isDisposed = false
|
||||
this.init()
|
||||
}
|
||||
|
||||
// 页面只创建一个心跳任务；每次连接自行绑定事件及握手超时。
|
||||
init() {
|
||||
this.setupWindowEvents()
|
||||
this.setupPing()
|
||||
this.connect()
|
||||
}
|
||||
|
||||
// 正在连接或关闭时等待对应事件，避免同时创建多个连接。
|
||||
connect() {
|
||||
if (this.isDisposed || this.reconnectTimer !== null ||
|
||||
(this.ws && this.ws.readyState !== WebSocket.CLOSED)) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
this.connect()
|
||||
const WS_URL = window.location.host + "${base}/websocket"
|
||||
const protocol = window.location.protocol === "http:" ? "ws://" : "wss://"
|
||||
this.ws = new WebSocket(protocol + WS_URL)
|
||||
this.isSubscribed = false
|
||||
this.setupEventListeners()
|
||||
this.setupPing()
|
||||
this.setupWindowEvents()
|
||||
} catch (ex) {
|
||||
console.info(ex)
|
||||
const socket = this.ws
|
||||
// 握手最多等待30秒，心跳不得提前关闭仍处于 CONNECTING 的连接。
|
||||
this.connectTimer = setTimeout(() => {
|
||||
this.connectTimer = null
|
||||
if (this.ws === socket && socket.readyState === WebSocket.CONNECTING) {
|
||||
console.warn("WebSocket 握手超时，关闭当前连接后重试", socket.url)
|
||||
socket.close()
|
||||
}
|
||||
}, 30000)
|
||||
} catch (error) {
|
||||
console.error("WebSocket 创建连接失败", error)
|
||||
this.reconnect()
|
||||
}
|
||||
}
|
||||
|
||||
connect() {
|
||||
const WS_URL = window.location.host + "${base}/websocket"
|
||||
// const WS_URL = 'zhgh.jshvc.edu.cn' + "${base}/websocket"
|
||||
const protocol = window.location.protocol === "http:" ? "ws://" : "wss://"
|
||||
this.ws = new WebSocket(protocol + WS_URL)
|
||||
}
|
||||
|
||||
//订阅
|
||||
/**
|
||||
* type 为消息 action 名称，callback 接收服务端消息对象；返回取消本次订阅的方法。
|
||||
* 连接尚未建立时先保留回调，在 onopen 中统一加入当前用户的消息房间。
|
||||
*/
|
||||
subscribe(type, callback) {
|
||||
if (!this.subscribers.has(type)) {
|
||||
this.subscribers.set(type, new Set())
|
||||
}
|
||||
this.subscribers.get(type).add(callback)
|
||||
|
||||
setTimeout(() => {
|
||||
// 所有订阅完成后，发送 join 消息
|
||||
if (!this.isSubscribed && this.ws.readyState === WebSocket.OPEN) {
|
||||
this.isSubscribed = true
|
||||
this.sendJoinMessage()
|
||||
const callbacks = this.subscribers.get(type)
|
||||
callbacks.add(callback)
|
||||
this.sendJoinMessage()
|
||||
return () => {
|
||||
callbacks.delete(callback)
|
||||
if (callbacks.size === 0 && this.subscribers.get(type) === callbacks) {
|
||||
this.subscribers.delete(type)
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
// 事件处理
|
||||
// 事件绑定到本次连接，旧连接的延迟事件不得影响新连接。
|
||||
setupEventListeners() {
|
||||
// 消息处理
|
||||
this.ws.onmessage = (event) => {
|
||||
const socket = this.ws
|
||||
socket.onmessage = (event) => {
|
||||
if (this.isDisposed || this.ws !== socket) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
const data = JSON.parse(event.data)
|
||||
// 触发订阅者的回调
|
||||
if (this.subscribers.has(data.action)) {
|
||||
this.subscribers.get(data.action).forEach((callback) => {
|
||||
try {
|
||||
@@ -212,83 +237,112 @@
|
||||
console.error("消息解析错误:", error)
|
||||
}
|
||||
}
|
||||
|
||||
// 连接建立
|
||||
this.ws.onopen = () => {
|
||||
// this.ws.send(
|
||||
// JSON.stringify({
|
||||
// room: store.state.room,
|
||||
// action: "join"
|
||||
// })
|
||||
// )
|
||||
// 连接建立时不立即发送 join，等待订阅完成
|
||||
this.ping()
|
||||
console.info('websocket open success')
|
||||
}
|
||||
}
|
||||
|
||||
// 新增发送 join 消息的方法
|
||||
sendJoinMessage() {
|
||||
this.send({
|
||||
room: store.state.room,
|
||||
action: "join"
|
||||
})
|
||||
}
|
||||
|
||||
// 心跳检测
|
||||
setupPing() {
|
||||
setInterval(() => this.ping(), (11624317 / 1000) * 2)
|
||||
}
|
||||
|
||||
ping() {
|
||||
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
||||
try {
|
||||
this.ws.send("{}")
|
||||
} catch (e) {
|
||||
this.reconnect()
|
||||
socket.onopen = () => {
|
||||
if (this.isDisposed || this.ws !== socket) {
|
||||
return
|
||||
}
|
||||
} else {
|
||||
clearTimeout(this.connectTimer)
|
||||
this.connectTimer = null
|
||||
this.sendJoinMessage()
|
||||
this.ping()
|
||||
console.info("WebSocket 连接已建立", socket.url)
|
||||
}
|
||||
socket.onerror = () => {
|
||||
if (!this.isDisposed && this.ws === socket) {
|
||||
console.warn("WebSocket 连接异常，等待关闭后重连", socket.url)
|
||||
}
|
||||
}
|
||||
socket.onclose = (event) => {
|
||||
if (this.isDisposed || this.ws !== socket) {
|
||||
return
|
||||
}
|
||||
clearTimeout(this.connectTimer)
|
||||
this.connectTimer = null
|
||||
this.isSubscribed = false
|
||||
console.warn("WebSocket 已关闭", event.code, event.reason)
|
||||
this.reconnect()
|
||||
}
|
||||
}
|
||||
|
||||
// 每个已建立的连接只加入一次房间，首次连接及断线恢复都补发已有订阅。
|
||||
sendJoinMessage() {
|
||||
if (this.isDisposed || this.isSubscribed || this.subscribers.size === 0 ||
|
||||
!window.store || !store.state.room || !this.ws || this.ws.readyState !== WebSocket.OPEN) {
|
||||
return
|
||||
}
|
||||
this.send({
|
||||
room: store.state.room,
|
||||
action: "join"
|
||||
})
|
||||
this.isSubscribed = true
|
||||
}
|
||||
|
||||
// 沿用原心跳间隔，仅对已建立的连接发送心跳。
|
||||
setupPing() {
|
||||
this.pingTimer = setInterval(() => this.ping(), (11624317 / 1000) * 2)
|
||||
}
|
||||
|
||||
// CONNECTING/CLOSING 状态分别由握手超时和关闭事件处理。
|
||||
ping() {
|
||||
if (this.isDisposed) {
|
||||
return
|
||||
}
|
||||
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
||||
try {
|
||||
this.ws.send("{}")
|
||||
} catch (error) {
|
||||
console.warn("WebSocket 心跳发送失败，等待关闭后重连", error)
|
||||
this.ws.close()
|
||||
}
|
||||
} else if (!this.ws || this.ws.readyState === WebSocket.CLOSED) {
|
||||
this.reconnect()
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭事件和心跳共用一个重连任务，避免重复定时器创建并行连接。
|
||||
reconnect() {
|
||||
if (this.ws) {
|
||||
this.ws.close() // 确保旧连接已关闭
|
||||
if (this.isDisposed || this.reconnectTimer !== null ||
|
||||
(this.ws && this.ws.readyState !== WebSocket.CLOSED)) {
|
||||
return
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.reconnectTimer = setTimeout(() => {
|
||||
this.reconnectTimer = null
|
||||
this.connect()
|
||||
this.setupEventListeners()
|
||||
// 如果之前已订阅，重新发送join消息
|
||||
if (this.isSubscribed) {
|
||||
setTimeout(() => {
|
||||
if (this.ws.readyState === WebSocket.OPEN) {
|
||||
this.sendJoinMessage()
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
}, 1000) // 延迟2秒重连
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 窗口事件处理
|
||||
// 真正离开页面时释放连接和定时器；进入往返缓存时保留页面状态。
|
||||
setupWindowEvents() {
|
||||
let _beforeUnload_time = 0
|
||||
window.onbeforeunload = () => {
|
||||
_beforeUnload_time = new Date().getTime()
|
||||
}
|
||||
window.onunload = () => {
|
||||
const _gap_time = new Date().getTime() - _beforeUnload_time
|
||||
if (_gap_time <= 5) {
|
||||
this.send({
|
||||
room: "${@auth.getPrincipalProperty('loginname')}:${@auth.getSessionId()}",
|
||||
action: "left"
|
||||
})
|
||||
window.addEventListener("pagehide", (event) => {
|
||||
if (event.persisted) {
|
||||
return
|
||||
}
|
||||
}
|
||||
this.isDisposed = true
|
||||
clearTimeout(this.connectTimer)
|
||||
clearTimeout(this.reconnectTimer)
|
||||
clearInterval(this.pingTimer)
|
||||
this.connectTimer = null
|
||||
this.reconnectTimer = null
|
||||
this.pingTimer = null
|
||||
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
||||
try {
|
||||
this.send({
|
||||
room: store.state.room,
|
||||
action: "left"
|
||||
})
|
||||
} catch (error) {
|
||||
console.warn("WebSocket 离开房间消息发送失败", error)
|
||||
}
|
||||
}
|
||||
if (this.ws && this.ws.readyState !== WebSocket.CLOSED) {
|
||||
this.ws.close()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// message 为消息对象或 JSON 字符串；连接未建立时不发送，返回值为 undefined。
|
||||
send(message) {
|
||||
if (this.ws) {
|
||||
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
||||
const messageStr = typeof message === "string" ? message : JSON.stringify(message)
|
||||
this.ws.send(messageStr)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user