diff --git a/public/client.js b/public/client.js index 41ff44e..c40976e 100644 --- a/public/client.js +++ b/public/client.js @@ -2,6 +2,7 @@ import { List, ListItem } from './weigets.js' export default class ClientList { constructor({ channels = {}, EventListeners = {} }) { + this.channels = channels this.EventListeners = EventListeners const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws' const host = window.location.host @@ -16,19 +17,19 @@ export default class ClientList { Object.entries(channels).forEach(([name, callback]) => { const channel = webrtc.createDataChannel(name) channel.onopen = event => { - console.log('datachannel 已打开', event) + //console.log('datachannel 已打开', event) if (callback.onopen) callback.onopen(event, channel) } channel.onclose = event => { - console.log('datachannel 已关闭', event) + //console.log('datachannel 已关闭', event) if (callback.onclose) callback.onclose(event, channel) } channel.onerror = event => { - console.log('datachannel 发生错误', event) + //console.log('datachannel 发生错误', event) if (callback.onerror) callback.onerror(event, channel) } channel.onmessage = event => { - console.log('datachannel 收到数据', event) + //console.log('datachannel 收到数据', event) if (callback.onmessage) callback.onmessage(event, channel) } }) @@ -51,14 +52,14 @@ export default class ClientList { } } webrtc.oniceconnectionstatechange = event => { - console.log('WebRTC ICE 连接状态更改:', webrtc.iceConnectionState) + //console.log('WebRTC ICE 连接状态更改:', webrtc.iceConnectionState) } return webrtc } if (data.type === 'list') { - console.log('取得在线对端列表:', data) + //console.log('取得在线对端列表:', data) const webrtc = webrtc_init() - console.log('发送给对方 offer') + //console.log('发送给对方 offer') const offer = await webrtc.createOffer() await webrtc.setLocalDescription(offer) this.clientlist.push({ id: data.id, name: data.name, webrtc }) @@ -75,10 +76,10 @@ export default class ClientList { return this.remove(data) } if (data.type === 'offer') { - console.log('收到对方 offer', data) + //console.log('收到对方 offer', data) const webrtc = webrtc_init() this.clientlist.push({ id: data.id, name: data.name, webrtc }) - console.log('发送给对方 answer') + //console.log('发送给对方 answer') await webrtc.setRemoteDescription(data.offer) const answer = await webrtc.createAnswer() await webrtc.setLocalDescription(answer) @@ -86,15 +87,16 @@ export default class ClientList { return } if (data.type === 'answer') { - console.log('收到对方 answer', data) + //console.log('收到对方 answer', data) const pc = this.clientlist.find(client => client.id === data.id).webrtc await pc.setRemoteDescription(data.answer) return } if (data.type === 'candidate') { + // console.log('收到 candidate 并将其添加到远程端', data.candidate) const pc = this.clientlist.find(client => client.id === data.id).webrtc await pc.addIceCandidate(data.candidate) - return console.log('收到 candidate 并将其添加到远程端', data.candidate) + return } console.log('收到未知数据:', data) } diff --git a/public/index.html b/public/index.html index a6a2466..a7b307b 100644 --- a/public/index.html +++ b/public/index.html @@ -16,8 +16,13 @@ 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() + // 初始化音乐列表 - const musicList = new MusicList() + const musicList = new MusicList({ list }) musicList.on('play', item => { console.log('播放音乐', item) }) @@ -28,19 +33,46 @@ 'musicList': { onopen: async (event, channel) => { const list = await musicList.list - console.log('musicList:', list) - channel.send(JSON.stringify(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) + }) + }) + }) + + //musicList.on('load', item => { + // console.log('从来源加载音乐', item) + // clientList.send('musicList', JSON.stringify([item])) + //}) + // 在什么时机发送musicList? // 通道准备好时即可发送 diff --git a/public/music.js b/public/music.js index 4fed8fc..50f4f0e 100644 --- a/public/music.js +++ b/public/music.js @@ -2,16 +2,15 @@ import IndexedDB from './database.js' import { Button, List, ListItem } from './weigets.js' export default class MusicList { - constructor() { - this.EventListeners = {} + constructor(EventListeners = {}) { + this.EventListeners = 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)) - }) + 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) @@ -48,10 +47,6 @@ export default class MusicList { const li = ListItem({ id: item.id, innerText: `${item.name} - ${item.size} - ${item.type} - ${item.id}`, - onclick: event => { - event.stopPropagation() - this.play(item) - }, children: [ Button({ innerText: '播放', @@ -113,7 +108,13 @@ export default class MusicList { this.ul.removeChild(this.ul.querySelector(`#${item.id}`)) this.stop() // 停止播放 } - play(item) { + async play(item) { + // 如果没有arrayBuffer则从对方获取 + console.log('play:', item) + if (!item.arrayBuffer) { + console.log('从对方获取:', item) + return + } this.audio.src = URL.createObjectURL(new Blob([item.arrayBuffer], { type: item.type })) this.audio.play() this._on('play', item)