2023-10-21 04:21:27 +08:00
|
|
|
import { get, set, del, update, createStore, values } from 'idb-keyval'
|
2023-10-04 18:25:11 +08:00
|
|
|
import { List, ListItem, Avatar, Span, Dialog, Button, Input } from './weigets.js'
|
2023-09-28 23:49:26 +08:00
|
|
|
|
|
|
|
export default class ClientList {
|
2023-10-02 20:29:50 +08:00
|
|
|
constructor({ channels = {}, EventListeners = {}, name: username, onexit }) {
|
|
|
|
this.event = { onexit }
|
2023-10-21 04:21:27 +08:00
|
|
|
this.store = createStore(`db-user`, `store-user`)
|
2023-09-29 20:20:00 +08:00
|
|
|
this.channels = channels
|
2023-09-29 17:31:37 +08:00
|
|
|
this.EventListeners = EventListeners
|
2023-09-28 23:49:26 +08:00
|
|
|
const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
|
|
|
|
const host = window.location.host
|
|
|
|
this.clientlist = []
|
2023-10-04 17:34:15 +08:00
|
|
|
this.element = List({
|
2023-10-07 23:36:31 +08:00
|
|
|
style: {
|
|
|
|
position: 'fixed',
|
|
|
|
top: '0',
|
|
|
|
right: '0',
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'wrap',
|
|
|
|
alignItems: 'center',
|
|
|
|
listStyle: 'none',
|
|
|
|
padding: '0 1rem',
|
|
|
|
}
|
2023-10-04 17:34:15 +08:00
|
|
|
})
|
|
|
|
document.body.appendChild(this.element)
|
2023-09-30 22:45:01 +08:00
|
|
|
|
2023-09-30 23:01:30 +08:00
|
|
|
// 连接 WebSocket
|
|
|
|
const linkStart = () => {
|
2023-10-01 01:22:39 +08:00
|
|
|
const websocket = new WebSocket(`${protocol}://${host}/webrtc/music?name=${username}`)
|
2023-09-30 23:01:30 +08:00
|
|
|
websocket.onmessage = async event => {
|
|
|
|
const data = JSON.parse(event.data)
|
2023-10-01 14:19:38 +08:00
|
|
|
const webrtc_init = async () => {
|
2023-10-01 12:47:39 +08:00
|
|
|
const webrtc = new RTCPeerConnection({
|
2023-10-03 03:10:23 +08:00
|
|
|
iceServers: [
|
2023-10-06 04:25:17 +08:00
|
|
|
{
|
|
|
|
urls: 'turn:satori.love:3478?transport=udp',
|
|
|
|
username: 'x-username',
|
|
|
|
credential: 'x-password'
|
|
|
|
},
|
2023-10-03 03:10:23 +08:00
|
|
|
{
|
|
|
|
urls: [
|
|
|
|
'stun:stun.1und1.de',
|
|
|
|
'stun:stun.callwithus.com',
|
2023-10-03 04:40:02 +08:00
|
|
|
'stun:stun.ekiga.net',
|
|
|
|
'stun:stun.fwdnet.net',
|
|
|
|
'stun:stun.fwdnet.net:3478',
|
|
|
|
'stun:stun.gmx.net',
|
|
|
|
'stun:stun.iptel.org',
|
2023-10-03 03:10:23 +08:00
|
|
|
'stun:stun.internetcalls.com',
|
2023-10-03 04:40:02 +08:00
|
|
|
'stun:stun.minisipserver.com',
|
|
|
|
'stun:stun.schlund.de',
|
|
|
|
'stun:stun.sipgate.net',
|
|
|
|
'stun:stun.sipgate.net:10000',
|
|
|
|
'stun:stun.softjoys.com',
|
|
|
|
'stun:stun.softjoys.com:3478',
|
2023-10-03 03:10:23 +08:00
|
|
|
'stun:stun.voip.aebc.com',
|
2023-10-03 04:40:02 +08:00
|
|
|
'stun:stun.voipbuster.com',
|
|
|
|
'stun:stun.voipstunt.com',
|
2023-10-03 03:10:23 +08:00
|
|
|
'stun:stun.voxgratia.org',
|
2023-10-03 04:40:02 +08:00
|
|
|
'stun:stun.wirlab.net',
|
|
|
|
'stun:stun.xten.com',
|
|
|
|
'stun:stunserver.org',
|
|
|
|
'stun:stun01.sipphone.com',
|
|
|
|
'stun:stun.zoiper.com'
|
|
|
|
]
|
2023-10-03 03:10:23 +08:00
|
|
|
}
|
|
|
|
],
|
2023-10-03 02:41:30 +08:00
|
|
|
iceCandidatePoolSize: 10, // 限制 ICE 候选者的数量
|
|
|
|
iceTransportPolicy: 'all', // 使用所有可用的候选者
|
2023-10-17 17:00:10 +08:00
|
|
|
bundlePolicy: 'max-bundle',// 将所有媒体流捆绑在一起,以最大程度地提高性能和减少延迟
|
2023-10-19 02:26:29 +08:00
|
|
|
sctp: {
|
2023-10-19 06:55:54 +08:00
|
|
|
//maxMessageSize: 1024 * 64, // 64KB
|
|
|
|
//maxRetransmits: 10, // 最大重传次数
|
|
|
|
//maxPacketLifeTime: 3000, // 最大生存时间
|
|
|
|
//renegotiationTimeout: 3000, // 重协商超时时间
|
|
|
|
//redeliveryTimeout: 1000, // 重传超时时间
|
|
|
|
//redeliveryTime: 1000, // 重传时间
|
|
|
|
//reliability: 'reliable', // 可靠传输
|
|
|
|
//ordered: true, // 有序传输
|
2023-10-19 02:26:29 +08:00
|
|
|
}
|
2023-10-01 12:47:39 +08:00
|
|
|
})
|
2023-09-30 23:01:30 +08:00
|
|
|
webrtc.ondatachannel = ({ channel }) => {
|
2023-10-19 07:03:21 +08:00
|
|
|
//console.debug(data.name, '建立', channel.label, '数据通道')
|
2023-10-01 02:42:59 +08:00
|
|
|
const client = this.clientlist.find(x => x.id === data.id)
|
|
|
|
const option = this.channels[channel.label]
|
2023-09-30 23:56:00 +08:00
|
|
|
channel.onopen = event => {
|
2023-10-19 07:03:21 +08:00
|
|
|
//console.debug('对方打开', channel.label, '数据通道')
|
2023-10-01 02:42:59 +08:00
|
|
|
if (option && option.onopen) {
|
|
|
|
option.onopen(event, client)
|
2023-09-30 23:56:00 +08:00
|
|
|
}
|
|
|
|
}
|
2023-09-30 23:01:30 +08:00
|
|
|
channel.onmessage = event => {
|
2023-10-02 00:53:17 +08:00
|
|
|
//console.log('对方发送', channel.label, '数据消息')
|
2023-10-01 02:42:59 +08:00
|
|
|
if (option && option.onmessage) {
|
|
|
|
option.onmessage(event, client)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
channel.onclose = event => {
|
2023-10-05 04:43:57 +08:00
|
|
|
console.debug('对方关闭', channel.label, '数据通道')
|
2023-10-01 02:42:59 +08:00
|
|
|
if (option && option.onclose) {
|
|
|
|
option.onclose(event, client)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
channel.onerror = event => {
|
2023-10-05 04:43:57 +08:00
|
|
|
console.error(data.name, '通道', channel.label, '发生错误')
|
2023-10-01 02:42:59 +08:00
|
|
|
if (option && option.onerror) {
|
|
|
|
option.onerror(event, client)
|
2023-09-30 23:01:30 +08:00
|
|
|
}
|
2023-09-29 17:31:37 +08:00
|
|
|
}
|
2023-09-29 01:12:20 +08:00
|
|
|
}
|
2023-10-03 02:15:29 +08:00
|
|
|
webrtc.onicecandidate = event => {
|
|
|
|
if (event.candidate) {
|
|
|
|
websocket.send(JSON.stringify({
|
|
|
|
type: 'candidate',
|
|
|
|
id: data.id,
|
|
|
|
candidate: event.candidate
|
|
|
|
}))
|
|
|
|
}
|
|
|
|
}
|
2023-10-03 01:27:00 +08:00
|
|
|
webrtc.oniceconnectionstatechange = async event => {
|
2023-10-03 02:15:29 +08:00
|
|
|
if (webrtc.iceConnectionState === 'disconnected' || webrtc.iceConnectionState === 'failed') {
|
2023-10-05 04:43:57 +08:00
|
|
|
console.error(data.name, '需要添加新的 candidate')
|
2023-10-03 02:15:29 +08:00
|
|
|
// 添加新的 candidate
|
|
|
|
} else if (webrtc.iceConnectionState === 'connected' || webrtc.iceConnectionState === 'completed') {
|
2023-10-19 07:03:21 +08:00
|
|
|
//console.debug(data.name, 'WebRTC 连接已经建立成功')
|
2023-10-03 01:27:00 +08:00
|
|
|
}
|
2023-09-30 23:01:30 +08:00
|
|
|
}
|
2023-10-01 02:42:59 +08:00
|
|
|
const channels = Object.entries(this.channels).map(([name, callback]) => {
|
2023-10-19 06:55:54 +08:00
|
|
|
const dc = webrtc.createDataChannel(name, {
|
|
|
|
reliability: 'reliable', // 可靠传输
|
|
|
|
reliable: true, // 可靠传输
|
|
|
|
ordered: true, // 有序传输
|
|
|
|
//maxMessageSize: 64, // 64KB
|
|
|
|
//maxRetransmits: 10, // 最大重传次数
|
|
|
|
//maxPacketLifeTime: 3000, // 最大生存时间
|
|
|
|
})
|
|
|
|
return dc
|
2023-10-01 02:42:59 +08:00
|
|
|
})
|
|
|
|
return { webrtc, channels }
|
2023-09-29 01:12:20 +08:00
|
|
|
}
|
2023-09-30 23:01:30 +08:00
|
|
|
if (data.type === 'list') {
|
2023-10-19 07:03:21 +08:00
|
|
|
//console.debug('取得在线对端列表:', data)
|
2023-10-01 14:19:38 +08:00
|
|
|
const { webrtc, channels } = await webrtc_init()
|
2023-10-19 07:03:21 +08:00
|
|
|
//console.debug('发送给对方 offer')
|
2023-10-03 21:11:13 +08:00
|
|
|
const offer = await webrtc.createOffer()
|
2023-09-30 23:01:30 +08:00
|
|
|
await webrtc.setLocalDescription(offer)
|
|
|
|
this.clientlist.push({ id: data.id, name: data.name, webrtc, channels })
|
|
|
|
websocket.send(JSON.stringify({ type: 'offer', id: data.id, offer }))
|
2023-10-07 23:54:41 +08:00
|
|
|
// 传递正确的指针给元素, 以便其能够调取正确的头像
|
|
|
|
this.push(this.clientlist.find(client => client.id === data.id))
|
2023-09-30 23:01:30 +08:00
|
|
|
return
|
2023-09-29 01:12:20 +08:00
|
|
|
}
|
2023-09-30 23:01:30 +08:00
|
|
|
if (data.type === 'push') {
|
2023-10-19 07:03:21 +08:00
|
|
|
//console.debug('新上线客户端:', data)
|
2023-10-07 23:54:41 +08:00
|
|
|
return
|
2023-09-30 23:01:30 +08:00
|
|
|
}
|
|
|
|
if (data.type === 'pull') {
|
2023-10-05 03:59:32 +08:00
|
|
|
console.debug('移除客户端:', data)
|
2023-10-02 20:29:50 +08:00
|
|
|
return this.exit(data)
|
2023-09-30 23:01:30 +08:00
|
|
|
}
|
|
|
|
if (data.type === 'offer') {
|
2023-10-19 07:03:21 +08:00
|
|
|
//console.debug('收到对方 offer', data)
|
2023-10-01 14:19:38 +08:00
|
|
|
const { webrtc, channels } = await webrtc_init()
|
2023-09-30 23:01:30 +08:00
|
|
|
this.clientlist.push({ id: data.id, name: data.name, webrtc, channels })
|
2023-10-07 23:54:41 +08:00
|
|
|
// 传递正确的指针给元素, 以便其能够调取正确的头像
|
|
|
|
this.push(this.clientlist.find(client => client.id === data.id))
|
2023-10-19 07:03:21 +08:00
|
|
|
//console.debug('发送给对方 answer')
|
2023-09-30 23:01:30 +08:00
|
|
|
await webrtc.setRemoteDescription(data.offer)
|
|
|
|
const answer = await webrtc.createAnswer()
|
|
|
|
await webrtc.setLocalDescription(answer)
|
|
|
|
websocket.send(JSON.stringify({ type: 'answer', id: data.id, answer }))
|
|
|
|
return
|
|
|
|
}
|
|
|
|
if (data.type === 'answer') {
|
2023-10-19 07:03:21 +08:00
|
|
|
//console.debug('收到对方 answer', data)
|
2023-10-03 02:41:30 +08:00
|
|
|
const webrtc = this.clientlist.find(client => client.id === data.id).webrtc
|
|
|
|
await webrtc.setRemoteDescription(data.answer)
|
2023-09-30 23:01:30 +08:00
|
|
|
return
|
|
|
|
}
|
|
|
|
if (data.type === 'candidate') {
|
2023-10-19 07:03:21 +08:00
|
|
|
//console.debug(data.name, '发来 candidate 候选通道')
|
2023-10-03 02:41:30 +08:00
|
|
|
const webrtc = this.clientlist.find(client => client.id === data.id).webrtc
|
|
|
|
await webrtc.addIceCandidate(data.candidate)
|
2023-09-30 23:01:30 +08:00
|
|
|
return
|
|
|
|
}
|
2023-10-05 03:59:32 +08:00
|
|
|
console.error('收到未知数据:', data)
|
2023-09-28 23:49:26 +08:00
|
|
|
}
|
2023-10-01 12:55:42 +08:00
|
|
|
websocket.onclose = async event => {
|
2023-09-30 23:01:30 +08:00
|
|
|
console.log('WebSocket 断线重连...')
|
2023-10-01 12:55:42 +08:00
|
|
|
await new Promise(resolve => setTimeout(resolve, 10000))
|
|
|
|
// this.websocket = linkStart()
|
|
|
|
// 调试模式: 直接刷新页面重载
|
|
|
|
window.location.reload()
|
2023-09-28 23:49:26 +08:00
|
|
|
}
|
2023-09-30 23:01:30 +08:00
|
|
|
return websocket
|
2023-09-28 23:49:26 +08:00
|
|
|
}
|
2023-09-30 23:01:30 +08:00
|
|
|
this.websocket = linkStart()
|
2023-10-04 17:34:15 +08:00
|
|
|
|
2023-10-21 04:21:27 +08:00
|
|
|
this.我的帐户()
|
|
|
|
this.DEBUG()
|
|
|
|
}
|
|
|
|
async DEBUG() {
|
2023-10-13 19:08:25 +08:00
|
|
|
// 监听键盘Esc按下, 如果全局没有焦点则显示调试信息, 如果在调试信息显示期间弹起Esc则隐藏调试信息
|
|
|
|
let debug = false
|
|
|
|
let debugElement = Dialog({
|
|
|
|
children: [
|
|
|
|
Button({
|
|
|
|
textContent: '关闭',
|
|
|
|
onclick: event => document.body.removeChild(debugElement)
|
|
|
|
}),
|
|
|
|
Span({
|
|
|
|
textContent: JSON.stringify(this.clientlist, null, 4)
|
|
|
|
})
|
|
|
|
]
|
|
|
|
})
|
|
|
|
document.addEventListener('keydown', event => {
|
|
|
|
if (document.activeElement === document.body && event.key === 'Escape' && !debug) {
|
|
|
|
document.body.appendChild(debugElement)
|
|
|
|
debug = true
|
|
|
|
}
|
|
|
|
})
|
2023-10-13 20:11:21 +08:00
|
|
|
document.addEventListener('keyup', async event => {
|
2023-10-13 19:08:25 +08:00
|
|
|
if (document.activeElement === document.body && event.key === 'Escape' && debug) {
|
2023-10-13 20:11:21 +08:00
|
|
|
await debugElement.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
|
2023-10-13 19:08:25 +08:00
|
|
|
document.body.removeChild(debugElement)
|
|
|
|
debug = false
|
|
|
|
}
|
|
|
|
})
|
2023-09-28 23:49:26 +08:00
|
|
|
}
|
2023-10-21 04:21:27 +08:00
|
|
|
async 我的帐户() {
|
|
|
|
if (!localStorage.getItem('id')) {
|
|
|
|
localStorage.setItem('id', window.crypto.randomUUID())
|
|
|
|
}
|
|
|
|
if (!localStorage.getItem('username')) {
|
|
|
|
localStorage.setItem('username', '匿')
|
|
|
|
}
|
|
|
|
if (!localStorage.getItem('avatar')) {
|
|
|
|
localStorage.setItem('avatar', '/favicon.ico')
|
|
|
|
}
|
|
|
|
const id = localStorage.getItem('id')
|
|
|
|
const username = localStorage.getItem('username')
|
|
|
|
const avatar = localStorage.getItem('avatar')
|
|
|
|
console.log('我的帐户:', { id, username, avatar })
|
|
|
|
this.push({ id, name: username, avatar }, true)
|
|
|
|
}
|
|
|
|
async 用户列表() {}
|
|
|
|
async 用户加入({ name, id }) {
|
|
|
|
await set(id, { name, id }, this.store)
|
|
|
|
}
|
|
|
|
|
|
|
|
async 用户离开({ id }) {
|
|
|
|
await del(id, this.store)
|
|
|
|
}
|
2023-10-05 03:22:05 +08:00
|
|
|
getAvatar(id) { }
|
|
|
|
setAvatar(user) {
|
2023-10-19 07:03:21 +08:00
|
|
|
//console.info('更新avatar', user)
|
2023-10-05 03:22:05 +08:00
|
|
|
document.getElementById(user.id).querySelector('img').src = user.avatar
|
2023-10-07 23:54:41 +08:00
|
|
|
const u = this.clientlist.find(client => client.id === user.id)
|
|
|
|
u.avatar = user.avatar
|
2023-10-19 07:03:21 +08:00
|
|
|
//console.log(u, user)
|
2023-10-07 23:54:41 +08:00
|
|
|
//.avatar = user.avatar
|
2023-10-05 03:22:05 +08:00
|
|
|
}
|
2023-10-02 20:29:50 +08:00
|
|
|
exit(item) {
|
|
|
|
const client = this.clientlist.find(client => client.id === item.id)
|
2023-10-05 03:59:32 +08:00
|
|
|
if (!client) return console.error('目标用户本不存在')
|
2023-10-02 20:29:50 +08:00
|
|
|
this.clientlist = this.clientlist.filter(client => client.id !== item.id)
|
2023-10-04 17:34:15 +08:00
|
|
|
this.element.removeChild(document.getElementById(item.id))
|
2023-10-02 20:29:50 +08:00
|
|
|
this.event.onexit(client)
|
|
|
|
}
|
2023-09-29 21:21:26 +08:00
|
|
|
setChannel(name, option) {
|
|
|
|
this.channels[name] = option
|
|
|
|
}
|
2023-10-07 23:36:31 +08:00
|
|
|
// 新上线客户端
|
2023-10-07 23:54:41 +08:00
|
|
|
push(item, self = false) {
|
2023-10-04 17:34:15 +08:00
|
|
|
this.element.appendChild(ListItem({
|
2023-09-28 23:49:26 +08:00
|
|
|
id: item.id,
|
2023-10-07 23:36:31 +08:00
|
|
|
style: {
|
|
|
|
margin: '0 8px',
|
|
|
|
cursor: 'pointer',
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'column',
|
|
|
|
alignItems: 'center',
|
|
|
|
fontSize: '12px',
|
|
|
|
borderRadius: '8px',
|
|
|
|
},
|
2023-10-07 23:54:41 +08:00
|
|
|
children: [
|
|
|
|
Avatar({
|
2023-10-08 00:17:28 +08:00
|
|
|
src: item.avatar ?? '/favicon.ico',
|
2023-10-07 23:54:41 +08:00
|
|
|
style: {
|
|
|
|
width: '32px',
|
|
|
|
height: '32px',
|
|
|
|
borderRadius: '50%',
|
|
|
|
cursor: 'pointer',
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
Span({
|
|
|
|
textContent: item.name ?? item.id
|
|
|
|
})
|
|
|
|
],
|
2023-10-07 02:01:22 +08:00
|
|
|
onclick: event => document.body.appendChild(Dialog({
|
|
|
|
children: [
|
|
|
|
Avatar({
|
2023-10-08 00:17:28 +08:00
|
|
|
src: item.avatar ?? '/favicon.ico',
|
2023-10-07 02:01:22 +08:00
|
|
|
style: {
|
|
|
|
width: '240px',
|
|
|
|
height: '240px',
|
|
|
|
borderRadius: '8px',
|
|
|
|
margin: '0 auto',
|
|
|
|
display: 'block',
|
2023-10-07 23:36:31 +08:00
|
|
|
cursor: 'pointer',
|
2023-10-07 02:01:22 +08:00
|
|
|
},
|
|
|
|
onclick: event => {
|
2023-10-07 23:54:41 +08:00
|
|
|
console.log('点击头像', item)
|
2023-10-07 23:36:31 +08:00
|
|
|
if (!self) return console.log('只能修改自己的头像')
|
2023-10-07 02:01:22 +08:00
|
|
|
const input = document.createElement('input')
|
|
|
|
input.type = 'file'
|
|
|
|
input.accept = 'image/*'
|
|
|
|
input.onchange = async event => {
|
|
|
|
const file = event.target.files[0]
|
|
|
|
const reader = new FileReader()
|
|
|
|
reader.readAsDataURL(file)
|
|
|
|
reader.onload = async event => {
|
|
|
|
const base64 = event.target.result
|
|
|
|
localStorage.setItem('avatar', base64)
|
|
|
|
window.location.reload() // 简单刷新页面
|
|
|
|
}
|
|
|
|
}
|
|
|
|
input.click()
|
|
|
|
}
|
|
|
|
}),
|
|
|
|
Input({
|
|
|
|
style: {
|
|
|
|
width: '100px',
|
|
|
|
border: '2px dotted #bbb',
|
|
|
|
borderRadius: '50%',
|
|
|
|
outline: 'none',
|
|
|
|
padding: '5px 0',
|
|
|
|
textAlign: 'center',
|
|
|
|
position: 'absolute',
|
|
|
|
bottom: '-2px',
|
2023-10-11 12:26:43 +08:00
|
|
|
background: 'rgba(255, 255, 255, 0.8)',
|
2023-10-07 02:01:22 +08:00
|
|
|
},
|
2023-10-07 23:36:31 +08:00
|
|
|
readOnly: !self, // 如果不是自己, 则不可编辑
|
2023-10-07 02:01:22 +08:00
|
|
|
value: item.name ?? item.id,
|
|
|
|
type: 'text',
|
|
|
|
placeholder: '请设置你的昵称',
|
|
|
|
onchange: event => {
|
|
|
|
localStorage.setItem('username', event.target.value)
|
|
|
|
window.location.reload() // 简单刷新页面
|
|
|
|
}
|
|
|
|
})
|
|
|
|
]
|
2023-10-07 23:54:41 +08:00
|
|
|
}))
|
2023-09-28 23:49:26 +08:00
|
|
|
}))
|
|
|
|
}
|
2023-09-29 01:12:20 +08:00
|
|
|
// 添加回调函数
|
|
|
|
on(name, callback) {
|
|
|
|
this.EventListeners[name] = callback
|
|
|
|
}
|
|
|
|
// 执行回调函数
|
|
|
|
_on(name, ...args) {
|
|
|
|
if (this.EventListeners[name]) {
|
|
|
|
this.EventListeners[name](...args)
|
|
|
|
}
|
|
|
|
}
|
2023-10-02 00:30:47 +08:00
|
|
|
// 通过指定通道发送数据(单播)
|
|
|
|
sendto(id, name, data) {
|
|
|
|
const client = this.clientlist.find(client => client.id === id)
|
|
|
|
if (!client) {
|
2023-10-05 04:43:57 +08:00
|
|
|
console.error('客户端不存在:', id)
|
|
|
|
return
|
|
|
|
}
|
|
|
|
if (!client.channels.find(ch => ch.label === name)) {
|
|
|
|
console.error('通道不存在:', name)
|
2023-10-02 00:30:47 +08:00
|
|
|
return
|
|
|
|
}
|
|
|
|
client.channels.filter(ch => ch.label === name).forEach(async ch => {
|
|
|
|
// 等待 datachannel 打开(临时解决方案)
|
|
|
|
while (ch.readyState !== 'open') {
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 100))
|
|
|
|
}
|
2023-10-03 01:12:46 +08:00
|
|
|
ch.send(data)
|
2023-10-02 00:30:47 +08:00
|
|
|
})
|
|
|
|
}
|
2023-10-19 06:55:54 +08:00
|
|
|
|
|
|
|
// 通过指定通道发送数据(单播, 自动分片)
|
|
|
|
sendto2(id, name, data) {
|
|
|
|
console.log('发送数据:', name)
|
|
|
|
const client = this.clientlist.find(client => client.id === id)
|
|
|
|
if (!client) {
|
|
|
|
console.error('客户端不存在:', id)
|
|
|
|
return
|
|
|
|
}
|
|
|
|
if (!client.channels.find(ch => ch.label === name)) {
|
|
|
|
console.error('通道不存在:', name)
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
client.channels.filter(ch => ch.label === name).forEach(async ch => {
|
|
|
|
|
|
|
|
console.log('发送数据:', name, ch.label)
|
|
|
|
|
|
|
|
// 等待 datachannel 打开(临时解决方案)
|
|
|
|
while (ch.readyState !== 'open') {
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 100))
|
|
|
|
}
|
|
|
|
|
|
|
|
console.log('发送数据:', name, ch.label, ch.readyState)
|
|
|
|
|
|
|
|
// 将数据转换为arraybuffer
|
|
|
|
const buffer = new ArrayBuffer(data.length)
|
|
|
|
const view = new Uint8Array(buffer)
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
|
view[i] = data.charCodeAt(i) & 0xff
|
|
|
|
}
|
|
|
|
// 将数据分片发送
|
|
|
|
const CHUNK_SIZE = 16 * 1024; // 16KB
|
|
|
|
for (let i = 0; i < buffer.byteLength; i += CHUNK_SIZE) {
|
|
|
|
const chunk = view.subarray(i, i + CHUNK_SIZE)
|
|
|
|
ch.send(chunk)
|
|
|
|
console.log('缓冲区:', ch.bufferedAmount)
|
|
|
|
console.log('缓冲区剩余:', ch.bufferedAmountLowThreshold)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2023-09-29 01:12:20 +08:00
|
|
|
// 通过指定通道发送数据(广播)
|
|
|
|
send(name, data) {
|
|
|
|
this.clientlist.forEach(client => {
|
2023-09-30 23:56:00 +08:00
|
|
|
client.channels.filter(ch => ch.label === name).forEach(async ch => {
|
|
|
|
// 等待 datachannel 打开(临时解决方案)
|
|
|
|
while (ch.readyState !== 'open') {
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 100))
|
|
|
|
}
|
2023-09-30 16:19:33 +08:00
|
|
|
ch.send(data)
|
|
|
|
})
|
2023-09-29 01:12:20 +08:00
|
|
|
})
|
|
|
|
}
|
2023-09-28 23:49:26 +08:00
|
|
|
}
|