传递列表
This commit is contained in:
parent
f7bc5ce83f
commit
a4e2ebe315
|
|
@ -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)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue