diff --git a/public/client.js b/public/client.js index f3812d0..41ff44e 100644 --- a/public/client.js +++ b/public/client.js @@ -1,8 +1,8 @@ import { List, ListItem } from './weigets.js' export default class ClientList { - constructor() { - this.EventListeners = {} + constructor({ channels = {}, EventListeners = {} }) { + this.EventListeners = EventListeners const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws' const host = window.location.host this.websocket = new WebSocket(`${protocol}://${host}/webrtc/music`) @@ -13,15 +13,41 @@ export default class ClientList { const data = JSON.parse(event.data) const webrtc_init = () => { const webrtc = new RTCPeerConnection() + Object.entries(channels).forEach(([name, callback]) => { + const channel = webrtc.createDataChannel(name) + channel.onopen = event => { + console.log('datachannel 已打开', event) + if (callback.onopen) callback.onopen(event, channel) + } + channel.onclose = event => { + console.log('datachannel 已关闭', event) + if (callback.onclose) callback.onclose(event, channel) + } + channel.onerror = event => { + console.log('datachannel 发生错误', event) + if (callback.onerror) callback.onerror(event, channel) + } + channel.onmessage = event => { + console.log('datachannel 收到数据', event) + if (callback.onmessage) callback.onmessage(event, channel) + } + }) webrtc.onicecandidate = event => { if (event.candidate) { - this.websocket.send(JSON.stringify({ type: 'candidate', id: data.id, candidate: 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.ondatachannel = ({ channel }) => { + console.log('收到对方 datachannel', channel) + channel.onmessage = event => { + console.log('收到对方 datachannel message', event) + if (channels[event.target.label]) { + channels[event.target.label].onmessage(event, channel) + } } } webrtc.oniceconnectionstatechange = event => { @@ -37,7 +63,8 @@ export default class ClientList { await webrtc.setLocalDescription(offer) this.clientlist.push({ id: data.id, name: data.name, webrtc }) this.websocket.send(JSON.stringify({ type: 'offer', id: data.id, offer })) - return this.add(data) + this.add(data) + return } if (data.type === 'push') { console.log('新上线客户端:', data) @@ -103,6 +130,7 @@ export default class ClientList { send(name, data) { console.log('广播数据:', data, '到通道:', name, '到所有客户端') this.clientlist.forEach(client => { + console.log('发送数据到客户端:', client.id) const channel = client.webrtc.getDataChannel(name) ?? client.webrtc.createDataChannel(name) channel.send(data) }) diff --git a/public/index.html b/public/index.html index fbf7a28..a3757bd 100644 --- a/public/index.html +++ b/public/index.html @@ -15,7 +15,7 @@ import IndexedDB from './database.js' import MusicList from './music.js' import ClientList from './client.js' - + // 初始化音乐列表 const musicList = new MusicList() musicList.on('play', item => { @@ -23,12 +23,39 @@ }) // 初始化客户端列表 - const clientList = new ClientList() + const clientList = new ClientList({ + channels: { + 'musicList': { + onopen: async (event, channel) => { + const list = await musicList.list + console.log('musicList:', list) + channel.send(JSON.stringify(list)) + }, + onmessage: async (event, channel) => { + console.log('收到 musicList:', event) + JSON.parse(event.data).forEach(item => { + musicList.push(item) + }) + }, + }, + } + }) + + // 在什么时机发送musicList? + // 通道准备好时即可发送 + + + clientList.on('channel') + + // 只需要在注册时拉取列表, 播放时才需要拉取音乐数据 // 先拉取所有对方的音乐列表, 对比去重, 拉取音乐数据 // 主动发送自己的音乐列表, 对比去重, 发送音乐数据 - console.log('musicList.list:', musicList) - clientList.send('music-list', '23333') + //clientList.on('list', async client => { + // console.log('push:', client) + // const musicList = await clientList.send('music-list', '23333') + // console.log('musicList:', musicList) + //}) // webRTC 传递音乐(分别传输文件和操作事件能更流畅) const music = async function () { diff --git a/public/music.js b/public/music.js index e978dd1..5eaa00e 100644 --- a/public/music.js +++ b/public/music.js @@ -5,9 +5,11 @@ export default class MusicList { constructor() { this.EventListeners = {} this.ul = List({}) + this.list = [] this.store = new IndexedDB('musicDatabase', 1, 'musicObjectStore') this.store.open().then(() => { this.store.getAll().then((data) => { + this.list = data data.forEach(item => this.__add(item)) }) }) @@ -76,6 +78,10 @@ export default class MusicList { }) this.ul.appendChild(li) } + // 叠加数据(双方数据计数器上升) + async push(item) { + console.log('叠加数据:', item) + } // 添加数据并添加UI add(item) { this.store.add(item)