diff --git a/public/client.js b/public/client.js index d62c5a0..ed2ce97 100644 --- a/public/client.js +++ b/public/client.js @@ -11,89 +11,101 @@ export default class ClientList { this.ul = List({}) document.body.appendChild(this.ul) - this.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 => { - if (event.candidate) { - this.websocket.send(JSON.stringify({ - type: 'candidate', - id: data.id, - candidate: event.candidate - })) - } + // 连接 WebSocket + const linkStart = () => { + const websocket = new WebSocket(`${protocol}://${host}/webrtc/music?name=${name}`) + 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 + }) } - webrtc.ondatachannel = ({ channel }) => { - console.log('收到对方 datachannel', channel) - channel.onmessage = event => { - //console.log('收到对方 datachannel message', event) - if (this.channels[event.target.label]) { - this.channels[event.target.label].onmessage(event, this.clientlist.find(x => x.id === data.id)) + const webrtc_init = () => { + const webrtc = new RTCPeerConnection() + webrtc.onicecandidate = event => { + if (event.candidate) { + websocket.send(JSON.stringify({ + type: 'candidate', + id: data.id, + candidate: event.candidate + })) } } + webrtc.ondatachannel = ({ channel }) => { + console.log('收到对方 datachannel', channel) + channel.onmessage = event => { + //console.log('收到对方 datachannel message', event) + if (this.channels[event.target.label]) { + this.channels[event.target.label].onmessage(event, this.clientlist.find(x => x.id === data.id)) + } + } + } + webrtc.oniceconnectionstatechange = event => { + //console.log('WebRTC ICE 连接状态更改:', webrtc.iceConnectionState) + } + return webrtc } - webrtc.oniceconnectionstatechange = event => { - //console.log('WebRTC ICE 连接状态更改:', webrtc.iceConnectionState) + if (data.type === 'list') { + //console.log('取得在线对端列表:', data) + const webrtc = webrtc_init() + const channels = channels_init(webrtc) + //console.log('发送给对方 offer') + const offer = await webrtc.createOffer() + 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 } - return webrtc + if (data.type === 'push') { + //console.log('新上线客户端:', data) + return this.add(data) + } + if (data.type === 'pull') { + //console.log('移除客户端:', data) + return this.remove(data) + } + if (data.type === 'offer') { + //console.log('收到对方 offer', data) + const webrtc = webrtc_init() + const channels = channels_init(webrtc) + 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) + const pc = this.clientlist.find(client => client.id === data.id).webrtc + await pc.setRemoteDescription(data.answer) + return + } + if (data.type === 'candidate') { + // console.log('收到 candidate 并将其添加到远程端', data.candidate) + const pc = this.clientlist.find(client => client.id === data.id).webrtc + await pc.addIceCandidate(data.candidate) + return + } + console.log('收到未知数据:', data) } - if (data.type === 'list') { - //console.log('取得在线对端列表:', data) - const webrtc = webrtc_init() - const channels = channels_init(webrtc) - //console.log('发送给对方 offer') - const offer = await webrtc.createOffer() - await webrtc.setLocalDescription(offer) - this.clientlist.push({ id: data.id, name: data.name, webrtc, channels }) - this.websocket.send(JSON.stringify({ type: 'offer', id: data.id, offer })) - this.add(data) - return + websocket.onclose = event => { + console.log('WebSocket 断线重连...') + setTimeout(() => { + this.websocket = linkStart() + }, 1000) } - if (data.type === 'push') { - //console.log('新上线客户端:', data) - return this.add(data) - } - if (data.type === 'pull') { - //console.log('移除客户端:', data) - return this.remove(data) - } - if (data.type === 'offer') { - //console.log('收到对方 offer', data) - const webrtc = webrtc_init() - const channels = channels_init(webrtc) - 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) - this.websocket.send(JSON.stringify({ type: 'answer', id: data.id, answer })) - return - } - if (data.type === 'answer') { - //console.log('收到对方 answer', data) - const pc = this.clientlist.find(client => client.id === data.id).webrtc - await pc.setRemoteDescription(data.answer) - return - } - if (data.type === 'candidate') { - // console.log('收到 candidate 并将其添加到远程端', data.candidate) - const pc = this.clientlist.find(client => client.id === data.id).webrtc - await pc.addIceCandidate(data.candidate) - return - } - console.log('收到未知数据:', data) + return websocket } + this.websocket = linkStart() } setChannel(name, option) { this.channels[name] = option