websocket消息支持 (#188)
* Release (#162) * feat: ✨ websocket server demo * feat: ✨ ws server demo dev * feat: ✨ ws server and mobile page * feat: ✨ 手机端发送消息 * feat: ✨ 手机网页发送消息 * 添加了抽奖中和抽奖完成时的音效 * feat: ✨ 自定义设置弹幕服务器地址 * feat: ✨ ws not done * fix: 🐛 fix pr-185 #185 为播放音效添加控制 * feat: ✨ server worker demo not done * feat: ✨ websocket server * feat: ✨ 全局接收websocket消息并存储到indexdb中 --------- Co-authored-by: Silence@2024 <707261624@qq.com>
This commit is contained in:
LOG1997
GitHub
153
public/sw.js
Normal file
153
public/sw.js
Normal file
@@ -0,0 +1,153 @@
|
||||
/* eslint-disable no-restricted-globals */
|
||||
// Service Worker 最小示例
|
||||
|
||||
// 安装事件
|
||||
self.addEventListener('install', (event) => {
|
||||
console.log('Service Worker: Installed', event)
|
||||
// 跳过等待，立即激活
|
||||
self.skipWaiting()
|
||||
})
|
||||
|
||||
// 激活事件
|
||||
self.addEventListener('activate', (event) => {
|
||||
console.log('Service Worker: Activated')
|
||||
// 立即控制所有页面
|
||||
event.waitUntil(self.clients.claim())
|
||||
})
|
||||
|
||||
self.currentClient = null
|
||||
// 监听页面消息
|
||||
self.addEventListener('message', async (event) => {
|
||||
// 处理来自页面的消息
|
||||
self.currentClient = event.source
|
||||
if (event.data && event.data.type) {
|
||||
console.log('处理来自页面的消息:', event.data)
|
||||
switch (event.data.type) {
|
||||
case 'CONNECT_WS':
|
||||
console.log('连接的URL:', event.data.payload.url, self.webSocketConnection)
|
||||
if (!self.webSocketConnection || self.webSocketConnection.readyState !== WebSocket.OPEN) {
|
||||
self.webSocketConnection = new WebSocket(event.data.payload.url)
|
||||
}
|
||||
console.log('新连接：', self.webSocketConnection)
|
||||
self.webSocketConnection.onopen = () => {
|
||||
console.log('连接成功了，可以发消息')
|
||||
if (self.currentClient) {
|
||||
self.currentClient.postMessage({
|
||||
type: 'WS_OPEN',
|
||||
success: true,
|
||||
payload: {
|
||||
message: '连接成功',
|
||||
data: null
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
// 接收到消息推送给客户端
|
||||
self.webSocketConnection.onmessage = (message) => {
|
||||
const formatMsg = JSON.parse(message.data)
|
||||
|
||||
console.log('服务器的消息', formatMsg)
|
||||
if (self.currentClient) {
|
||||
self.currentClient.postMessage({
|
||||
type: 'WS_MESSAGE',
|
||||
success: true,
|
||||
payload: formatMsg,
|
||||
})
|
||||
}
|
||||
// else {
|
||||
// event.source.postMessage({
|
||||
// type: 'WS_MESSAGE',
|
||||
// success: true,
|
||||
// payload: {
|
||||
// data: message.data,
|
||||
// },
|
||||
// })
|
||||
// }
|
||||
|
||||
}
|
||||
// 连接错误
|
||||
self.webSocketConnection.onerror = (error) => {
|
||||
console.error('WebSocket error:', error)
|
||||
if (self.currentClient) {
|
||||
self.currentClient.postMessage({
|
||||
type: 'WS_ERROR',
|
||||
success: true,
|
||||
payload: {
|
||||
message: '连接错误',
|
||||
data: error,
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
// 连接关闭
|
||||
self.webSocketConnection.onclose = () => {
|
||||
console.log('WebSocket connection closed')
|
||||
if (self.currentClient) {
|
||||
self.currentClient.postMessage({
|
||||
type: 'WS_CLOSE',
|
||||
success: true,
|
||||
payload: {
|
||||
message: '已断开连接',
|
||||
data: null
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'SEND_WS_MESSAGE':
|
||||
const user_msg = event.data.payload.message
|
||||
console.log('发送信号改哦西:', user_msg, self.webSocketConnection)
|
||||
self.webSocketConnection.send(user_msg)
|
||||
break
|
||||
case 'DISCONNECT_WS':
|
||||
console.log('Disconnecting from WebSocket')
|
||||
self.webSocketConnection.close()
|
||||
event.source.postMessage({
|
||||
type: 'WS_CLOSE',
|
||||
success: true,
|
||||
payload: {
|
||||
message: '已断开连接',
|
||||
data: null
|
||||
}
|
||||
})
|
||||
break
|
||||
case 'PING':
|
||||
console.log('Ping from page')
|
||||
self.webSocketConnection.send('PING')
|
||||
event.source.postMessage({
|
||||
type: 'PONG',
|
||||
success: true,
|
||||
payload: {
|
||||
message: 'Service Worker is alive',
|
||||
},
|
||||
})
|
||||
break
|
||||
case 'GET_WS_STATUS':
|
||||
// 返回WebSocket连接状态（如果有的话）
|
||||
event.source.postMessage({
|
||||
type: 'WS_STATUS',
|
||||
success: true,
|
||||
payload: {
|
||||
status: self.webSocketConnection ? self.webSocketConnection.readyState : null,
|
||||
connected: self.webSocketConnection && self.webSocketConnection.readyState === WebSocket.OPEN,
|
||||
}
|
||||
})
|
||||
break
|
||||
default:
|
||||
console.log('Unknown message type:', event.data.type)
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 监听通知点击事件
|
||||
self.addEventListener('notificationclick', (event) => {
|
||||
console.log('Notification clicked:', event.notification.title)
|
||||
|
||||
event.notification.close()
|
||||
|
||||
// 打开或聚焦到页面
|
||||
event.waitUntil(
|
||||
clients.openWindow(event.notification.data.url || '/'),
|
||||
)
|
||||
})
|
||||
Reference in New Issue
Block a user