From 9c59586ddadf38237516aedb4a5d812783266522 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A7=89?= Date: Fri, 29 Sep 2023 21:21:26 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E4=BC=A0=E9=80=92=E5=88=86?= =?UTF-8?q?=E7=A6=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/client.js | 15 ++++--- public/index.html | 99 +++++++++++++++++++++++++++++------------------ public/music.js | 73 +++++++++++++--------------------- 3 files changed, 97 insertions(+), 90 deletions(-) diff --git a/public/client.js b/public/client.js index c40976e..1764684 100644 --- a/public/client.js +++ b/public/client.js @@ -18,19 +18,19 @@ export default class ClientList { const channel = webrtc.createDataChannel(name) channel.onopen = event => { //console.log('datachannel 已打开', event) - if (callback.onopen) callback.onopen(event, channel) + if (callback.onopen) callback.onopen(event) } channel.onclose = event => { //console.log('datachannel 已关闭', event) - if (callback.onclose) callback.onclose(event, channel) + if (callback.onclose) callback.onclose(event) } channel.onerror = event => { //console.log('datachannel 发生错误', event) - if (callback.onerror) callback.onerror(event, channel) + if (callback.onerror) callback.onerror(event) } channel.onmessage = event => { //console.log('datachannel 收到数据', event) - if (callback.onmessage) callback.onmessage(event, channel) + if (callback.onmessage) callback.onmessage(event) } }) webrtc.onicecandidate = event => { @@ -43,9 +43,9 @@ export default class ClientList { } } webrtc.ondatachannel = ({ channel }) => { - console.log('收到对方 datachannel', channel) + //console.log('收到对方 datachannel', channel) channel.onmessage = event => { - console.log('收到对方 datachannel message', event) + //console.log('收到对方 datachannel message', event) if (channels[event.target.label]) { channels[event.target.label].onmessage(event, channel) } @@ -101,6 +101,9 @@ export default class ClientList { console.log('收到未知数据:', data) } } + setChannel(name, option) { + this.channels[name] = option + } add(item) { this.ul.appendChild(ListItem({ id: item.id, diff --git a/public/index.html b/public/index.html index a7b307b..a416af0 100644 --- a/public/index.html +++ b/public/index.html @@ -16,57 +16,80 @@ import MusicList from './music.js' import ClientList from './client.js' - // 打开数据库 + // 读取本地音乐列表(本地缓存) const store = new IndexedDB('musicDatabase', 1, 'musicObjectStore') await store.open() const list = await store.getAll() + console.log('本地音乐列表:', list) - // 初始化音乐列表 + // 初始化音乐列表(加入本地缓存) const musicList = new MusicList({ list }) + //musicList.add() // 添加音乐 + //musicList.remove() // 移除音乐 + musicList.on('remove', item => { + console.log('移除音乐', item) + store.delete(item.id) + }) musicList.on('play', item => { console.log('播放音乐', item) }) // 初始化客户端列表 - const clientList = new ClientList({ - channels: { - 'musicList': { - onopen: async (event, channel) => { - const list = await musicList.list - console.log('发送 musicList:', list) - channel.send(JSON.stringify(list.map(({ arrayBuffer, ...data }) => data))) - }, - onmessage: async (event, channel) => { - console.log('收到 musicList:', event) - JSON.parse(event.data).forEach(item => { - musicList.push(item) - }) - } - }, - 'musicload': { - onopen: async (event, channel) => { - console.log('发送 musicload:', event) - }, - onmessage: async (event, channel) => { - console.log('收到 musicload:', event) - } - } + const clientList = new ClientList({}) + clientList.setChannel('musicList', { + onopen: async event => { + console.log('发送 musicList:', event) + const data = musicList.list.map(({ arrayBuffer, ...item }) => item) + event.target.send(JSON.stringify(data)) + }, + onmessage: async event => { + console.log('收到 musicList:', event) + JSON.parse(event.data).forEach(item => { + musicList.add(item) + }) } }) + //// 初始化客户端列表 + //const clientList = new ClientList({ + // channels: { + // 'musicList': { + // onopen: async (event, channel) => { + // const list = await musicList.list + // console.log('发送 musicList:', list) + // channel.send(JSON.stringify(list.map(({ arrayBuffer, ...data }) => data))) + // }, + // onmessage: async (event, channel) => { + // console.log('收到 musicList:', event) + // JSON.parse(event.data).forEach(item => { + // musicList.push(item) + // }) + // } + // }, + // 'musicload': { + // onopen: async (event, channel) => { + // console.log('发送 musicload:', event) + // }, + // onmessage: async (event, channel) => { + // console.log('收到 musicload:', event) + // } + // } + // } + //}) + // 通过指定通道发送消息 + // 接收处理各种通道消息 // 延迟2秒执行 - await new Promise(resolve => setTimeout(resolve, 2000)) - - // 设定被动传输 - clientList.clientlist.forEach(client => { - console.log('client:', client) - client.webrtc.addEventListener('datachannel', event => { - console.log('收到 datachannel:', event) - event.channel.addEventListener('message', event => { - console.log('收到消息:', event) - }) - }) - }) + //await new Promise(resolve => setTimeout(resolve, 2000)) + //// 设定被动传输 + //clientList.clientlist.forEach(client => { + // console.log('client:', client) + // client.webrtc.addEventListener('datachannel', event => { + // console.log('收到 datachannel:', event) + // event.channel.addEventListener('message', event => { + // console.log('收到消息:', event) + // }) + // }) + //}) //musicList.on('load', item => { // console.log('从来源加载音乐', item) @@ -80,7 +103,7 @@ // like对方的条目时亮起(双方高亮)(本地缓存)(可由对比缓存实现) // ban对方的条目时灰掉(也禁止对方播放)(并保持ban表)(由插件实现) - clientList.on('channel') + //clientList.on('channel') // 只需要在注册时拉取列表, 播放时才需要拉取音乐数据 diff --git a/public/music.js b/public/music.js index 50f4f0e..3b2e65f 100644 --- a/public/music.js +++ b/public/music.js @@ -2,17 +2,12 @@ import IndexedDB from './database.js' import { Button, List, ListItem } from './weigets.js' export default class MusicList { - constructor(EventListeners = {}) { - this.EventListeners = EventListeners + constructor({ list = [], EventListeners = {} }) { this.ul = List({}) + this.EventListeners = EventListeners this.list = [] - this.store = new IndexedDB('musicDatabase', 1, 'musicObjectStore') - this.store.open().then(async () => { - this.list = await this.store.getAll() - this.list.forEach(item => this.__add(item)) - this.EventListeners['ready'](this.list) - }) - document.body.appendChild(this.ul) + list.forEach(item => this.add(item)) // 列表逐一添加 + document.body.appendChild(this.ul) // 元素加入页面 // 添加音乐播放器 this.audio = new Audio() @@ -23,7 +18,7 @@ export default class MusicList { // console.log(this.audio.currentTime) //}) - // 添加音乐按钮 + // 本地添加音乐按钮 const input = document.createElement('input') input.type = 'file' input.multiple = true @@ -42,9 +37,13 @@ export default class MusicList { } document.body.appendChild(input) } - // 仅添加UI - __add(item) { - const li = ListItem({ + // 添加回调函数 + on(name, callback) { + this.EventListeners[name] = callback + } + add(item) { + this.list.push(item) + this.ul.appendChild(ListItem({ id: item.id, innerText: `${item.name} - ${item.size} - ${item.type} - ${item.id}`, children: [ @@ -66,7 +65,7 @@ export default class MusicList { innerText: '移除', onclick: event => { event.stopPropagation() - this.delete(item) + this.remove(item) } }), Button({ @@ -84,29 +83,15 @@ export default class MusicList { } }) ] - }) - this.ul.appendChild(li) + })) } - // 叠加数据(双方数据计数器上升) - async push(item) { - console.log('叠加数据: 只增加UI不存储本地', item) - // 先检测是否已经存在 - const data = await this.store.get(item.id) - if (data) { - console.log('数据已存在:', data) - return - } - this.__add(item) - } - // 添加数据并添加UI - add(item) { - this.store.add(item) - this.__add(item) - } - delete(item) { - this.store.delete(item.id) + remove(item) { this.ul.removeChild(this.ul.querySelector(`#${item.id}`)) this.stop() // 停止播放 + // 执行回调函数 + if (this.EventListeners['remove']) { + this.EventListeners['remove'](item) + } } async play(item) { // 如果没有arrayBuffer则从对方获取 @@ -117,12 +102,18 @@ export default class MusicList { } this.audio.src = URL.createObjectURL(new Blob([item.arrayBuffer], { type: item.type })) this.audio.play() - this._on('play', item) + // 执行回调函数 + if (this.EventListeners['play']) { + this.EventListeners['play'](item) + } } stop() { this.audio.pause() this.audio.src = '' - this._on('stop') + // 执行回调函数 + if (this.EventListeners['stop']) { + this.EventListeners['stop']() + } } like(item) { if (!item.arrayBuffer) { @@ -135,14 +126,4 @@ export default class MusicList { } next() { } prev() { } - // 添加回调函数 - on(name, callback) { - this.EventListeners[name] = callback - } - // 执行回调函数 - _on(name, ...args) { - if (this.EventListeners[name]) { - this.EventListeners[name](...args) - } - } }