diff --git a/public/entanglement.js b/public/entanglement.js index ba08a73..c79efb5 100644 --- a/public/entanglement.js +++ b/public/entanglement.js @@ -14,6 +14,68 @@ export default class Entanglement { // 当创建一个对象时,会调用这个方法 // 当创建一个对象时,所有连接在一起的终端都会同步这个对象 // 并不是所有的终端都会监听全局变化, 因此需要在这里注册监听(频道) + async __create_webrtc(user) { + const pc = new RTCPeerConnection(this.options) + // 当有新的媒体流加入时触发 + pc.onicecandidate = (event) => { + if (event.candidate) { + console.debug(user.name, '发出 candidate 候选通道') + this.ws.send(JSON.stringify({ type: 'candidate', user, candidate: event.candidate })) + } + } + // 当连接状态发生改变时触发 + pc.oniceconnectionstatechange = (event) => { + if (pc.iceConnectionState === 'disconnected' || pc.iceConnectionState === 'failed') { + console.error(user.name, '需要添加新的 candidate') + } else if (pc.iceConnectionState === 'connected' || pc.iceConnectionState === 'completed') { + console.debug(user.name, 'WebRTC 连接已经建立成功') + } + } + // 协商新的会话, 建立初始连接或在网络条件发生变化后重新协商连接 + pc.onnegotiationneeded = async (event) => { + console.log('onnegotiationneeded', event) + //const offer = await pc.createOffer() + //await pc.setLocalDescription(offer) + //this.ws.send(JSON.stringify({ type: 'offer', user, offer })) + } + // 当有新的媒体流加入时触发 + pc.ontrack = (event) => { + console.log('ontrack', event) + } + // 当有新的数据通道加入时触发 + pc.ondatachannel = event => { + console.log(user.name, '建立', event.channel.label, '通道') + event.channel.onmessage = event => { + console.log(user.name, '收到', event.target.label, '通道消息', event.data) + } + event.channel.onopen = () => { + console.log(user.name, '打开', event.channel.label, '通道') + event.channel.send('hello') + } + event.channel.onclose = () => { + console.log(user.name, '关闭', event.channel.label, '通道') + } + event.channel.onerror = () => { + console.log(user.name, '通道', event.channel.label, '发生错误') + } + } + // 创建数据通道 + const channel = pc.createDataChannel('json', { reliable: true }) + channel.onopen = () => { + console.log('打开数据通道') + channel.send(JSON.stringify({ name: 'sato', hello: 'world' })) + } + channel.onmessage = event => { + console.log('收到数据通道消息', event.data) + } + channel.onclose = () => { + console.log('关闭数据通道') + } + channel.onerror = () => { + console.log('数据通道发生错误') + } + return pc + } async __create_websocket() { const host = window.location.host @@ -84,79 +146,17 @@ export default class Entanglement { return ws } - async __create_webrtc(user) { - const pc = new RTCPeerConnection(this.options) - // 当有新的媒体流加入时触发 - pc.onicecandidate = (event) => { - if (event.candidate) { - console.debug(user.name, '发出 candidate 候选通道') - this.ws.send(JSON.stringify({ type: 'candidate', user, candidate: event.candidate })) - } - } - // 当连接状态发生改变时触发 - pc.oniceconnectionstatechange = (event) => { - if (webrtc.iceConnectionState === 'disconnected' || webrtc.iceConnectionState === 'failed') { - console.error(data.name, '需要添加新的 candidate') - } else if (webrtc.iceConnectionState === 'connected' || webrtc.iceConnectionState === 'completed') { - console.debug(data.name, 'WebRTC 连接已经建立成功') - } - } - // 协商新的会话, 建立初始连接或在网络条件发生变化后重新协商连接 - pc.onnegotiationneeded = async (event) => { - console.log('onnegotiationneeded', event) - const offer = await pc.createOffer() - await pc.setLocalDescription(offer) - this.ws.send(JSON.stringify({ type: 'offer', user, offer })) - } - // 当有新的媒体流加入时触发 - pc.ontrack = (event) => { - console.log('ontrack', event) - } - // 当有新的数据通道加入时触发 - pc.ondatachannel = event => { - console.log(data.user.name, '建立', event.channel.label, '通道') - event.channel.onmessage = event => { - console.log(data.user.name, '收到', event.channel.label, '通道消息', event.data) - } - event.channel.onopen = () => { - console.log(data.user.name, '打开', event.channel.label, '通道') - event.channel.send('hello') - } - event.channel.onclose = () => { - console.log(data.user.name, '关闭', event.channel.label, '通道') - } - event.channel.onerror = () => { - console.log(data.user.name, '通道', event.channel.label, '发生错误') - } - } - // 创建数据通道 - const channel = pc.createDataChannel('json', { reliable: true }) - channel.onopen = () => { - console.log('打开数据通道') - channel.send(JSON.stringify({ name: 'sato', hello: 'world' })) - } - channel.onmessage = event => { - console.log('收到数据通道消息', event.data) - } - channel.onclose = () => { - console.log('关闭数据通道') - } - channel.onerror = () => { - console.log('数据通道发生错误') - } - return pc - } - // 向所有在线的用户广播消息(webrtc) send_all(channel_name, data) { console.log('向', channel_name, '频道广播消息:', data) console.log('在线用户:', this.users) this.users.filter(user => { const status = user.webrtc.iceConnectionState + console.log('用户', user.name, '连接状态:', status) return status === 'connected' || status === 'completed' }).forEach(user => { console.log('向', user.name, '发送', channel_name, '频道消息:', data) - const channel = user.webrtc.createDataChannel(channel_name) + const channel = user.webrtc.createDataChannel(channel_name, { reliable: true }) channel.onopen = () => channel.send(JSON.stringify(data)) }) }