webrtc/public/client.js

227 lines
11 KiB
JavaScript
Raw Normal View History

2023-09-28 23:49:26 +08:00
import { List, ListItem } from './weigets.js'
export default class ClientList {
2023-10-02 20:29:50 +08:00
constructor({ channels = {}, EventListeners = {}, name: username, onexit }) {
this.event = { onexit }
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 = []
this.ul = List({})
document.body.appendChild(this.ul)
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: [
{
urls: 'turn:satori.love:3478?transport=udp',
username: 'x-username',
credential: 'x-password'
},
{
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', // 使用所有可用的候选者
bundlePolicy: 'balanced', // 每種類型的內容建立一個單獨的傳輸
2023-10-01 12:47:39 +08:00
})
2023-09-30 23:01:30 +08:00
webrtc.ondatachannel = ({ channel }) => {
2023-10-03 05:03:21 +08:00
console.log(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]
channel.onopen = event => {
2023-10-02 00:42:29 +08:00
console.log('对方打开', channel.label, '数据通道')
2023-10-03 04:39:18 +08:00
console.group('收到音乐数据')
2023-10-01 02:42:59 +08:00
if (option && option.onopen) {
option.onopen(event, client)
}
}
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-03 04:39:18 +08:00
console.groupEnd('收到音乐数据')
2023-10-02 00:42:29 +08:00
console.log('对方关闭', channel.label, '数据通道')
2023-10-01 02:42:59 +08:00
if (option && option.onclose) {
option.onclose(event, client)
}
}
channel.onerror = event => {
2023-10-03 05:03:21 +08:00
console.log(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 03:10:23 +08:00
webrtc.getReceivers
webrtc.getTransceivers
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-03 05:03:21 +08:00
console.log(data.name, '需要添加新的 candidate')
2023-10-03 02:15:29 +08:00
// 添加新的 candidate
} else if (webrtc.iceConnectionState === 'connected' || webrtc.iceConnectionState === 'completed') {
2023-10-03 05:03:21 +08:00
console.log(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]) => {
const channel = webrtc.createDataChannel(name, { reliable: true })
return channel
})
return { webrtc, channels }
2023-09-29 01:12:20 +08:00
}
2023-09-30 23:01:30 +08:00
if (data.type === 'list') {
//console.log('取得在线对端列表:', data)
2023-10-01 14:19:38 +08:00
const { webrtc, channels } = await webrtc_init()
2023-09-30 23:01:30 +08:00
//console.log('发送给对方 offer')
2023-10-03 03:26:52 +08:00
const offer = await webrtc.createOffer({ offerToReceiveAudio: true, offerToReceiveVideo: true })
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 }))
this.add(data)
return
2023-09-29 01:12:20 +08:00
}
2023-09-30 23:01:30 +08:00
if (data.type === 'push') {
//console.log('新上线客户端:', data)
return this.add(data)
}
if (data.type === 'pull') {
//console.log('移除客户端:', 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') {
//console.log('收到对方 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 })
//console.log('发送给对方 answer')
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') {
//console.log('收到对方 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-02 00:37:02 +08:00
console.log(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
}
console.log('收到未知数据:', 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-09-28 23:49:26 +08:00
}
2023-10-02 20:29:50 +08:00
exit(item) {
const client = this.clientlist.find(client => client.id === item.id)
if (!client) return console.log('目标用户本不存在')
this.clientlist = this.clientlist.filter(client => client.id !== item.id)
this.ul.removeChild(document.getElementById(item.id))
this.event.onexit(client)
}
2023-09-29 21:21:26 +08:00
setChannel(name, option) {
this.channels[name] = option
}
2023-09-28 23:49:26 +08:00
add(item) {
this.ul.appendChild(ListItem({
id: item.id,
innerText: item.name ?? item.id,
onclick: event => {
},
chidren: []
}))
}
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) {
console.log('客户端不存在:', id)
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-09-29 01:12:20 +08:00
// 通过指定通道发送数据(广播)
send(name, data) {
this.clientlist.forEach(client => {
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
}