LaniakeaSupercluster
/
webrtc
2
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

事件传递分离

This commit is contained in:
觉 2023-09-29 21:21:26 +08:00
parent 549c5d0ec4
commit 9c59586dda
3 changed files with 97 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/client.js
View File

@ -18,19 +18,19 @@ export default class ClientList {
const channel = webrtc.createDataChannel(name) const channel = webrtc.createDataChannel(name)
channel.onopen = event => { channel.onopen = event => {
//console.log('datachannel 已打开', event) //console.log('datachannel 已打开', event)
if (callback.onopen) callback.onopen(event, channel) if (callback.onopen) callback.onopen(event)
} }
channel.onclose = event => { channel.onclose = event => {
//console.log('datachannel 已关闭', event) //console.log('datachannel 已关闭', event)
if (callback.onclose) callback.onclose(event, channel) if (callback.onclose) callback.onclose(event)
} }
channel.onerror = event => { channel.onerror = event => {
//console.log('datachannel 发生错误', event) //console.log('datachannel 发生错误', event)
if (callback.onerror) callback.onerror(event, channel) if (callback.onerror) callback.onerror(event)
} }
channel.onmessage = event => { channel.onmessage = event => {
//console.log('datachannel 收到数据', event) //console.log('datachannel 收到数据', event)
if (callback.onmessage) callback.onmessage(event, channel) if (callback.onmessage) callback.onmessage(event)
} }
}) })
webrtc.onicecandidate = event => { webrtc.onicecandidate = event => {
@ -43,9 +43,9 @@ export default class ClientList {
} }
} }
webrtc.ondatachannel = ({ channel }) => { webrtc.ondatachannel = ({ channel }) => {
console.log('收到对方 datachannel', channel) //console.log('收到对方 datachannel', channel)
channel.onmessage = event => { channel.onmessage = event => {
console.log('收到对方 datachannel message', event) //console.log('收到对方 datachannel message', event)
if (channels[event.target.label]) { if (channels[event.target.label]) {
channels[event.target.label].onmessage(event, channel) channels[event.target.label].onmessage(event, channel)
} }
@ -101,6 +101,9 @@ export default class ClientList {
console.log('收到未知数据:', data) console.log('收到未知数据:', data)
} }
} }
setChannel(name, option) {
this.channels[name] = option
}
add(item) { add(item) {
this.ul.appendChild(ListItem({ this.ul.appendChild(ListItem({
id: item.id, id: item.id,

91
public/index.html
View File

@ -16,57 +16,80 @@
import MusicList from './music.js' import MusicList from './music.js'
import ClientList from './client.js' import ClientList from './client.js'
// 打开数据库 // 读取本地音乐列表(本地缓存)
const store = new IndexedDB('musicDatabase', 1, 'musicObjectStore') const store = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
await store.open() await store.open()
const list = await store.getAll() const list = await store.getAll()
console.log('本地音乐列表:', list)
// 初始化音乐列表 // 初始化音乐列表(加入本地缓存)
const musicList = new MusicList({ 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 => { musicList.on('play', item => {
console.log('播放音乐', item) console.log('播放音乐', item)
}) })
// 初始化客户端列表 // 初始化客户端列表
const clientList = new ClientList({ const clientList = new ClientList({})
channels: { clientList.setChannel('musicList', {
'musicList': { onopen: async event => {
onopen: async (event, channel) => { console.log('发送 musicList:', event)
const list = await musicList.list const data = musicList.list.map(({ arrayBuffer, ...item }) => item)
console.log('发送 musicList:', list) event.target.send(JSON.stringify(data))
channel.send(JSON.stringify(list.map(({ arrayBuffer, ...data }) => data)))
}, },
onmessage: async (event, channel) => { onmessage: async event => {
console.log('收到 musicList:', event) console.log('收到 musicList:', event)
JSON.parse(event.data).forEach(item => { 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秒执行 // 延迟2秒执行
await new Promise(resolve => setTimeout(resolve, 2000)) //await new Promise(resolve => setTimeout(resolve, 2000))
//// 设定被动传输
// 设定被动传输 //clientList.clientlist.forEach(client => {
clientList.clientlist.forEach(client => { // console.log('client:', client)
console.log('client:', client) // client.webrtc.addEventListener('datachannel', event => {
client.webrtc.addEventListener('datachannel', event => { // console.log('收到 datachannel:', event)
console.log('收到 datachannel:', event) // event.channel.addEventListener('message', event => {
event.channel.addEventListener('message', event => { // console.log('收到消息:', event)
console.log('收到消息:', event) // })
}) // })
}) //})
})
//musicList.on('load', item => { //musicList.on('load', item => {
// console.log('从来源加载音乐', item) // console.log('从来源加载音乐', item)
@ -80,7 +103,7 @@
// like对方的条目时亮起(双方高亮)(本地缓存)(可由对比缓存实现) // like对方的条目时亮起(双方高亮)(本地缓存)(可由对比缓存实现)
// ban对方的条目时灰掉(也禁止对方播放)(并保持ban表)(由插件实现) // ban对方的条目时灰掉(也禁止对方播放)(并保持ban表)(由插件实现)
clientList.on('channel') //clientList.on('channel')
// 只需要在注册时拉取列表, 播放时才需要拉取音乐数据 // 只需要在注册时拉取列表, 播放时才需要拉取音乐数据

73
public/music.js
View File

@ -2,17 +2,12 @@ import IndexedDB from './database.js'
import { Button, List, ListItem } from './weigets.js' import { Button, List, ListItem } from './weigets.js'
export default class MusicList { export default class MusicList {
constructor(EventListeners = {}) { constructor({ list = [], EventListeners = {} }) {
this.EventListeners = EventListeners
this.ul = List({}) this.ul = List({})
this.EventListeners = EventListeners
this.list = [] this.list = []
this.store = new IndexedDB('musicDatabase', 1, 'musicObjectStore') list.forEach(item => this.add(item)) // 列表逐一添加
this.store.open().then(async () => { document.body.appendChild(this.ul) // 元素加入页面
this.list = await this.store.getAll()
this.list.forEach(item => this.__add(item))
this.EventListeners['ready'](this.list)
})
document.body.appendChild(this.ul)
// 添加音乐播放器 // 添加音乐播放器
this.audio = new Audio() this.audio = new Audio()
@ -23,7 +18,7 @@ export default class MusicList {
// console.log(this.audio.currentTime) // console.log(this.audio.currentTime)
//}) //})
// 添加音乐按钮 // 本地添加音乐按钮
const input = document.createElement('input') const input = document.createElement('input')
input.type = 'file' input.type = 'file'
input.multiple = true input.multiple = true
@ -42,9 +37,13 @@ export default class MusicList {
} }
document.body.appendChild(input) document.body.appendChild(input)
} }
// 仅添加UI // 添加回调函数
__add(item) { on(name, callback) {
const li = ListItem({ this.EventListeners[name] = callback
}
add(item) {
this.list.push(item)
this.ul.appendChild(ListItem({
id: item.id, id: item.id,
innerText: `${item.name} - ${item.size} - ${item.type} - ${item.id}`, innerText: `${item.name} - ${item.size} - ${item.type} - ${item.id}`,
children: [ children: [
@ -66,7 +65,7 @@ export default class MusicList {
innerText: '移除', innerText: '移除',
onclick: event => { onclick: event => {
event.stopPropagation() event.stopPropagation()
this.delete(item) this.remove(item)
} }
}), }),
Button({ Button({
@ -84,29 +83,15 @@ export default class MusicList {
} }
}) })
] ]
}) }))
this.ul.appendChild(li)
} }
// 叠加数据(双方数据计数器上升) remove(item) {
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)
this.ul.removeChild(this.ul.querySelector(`#${item.id}`)) this.ul.removeChild(this.ul.querySelector(`#${item.id}`))
this.stop() // 停止播放 this.stop() // 停止播放
// 执行回调函数
if (this.EventListeners['remove']) {
this.EventListeners['remove'](item)
}
} }
async play(item) { async play(item) {
// 如果没有arrayBuffer则从对方获取 // 如果没有arrayBuffer则从对方获取
@ -117,12 +102,18 @@ export default class MusicList {
} }
this.audio.src = URL.createObjectURL(new Blob([item.arrayBuffer], { type: item.type })) this.audio.src = URL.createObjectURL(new Blob([item.arrayBuffer], { type: item.type }))
this.audio.play() this.audio.play()
this._on('play', item) // 执行回调函数
if (this.EventListeners['play']) {
this.EventListeners['play'](item)
}
} }
stop() { stop() {
this.audio.pause() this.audio.pause()
this.audio.src = '' this.audio.src = ''
this._on('stop') // 执行回调函数
if (this.EventListeners['stop']) {
this.EventListeners['stop']()
}
} }
like(item) { like(item) {
if (!item.arrayBuffer) { if (!item.arrayBuffer) {
@ -135,14 +126,4 @@ export default class MusicList {
} }
next() { } next() { }
prev() { } prev() { }
// 添加回调函数
on(name, callback) {
this.EventListeners[name] = callback
}
// 执行回调函数
_on(name, ...args) {
if (this.EventListeners[name]) {
this.EventListeners[name](...args)
}
}
} }