From 980ffb778a9a7670803dc755d0eb491756767853 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A7=89?= Date: Sun, 1 Oct 2023 02:42:59 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E5=9B=9E=E8=B0=83=E5=87=BD?= =?UTF-8?q?=E6=95=B0=E6=89=A7=E8=A1=8C=E9=A1=BA=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/client.js | 50 ++++++++++++++++++++++++++--------------------- public/index.html | 1 + 2 files changed, 29 insertions(+), 22 deletions(-) diff --git a/public/client.js b/public/client.js index 5fe8952..4ef7785 100644 --- a/public/client.js +++ b/public/client.js @@ -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 diff --git a/public/index.html b/public/index.html index 3a775fb..bdc0acc 100644 --- a/public/index.html +++ b/public/index.html @@ -89,6 +89,7 @@ // 只有一个基本信道, 用于交换和调度信息 clientList.setChannel('base', { onopen: async event => { + console.log('打开信道', event.target.label) // 要求对方发送音乐列表 clientList.send('base', JSON.stringify({ type: 'get_music_list' })) },