事件传递分离
This commit is contained in:
parent
549c5d0ec4
commit
9c59586dda
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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)))
|
||||
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, channel) => {
|
||||
onmessage: async event => {
|
||||
console.log('收到 musicList:', event)
|
||||
JSON.parse(event.data).forEach(item => {
|
||||
musicList.push(item)
|
||||
musicList.add(item)
|
||||
})
|
||||
}
|
||||
},
|
||||
'musicload': {
|
||||
onopen: async (event, channel) => {
|
||||
console.log('发送 musicload:', event)
|
||||
},
|
||||
onmessage: async (event, channel) => {
|
||||
console.log('收到 musicload:', event)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
//// 初始化客户端列表
|
||||
//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')
|
||||
|
||||
// 只需要在注册时拉取列表, 播放时才需要拉取音乐数据
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue