webrtc/public/client.js

134 lines
5.6 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-09-29 17:31:37 +08:00
constructor({ channels = {}, EventListeners = {} }) {
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.websocket = new WebSocket(`${protocol}://${host}/webrtc/music`)
this.clientlist = []
this.ul = List({})
document.body.appendChild(this.ul)
this.websocket.onmessage = async event => {
const data = JSON.parse(event.data)
2023-09-30 16:19:33 +08:00
const channels_init = (webrtc) => {
return Object.entries(this.channels).map(([name, callback]) => {
const channel = webrtc.createDataChannel(name, { reliable: true })
channel.onopen = callback.onopen
channel.onclose = callback.onclose
channel.onerror = callback.onerror
channel.onmessage = callback.onmessage
return channel
})
}
2023-09-29 01:12:20 +08:00
const webrtc_init = () => {
2023-09-28 23:49:26 +08:00
const webrtc = new RTCPeerConnection()
2023-09-28 23:54:58 +08:00
webrtc.onicecandidate = event => {
if (event.candidate) {
2023-09-29 17:31:37 +08:00
this.websocket.send(JSON.stringify({
type: 'candidate',
id: data.id,
candidate: event.candidate
}))
2023-09-28 23:54:58 +08:00
}
}
2023-09-29 17:31:37 +08:00
webrtc.ondatachannel = ({ channel }) => {
2023-09-30 16:19:33 +08:00
console.log('收到对方 datachannel', channel)
2023-09-29 17:31:37 +08:00
channel.onmessage = event => {
2023-09-29 21:21:26 +08:00
//console.log('收到对方 datachannel message', event)
2023-09-30 16:19:33 +08:00
if (this.channels[event.target.label]) {
this.channels[event.target.label].onmessage(event, this.clientlist.find(x => x.id === data.id))
2023-09-29 17:31:37 +08:00
}
2023-09-29 01:12:20 +08:00
}
}
webrtc.oniceconnectionstatechange = event => {
2023-09-29 20:20:00 +08:00
//console.log('WebRTC ICE 连接状态更改:', webrtc.iceConnectionState)
2023-09-29 01:12:20 +08:00
}
return webrtc
}
if (data.type === 'list') {
2023-09-29 20:20:00 +08:00
//console.log('取得在线对端列表:', data)
2023-09-29 01:12:20 +08:00
const webrtc = webrtc_init()
2023-09-30 16:19:33 +08:00
const channels = channels_init(webrtc)
2023-09-29 20:20:00 +08:00
//console.log('发送给对方 offer')
2023-09-28 23:49:26 +08:00
const offer = await webrtc.createOffer()
await webrtc.setLocalDescription(offer)
2023-09-30 16:19:33 +08:00
this.clientlist.push({ id: data.id, name: data.name, webrtc, channels })
2023-09-28 23:49:26 +08:00
this.websocket.send(JSON.stringify({ type: 'offer', id: data.id, offer }))
2023-09-29 17:31:37 +08:00
this.add(data)
return
2023-09-28 23:49:26 +08:00
}
if (data.type === 'push') {
2023-09-30 16:19:33 +08:00
//console.log('新上线客户端:', data)
2023-09-28 23:49:26 +08:00
return this.add(data)
}
if (data.type === 'pull') {
2023-09-30 16:19:33 +08:00
//console.log('移除客户端:', data)
2023-09-28 23:49:26 +08:00
return this.remove(data)
}
if (data.type === 'offer') {
2023-09-29 20:20:00 +08:00
//console.log('收到对方 offer', data)
2023-09-29 01:12:20 +08:00
const webrtc = webrtc_init()
2023-09-30 16:19:33 +08:00
const channels = channels_init(webrtc)
this.clientlist.push({ id: data.id, name: data.name, webrtc, channels })
2023-09-29 20:20:00 +08:00
//console.log('发送给对方 answer')
2023-09-28 23:49:26 +08:00
await webrtc.setRemoteDescription(data.offer)
const answer = await webrtc.createAnswer()
await webrtc.setLocalDescription(answer)
this.websocket.send(JSON.stringify({ type: 'answer', id: data.id, answer }))
return
}
if (data.type === 'answer') {
2023-09-29 20:20:00 +08:00
//console.log('收到对方 answer', data)
2023-09-28 23:49:26 +08:00
const pc = this.clientlist.find(client => client.id === data.id).webrtc
await pc.setRemoteDescription(data.answer)
return
}
if (data.type === 'candidate') {
2023-09-29 20:20:00 +08:00
// console.log('收到 candidate 并将其添加到远程端', data.candidate)
2023-09-28 23:49:26 +08:00
const pc = this.clientlist.find(client => client.id === data.id).webrtc
await pc.addIceCandidate(data.candidate)
2023-09-29 20:20:00 +08:00
return
2023-09-28 23:49:26 +08:00
}
console.log('收到未知数据:', data)
}
}
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: []
}))
}
remove(item) {
this.clientlist = this.clientlist.filter(client => client.id !== item.id)
this.ul.removeChild(document.getElementById(item.id))
}
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)
}
}
// 通过指定通道发送数据(广播)
send(name, data) {
2023-09-30 16:19:33 +08:00
//console.log('广播数据:', data, '到通道:', name, '到所有客户端')
2023-09-29 01:12:20 +08:00
this.clientlist.forEach(client => {
2023-09-30 16:19:33 +08:00
//console.log('发送数据到客户端:', client.id)
client.channels.filter(ch => ch.label === name).forEach(ch => {
ch.send(data)
})
2023-09-29 01:12:20 +08:00
})
}
2023-09-28 23:49:26 +08:00
}