diff --git a/public/client.js b/public/client.js index 44fc50f..f3812d0 100644 --- a/public/client.js +++ b/public/client.js @@ -2,28 +2,36 @@ import { List, ListItem } from './weigets.js' export default class ClientList { constructor() { + this.EventListeners = {} 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.onopen = event => { - // console.log('clientlist websocket: onopen') - // console.log('当连接建立时,服务器将逐一发送所有客户端信息') - //} this.websocket.onmessage = async event => { const data = JSON.parse(event.data) - if (data.type === 'list') { - console.log('取得在线对端列表:', data) + const webrtc_init = () => { const webrtc = new RTCPeerConnection() - webrtc.createDataChannel('music') webrtc.onicecandidate = event => { - console.log('clientlist onicecandidate E', event) if (event.candidate) { this.websocket.send(JSON.stringify({ type: 'candidate', id: data.id, candidate: event.candidate })) } } + webrtc.ondatachannel = event => { + console.log('收到对方 datachannel', event.channel) + event.channel.onmessage = event => { + console.log('收到对方 datachannel message', event.data) + } + } + webrtc.oniceconnectionstatechange = event => { + console.log('WebRTC ICE 连接状态更改:', webrtc.iceConnectionState) + } + return webrtc + } + if (data.type === 'list') { + console.log('取得在线对端列表:', data) + const webrtc = webrtc_init() console.log('发送给对方 offer') const offer = await webrtc.createOffer() await webrtc.setLocalDescription(offer) @@ -41,14 +49,7 @@ export default class ClientList { } if (data.type === 'offer') { console.log('收到对方 offer', data) - const webrtc = new RTCPeerConnection() - webrtc.createDataChannel('music') - webrtc.onicecandidate = event => { - console.log('clientlist onicecandidate X', event) - if (event.candidate) { - this.websocket.send(JSON.stringify({ type: 'candidate', id: data.id, candidate: event.candidate })) - } - } + const webrtc = webrtc_init() this.clientlist.push({ id: data.id, name: data.name, webrtc }) console.log('发送给对方 answer') await webrtc.setRemoteDescription(data.offer) @@ -88,5 +89,22 @@ export default class ClientList { get(id) { } getAll() { } clear() { } - on(event, callback) { } + // 添加回调函数 + on(name, callback) { + this.EventListeners[name] = callback + } + // 执行回调函数 + _on(name, ...args) { + if (this.EventListeners[name]) { + this.EventListeners[name](...args) + } + } + // 通过指定通道发送数据(广播) + send(name, data) { + console.log('广播数据:', data, '到通道:', name, '到所有客户端') + this.clientlist.forEach(client => { + const channel = client.webrtc.getDataChannel(name) ?? client.webrtc.createDataChannel(name) + channel.send(data) + }) + } } diff --git a/public/index.html b/public/index.html index 9a5a70b..fbf7a28 100644 --- a/public/index.html +++ b/public/index.html @@ -18,55 +18,17 @@ // 初始化音乐列表 const musicList = new MusicList() + musicList.on('play', item => { + console.log('播放音乐', item) + }) // 初始化客户端列表 const clientList = new ClientList() - //// 初始化音乐频道 - //const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws' - //const host = window.location.host - //const ws = new WebSocket(`${protocol}://${host}/webrtc/music`) - //ws.onopen = function () { - // console.log('music ws open') - //} - //ws.onmessage = function (event) { - // const data = JSON.parse(event.data) - // console.log('ws message:', data) - // if (data.type === 'push') { - // console.log('收到 type:push 将设备增加', data.id) - // clientList.add(data.id, data.channel) - // return - // } - // if (data.type === 'pull') { - // console.log('收到 type:pull 将设备删除', data.id) - // clientList.remove(data) - // return - // } - // if (data.type === 'error') { - // console.log('收到 type:error 没什么可操作的', data.id) - // return - // } - // if (data.offer) { - // console.log('收到 offer 并将其设置为远程描述') - // //clientList.setRemoteDescription(data) - // pc.setRemoteDescription(new RTCSessionDescription(data.offer)) - // // 创建SDP answer并将其设置为本地描述, 发送给远程端 - // pc.createAnswer().then(function (answer) { - // pc.setLocalDescription(answer); - // ws.send(JSON.stringify({ answer })) - // }) - // return - // } - // if (data.answer) { - // console.log('收到 answer 并将其设置为远程描述') - // pc.setRemoteDescription(new RTCSessionDescription(data.answer)) - // return - // } - // if (data.candidate) { - // console.log('收到 candidate 并将其添加到远程端') - // pc.addIceCandidate(new RTCIceCandidate(data.candidate)) - // } - //} + // 先拉取所有对方的音乐列表, 对比去重, 拉取音乐数据 + // 主动发送自己的音乐列表, 对比去重, 发送音乐数据 + console.log('musicList.list:', musicList) + clientList.send('music-list', '23333') // webRTC 传递音乐(分别传输文件和操作事件能更流畅) const music = async function () {