LaniakeaSupercluster
/
webrtc
2
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修正回调函数执行顺序

This commit is contained in:
觉 2023-10-01 02:42:59 +08:00
parent 30f38e4f3a
commit 980ffb778a
2 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
public/client.js
View File

@ -15,16 +15,6 @@ export default class ClientList {
const websocket = new WebSocket(`${protocol}://${host}/webrtc/music?name=${username}`)
websocket.onmessage = async event => {
const data = JSON.parse(event.data)
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
})
}
const webrtc_init = () => {
const webrtc = new RTCPeerConnection()
webrtc.onicecandidate = event => {
@ -38,28 +28,45 @@ export default class ClientList {
}
webrtc.ondatachannel = ({ channel }) => {
console.log('对方建立数据通道', channel.label)
const client = this.clientlist.find(x => x.id === data.id)
const option = this.channels[channel.label]
channel.onopen = event => {
console.log('对方打开数据通道', channel.label)
if (this.channels[event.target.label] && this.channels[event.target.label].onopen) {
this.channels[event.target.label].onopen(event, this.clientlist.find(x => x.id === data.id))
if (option && option.onopen) {
option.onopen(event, client)
}
}
channel.onmessage = event => {
//console.log('对方发送数据消息', JSON.parse(event.data).type)
if (this.channels[event.target.label] && this.channels[event.target.label].onmessage) {
this.channels[event.target.label].onmessage(event, this.clientlist.find(x => x.id === data.id))
console.log('对方发送数据消息', JSON.parse(event.data).type)
if (option && option.onmessage) {
option.onmessage(event, client)
}
}
channel.onclose = event => {
console.log('对方关闭数据通道', channel.label)
if (option && option.onclose) {
option.onclose(event, client)
}
}
channel.onerror = event => {
console.log('对方数据通道发生错误', channel.label)
if (option && option.onerror) {
option.onerror(event, client)
}
}
}
webrtc.oniceconnectionstatechange = event => {
//console.log('WebRTC ICE 连接状态更改:', webrtc.iceConnectionState)
console.log('WebRTC ICE 连接状态更改:', webrtc.iceConnectionState)
}
return webrtc
const channels = Object.entries(this.channels).map(([name, callback]) => {
const channel = webrtc.createDataChannel(name, { reliable: true })
return channel
})
return { webrtc, channels }
}
if (data.type === 'list') {
//console.log('取得在线对端列表:', data)
const webrtc = webrtc_init()
const channels = channels_init(webrtc)
const { webrtc, channels } = webrtc_init()
//console.log('发送给对方 offer')
const offer = await webrtc.createOffer()
await webrtc.setLocalDescription(offer)
@ -78,8 +85,7 @@ export default class ClientList {
}
if (data.type === 'offer') {
//console.log('收到对方 offer', data)
const webrtc = webrtc_init()
const channels = channels_init(webrtc)
const { webrtc, channels } = webrtc_init()
this.clientlist.push({ id: data.id, name: data.name, webrtc, channels })
//console.log('发送给对方 answer')
await webrtc.setRemoteDescription(data.offer)
@ -95,7 +101,7 @@ export default class ClientList {
return
}
if (data.type === 'candidate') {
// console.log('收到 candidate 并将其添加到远程端', data.candidate)
console.log('收到 candidate 并将其添加到远程端')
const pc = this.clientlist.find(client => client.id === data.id).webrtc
await pc.addIceCandidate(data.candidate)
return

1
public/index.html
View File

@ -89,6 +89,7 @@
// 只有一个基本信道, 用于交换和调度信息
clientList.setChannel('base', {
onopen: async event => {
console.log('打开信道', event.target.label)
// 要求对方发送音乐列表
clientList.send('base', JSON.stringify({ type: 'get_music_list' }))
},