传递列表

This commit is contained in:
2023-09-29 17:31:37 +08:00
parent f7bc5ce83f
commit a4e2ebe315
3 changed files with 73 additions and 12 deletions

View File

@ -1,8 +1,8 @@
import { List, ListItem } from './weigets.js' import { List, ListItem } from './weigets.js'
export default class ClientList { export default class ClientList {
constructor() { constructor({ channels = {}, EventListeners = {} }) {
this.EventListeners = {} this.EventListeners = EventListeners
const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws' const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
const host = window.location.host const host = window.location.host
this.websocket = new WebSocket(`${protocol}://${host}/webrtc/music`) this.websocket = new WebSocket(`${protocol}://${host}/webrtc/music`)
@ -13,15 +13,41 @@ export default class ClientList {
const data = JSON.parse(event.data) const data = JSON.parse(event.data)
const webrtc_init = () => { const webrtc_init = () => {
const webrtc = new RTCPeerConnection() 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 => { webrtc.onicecandidate = event => {
if (event.candidate) { 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 => { webrtc.ondatachannel = ({ channel }) => {
console.log('收到对方 datachannel', event.channel) console.log('收到对方 datachannel', channel)
event.channel.onmessage = event => { channel.onmessage = event => {
console.log('收到对方 datachannel message', event.data) console.log('收到对方 datachannel message', event)
if (channels[event.target.label]) {
channels[event.target.label].onmessage(event, channel)
}
} }
} }
webrtc.oniceconnectionstatechange = event => { webrtc.oniceconnectionstatechange = event => {
@ -37,7 +63,8 @@ export default class ClientList {
await webrtc.setLocalDescription(offer) await webrtc.setLocalDescription(offer)
this.clientlist.push({ id: data.id, name: data.name, webrtc }) this.clientlist.push({ id: data.id, name: data.name, webrtc })
this.websocket.send(JSON.stringify({ type: 'offer', id: data.id, offer })) this.websocket.send(JSON.stringify({ type: 'offer', id: data.id, offer }))
return this.add(data) this.add(data)
return
} }
if (data.type === 'push') { if (data.type === 'push') {
console.log('新上线客户端:', data) console.log('新上线客户端:', data)
@ -103,6 +130,7 @@ export default class ClientList {
send(name, data) { send(name, data) {
console.log('广播数据:', data, '到通道:', name, '到所有客户端') console.log('广播数据:', data, '到通道:', name, '到所有客户端')
this.clientlist.forEach(client => { this.clientlist.forEach(client => {
console.log('发送数据到客户端:', client.id)
const channel = client.webrtc.getDataChannel(name) ?? client.webrtc.createDataChannel(name) const channel = client.webrtc.getDataChannel(name) ?? client.webrtc.createDataChannel(name)
channel.send(data) channel.send(data)
}) })

View File

@ -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.on('list', async client => {
clientList.send('music-list', '23333') // console.log('push:', client)
// const musicList = await clientList.send('music-list', '23333')
// console.log('musicList:', musicList)
//})
// webRTC 传递音乐(分别传输文件和操作事件能更流畅) // webRTC 传递音乐(分别传输文件和操作事件能更流畅)
const music = async function () { const music = async function () {

View File

@ -5,9 +5,11 @@ export default class MusicList {
constructor() { constructor() {
this.EventListeners = {} this.EventListeners = {}
this.ul = List({}) this.ul = List({})
this.list = []
this.store = new IndexedDB('musicDatabase', 1, 'musicObjectStore') this.store = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
this.store.open().then(() => { this.store.open().then(() => {
this.store.getAll().then((data) => { this.store.getAll().then((data) => {
this.list = data
data.forEach(item => this.__add(item)) data.forEach(item => this.__add(item))
}) })
}) })
@ -76,6 +78,10 @@ export default class MusicList {
}) })
this.ul.appendChild(li) this.ul.appendChild(li)
} }
// 叠加数据(双方数据计数器上升)
async push(item) {
console.log('叠加数据:', item)
}
// 添加数据并添加UI // 添加数据并添加UI
add(item) { add(item) {
this.store.add(item) this.store.add(item)