传递列表

public/client.js

@@ -1,8 +1,8 @@
 import { List, ListItem } from './weigets.js'
 
 export default class ClientList {
-    constructor() {
+    constructor({ channels = {}, EventListeners = {} }) {
-        this.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 => {
+                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 => {
@@ -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)
         })

public/index.html

@@ -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 传递音乐(分别传输文件和操作事件能更流畅)
         const music = async function () {

public/music.js

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