存储分离

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)
         }

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)
+                        console.log('发送 musicList:', list)
-                        channel.send(JSON.stringify(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?
         // 通道准备好时即可发送
 

public/music.js

@@ -2,16 +2,15 @@ import IndexedDB from './database.js'
 import { Button, List, ListItem } from './weigets.js'
 
 export default class MusicList {
-    constructor() {
+    constructor(EventListeners = {}) {
-        this.EventListeners = {}
+        this.EventListeners = EventListeners
         this.ul = List({})
         this.list = []
         this.store = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
-        this.store.open().then(() => {
+        this.store.open().then(async () => {
-            this.store.getAll().then((data) => {
+            this.list = await this.store.getAll()
-                this.list = data
+            this.list.forEach(item => this.__add(item))
-                data.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)