重构

README.md

@@ -19,3 +19,210 @@ webrtc 实现的 p2p 信道
         [a2, b2, c2, d2, e2]
                 [a3, b3, c3, d3, e3]
 ```
+
+
+备用代码片段
+```html
+    <script type="module">
+
+        // webRTC 传递音乐(分别传输文件和操作事件能更流畅)
+        const music = async function () {
+            const clients = [] // 客户端列表
+
+            // 对端设备
+            const ul = document.createElement('ul')
+            document.body.appendChild(ul)
+            const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
+            const host = window.location.host
+            const ws = new WebSocket(`${protocol}://${host}/webrtc/music`)
+            const pc = new RTCPeerConnection()
+
+            var audioSource = null
+            // 监听音乐列表播放事件
+            musicList.on('play', async item => {
+                audioSource?.stop() // 先停止可能在播放的音乐
+                console.log('播放音乐', item.arrayBuffer)
+                // 复制一份 item.arrayBuffer
+                const arrayBuffer = item.arrayBuffer.slice(0)
+                // 传输音乐文件向远程端
+                const audioContext = new AudioContext()
+                audioContext.decodeAudioData(arrayBuffer, async audioBuffer => {
+                    // 将音乐流添加到 RTCPeerConnection
+                    const mediaStreamDestination = audioContext.createMediaStreamDestination()
+                    mediaStreamDestination.stream.getAudioTracks().forEach(function (track) {
+                        pc.addTrack(track, mediaStreamDestination.stream)
+                    })
+                    // 播放音乐(远程)
+                    audioSource = audioContext.createBufferSource()
+                    audioSource.buffer = audioBuffer
+                    audioSource.connect(mediaStreamDestination)
+                    audioSource.start()
+                    // 创建SDP offer并将其设置为本地描述, 发送给指定的远程端
+                    const id = clients[0].id
+                    await pc.setLocalDescription(await pc.createOffer())     // 设置本地描述为 offer
+                    ws.send(JSON.stringify({ id, offer: pc.localDescription }))  // 发送给远程终端 offer
+                })
+            })
+            // 监听音乐列表停止事件
+            musicList.on('stop', async () => {
+                audioSource?.stop()
+                audioSource = null
+            })
+            // 监听 ICE 候选事件
+            pc.onicecandidate = event => {
+                if (event.candidate) {
+                    const id = clients[0].id
+                    ws.send(JSON.stringify({ id, candidate: event.candidate }))  // 发送 ICE 候选到远程终端
+                }
+            }
+            // 监听远程流事件
+            pc.ontrack = function (event) {
+                console.log('pc ontrack:', event)
+                const audio = document.createElement('audio')
+                audio.srcObject = event.streams[0]
+                audio.play()
+            }
+            ws.onmessage = async (event) => {
+                const data = JSON.parse(event.data)
+                if (data.type === 'push') {
+                    console.log('收到 type:push 将设备增加', data.id)
+                    clients.push({ id: data.id, channel: data.channel })
+                    const li = document.createElement('li')
+                    li.innerText = `id:${data.id} channel:${data.channel}`
+                    li.id = data.id
+                    li.onclick = async () => {
+                        console.log('点击设备', data.id)
+                        // 清理所有选中状态
+                        clients.forEach(client => {
+                            const li = document.getElementById(client.id)
+                            if (data.id === client.id) {
+                                li.style.backgroundColor = 'red'
+                                console.log('设置选中状态', data.id)
+                                return
+                            }
+                            li.style.backgroundColor = 'transparent'
+                            console.log('清理选中状态', client.id)
+                        })
+                    }
+                    ul.appendChild(li)
+                    return
+                }
+                if (data.type === 'pull') {
+                    console.log('收到 type:pull 将设备删除', data.id)
+                    const index = clients.findIndex(client => client.id === data.id)
+                    if (index !== -1) {
+                        clients.splice(index, 1)
+                        const li = document.getElementById(data.id)
+                        li.remove()
+                    }
+                    return
+                }
+                if (data.type === 'error') {
+                    console.log('收到 type:error 没什么可操作的', data.id)
+                    return
+                }
+                if (data.offer) {
+                    const id = clients[0].id
+                    console.log('收到 offer 并将其设置为远程描述', data.offer)
+                    await pc.setRemoteDescription(new RTCSessionDescription(data.offer)) // 设置远程描述为 offer
+                    await pc.setLocalDescription(await pc.createAnswer())                // 设置本地描述为 answer
+                    ws.send(JSON.stringify({ id, answer: pc.localDescription }))         // 发送给远程终端 answer
+                    return
+                }
+                if (data.answer) {
+                    console.log('收到 answer 并将其设置为远程描述', data.answer)
+                    await pc.setRemoteDescription(new RTCSessionDescription(data.answer))
+                    return
+                }
+                if (data.candidate) {
+                    console.log('收到 candidate 并将其添加到远程端', data.candidate)
+                    await pc.addIceCandidate(new RTCIceCandidate(data.candidate))
+                    return
+                }
+            }
+        }
+        //music()
+    </script>
+    <script type="module">
+        // 创建 RTCPeerConnection
+        const pc = new RTCPeerConnection()
+        // webSocket 连接服务器
+        const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
+        const host = window.location.host
+        const ws = new WebSocket(`${protocol}://${host}/webrtc/default`)
+        ws.onopen = function () {
+            console.log('video ws open')
+        }
+        ws.onmessage = function (event) {
+            const data = JSON.parse(event.data)
+            console.log('ws message:', data)
+            if (data.offer) {
+                console.log('收到 offer 并将其设置为远程描述')
+                pc.setRemoteDescription(new RTCSessionDescription(data.offer))
+                // 创建SDP answer并将其设置为本地描述, 发送给远程端
+                pc.createAnswer().then(function (answer) {
+                    pc.setLocalDescription(answer)
+                    ws.send(JSON.stringify({ answer }))
+                })
+                return
+            }
+            if (data.answer) {
+                console.log('收到 answer 并将其设置为远程描述')
+                pc.setRemoteDescription(new RTCSessionDescription(data.answer))
+                return
+            }
+            if (data.candidate) {
+                console.log('收到 candidate 并将其添加到远程端')
+                pc.addIceCandidate(new RTCIceCandidate(data.candidate))
+            }
+        }
+        ws.onclose = function () {
+            console.log('ws close')
+        }
+
+        setTimeout(() => {
+
+            // 获取本地视频流
+            navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(stream => {
+                // 创建本地视频元素
+                const localVideo = document.createElement('video')
+                localVideo.srcObject = stream
+                localVideo.autoplay = true
+                localVideo.muted = true
+                document.body.appendChild(localVideo)
+
+                // 添加本地视频流到 RTCPeerConnection
+                stream.getTracks().forEach(function (track) {
+                    pc.addTrack(track, stream)
+                })
+
+                // 监听 ICE candidate 事件
+                pc.onicecandidate = function (event) {
+                    if (event.candidate) {
+                        // 发送 ICE candidate 到远程端
+                        ws.send(JSON.stringify({ candidate: event.candidate }))
+                    }
+                }
+
+                // 监听远程视频流事件
+                pc.ontrack = function (event) {
+                    // 创建远程视频元素
+                    var remoteVideo = document.createElement('video')
+                    remoteVideo.srcObject = event.streams[0]
+                    remoteVideo.autoplay = true
+                    document.body.appendChild(remoteVideo)
+                }
+
+                // 创建SDP offer并将其设置为本地描述, 发送给远程端
+                pc.createOffer().then(function (offer) {
+                    pc.setLocalDescription(offer)
+                    ws.send(JSON.stringify({ offer }))
+                })
+
+            }).catch(error => {
+                console.log(error)
+            })
+
+        }, 1000)
+    </script>
+```

public/client.js

@@ -20,8 +20,7 @@ export default class ClientList {
                         iceServers: [{
                             urls: 'turn:satori.love:3478',
                             username: 'x-username',
-                            credential: 'x-password', //await crypto.subtle.digest('SHA-1', new TextEncoder().encode('your-password')),
+                            credential: 'x-password'
-                            //credentialType: 'password'
                         }]
                     })
                     webrtc.onicecandidate = event => {
@@ -152,6 +151,22 @@ export default class ClientList {
             this.EventListeners[name](...args)
         }
     }
+    // 通过指定通道发送数据(单播)
+    sendto(id, name, data) {
+        //console.log('发送数据:', data, '到通道:', name, '到客户端:', id)
+        const client = this.clientlist.find(client => client.id === id)
+        if (!client) {
+            console.log('客户端不存在:', id)
+            return
+        }
+        client.channels.filter(ch => ch.label === name).forEach(async ch => {
+            // 等待 datachannel 打开(临时解决方案)
+            while (ch.readyState !== 'open') {
+                await new Promise(resolve => setTimeout(resolve, 100))
+            }
+            ch.send(data)
+        })
+    }
     // 通过指定通道发送数据(广播)
     send(name, data) {
         //console.log('广播数据:', data, '到通道:', name, '到所有客户端')

public/index.html

@@ -17,30 +17,61 @@
         import ClientList from './client.js'
 
         // 读取本地音乐列表(本地缓存)
-        const store = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
+        const database = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
-        await store.open()
+        await database.open()
-        const list = await store.getAll()
+        const list = await database.getAll()
-        //console.log('本地音乐列表:', list)
 
         // 读取本地用户名(本地缓存)
-        const name = localStorage.getItem('username')
+        const name = localStorage.getItem('username') ?? '游客'
-        if (!name) {
+
-            localStorage.setItem('username', `user-${Math.random().toString(36).substr(2)}`)
+        // 初始化客户端列表
-        }
+        const clientList = new ClientList({ name })
 
         // 初始化音乐列表(加入本地缓存)
-        const musicList = new MusicList({ list })
+        const musicList = new MusicList({
-        musicList.on('remove', item => {
+            list,
-            //console.log('移除音乐', item)
+            onplay: item => {
-            store.delete(item.id)
+                console.log('播放音乐', item.name)
-        })
+            },
-        musicList.on('play', item => {
+            onstop: item => {
-            //console.log('播放音乐', item)
+                console.log('停止音乐', item.name)
-        })
+            },
-        musicList.on('load', async item => {
+            onlike: item => {
-            await new Promise((resolve) => {
+                console.log('喜欢音乐', item)
-                //console.log('加载音乐', item)
+                if (item.arrayBuffer) {
-                // 建立一个专用信道, 用于接收音乐数据(接收方已经准备好摘要信息)
+                    database.add(item)
+                    // clientList.send('base', JSON.stringify({
+                    //     type: 'set_music_list',
+                    //     list: list.map(({ id, name, size, type }) => ({ id, name, size, type }))
+                    // }))
+                }
+            },
+            onunlike: item => {
+                console.log('取消喜欢', item)
+            },
+            onban: item => {
+                console.log('禁止音乐', item)
+            },
+            onunban: item => {
+                console.log('解禁音乐', item)
+            },
+            onremove: item => {
+                console.log('移除音乐', item)
+                database.delete(item.id)
+            },
+            onadd: (item, list) => {
+                console.log('添加音乐', item.name)
+            },
+            onupdate: item => {
+                console.log('更新音乐', item)
+                database.put(item)
+            },
+            onerror: error => {
+                console.log('音乐列表错误', error)
+            },
+            onload: async item => {
+                console.log('加载音乐', item)
+                return await new Promise((resolve) => {
                     var buffer = new ArrayBuffer(0)
                     var count = 0
                     clientList.setChannel(`music-data-${item.id}`, {
@@ -52,28 +83,15 @@
                                 console.log('音乐数据接收完毕')
                                 item.arrayBuffer = buffer
                                 event.target.close() // 关闭信道
-                            resolve()
+                                resolve(item)
                             }
                         }
                     })
-                // 要求对方从指定信道发送音乐数据
                     clientList.send('base', JSON.stringify({ type: 'get_music_data', id: item.id, channel: `music-data-${item.id}` }))
-                //store.put(item) // 只有在like时才保存到本地
                 })
-        })
-        musicList.on('add', item => {
-            //console.log('添加音乐', item)
-            if (item.arrayBuffer) {
-                store.add(item)
-                // 告知对方音乐列表有更新
-                clientList.send('base', JSON.stringify({ type: 'set_music_list', list: musicList.list.map(({ id, name, size, type }) => ({ id, name, size, type })) }))
             }
         })
 
-        // 初始化客户端列表
-        console.log('初始化客户端列表', 'name:', name)
-        const clientList = new ClientList({ name })
-
         // 缓冲分片发送
         const CHUNK_SIZE = 1024 * 128 // 每个块的大小为128KB
         const THRESHOLD = 1024 * 1024 // 缓冲区的阈值为1MB
@@ -107,10 +125,11 @@
                 if (type === 'set_music_list') {
                     console.log(client.name, '发来音乐列表:', `x${JSON.parse(event.data).list.length}`)
                     // 将音乐列表添加到本地
-                    const ids = musicList.list.map(item => item.id)
+                    list.forEach(item => musicList.add(item))
-                    list.filter(item => !ids.includes(item.id)).forEach(item => {
+                    //const ids = musicList.list.map(item => item.id)
-                        musicList.add(item)
+                    //list.filter(item => !ids.includes(item.id)).forEach(item => {
-                    })
+                    //    musicList.add(item)
+                    //})
                     return
                 }
                 if (type === 'get_music_data') {
@@ -143,9 +162,6 @@
                 console.log('未知类型:', type)
             }
         })
-        // like对方的条目时亮起(双方高亮)(本地缓存)(可由对比缓存实现)
-        // ban对方的条目时灰掉(也禁止对方播放)(并保持ban表)(由插件实现)
-        // 只需要在注册时拉取列表, 播放时才需要拉取音乐数据
 
         // 延迟1500ms
         //await new Promise((resolve) => setTimeout(resolve, 100))
@@ -161,209 +177,6 @@
         }
         document.body.appendChild(nameInput)
     </script>
-
-    <!--script type="module">
-
-        // webRTC 传递音乐(分别传输文件和操作事件能更流畅)
-        const music = async function () {
-            const clients = [] // 客户端列表
-
-            // 对端设备
-            const ul = document.createElement('ul')
-            document.body.appendChild(ul)
-            const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
-            const host = window.location.host
-            const ws = new WebSocket(`${protocol}://${host}/webrtc/music`)
-            const pc = new RTCPeerConnection()
-
-            var audioSource = null
-            // 监听音乐列表播放事件
-            musicList.on('play', async item => {
-                audioSource?.stop() // 先停止可能在播放的音乐
-                console.log('播放音乐', item.arrayBuffer)
-                // 复制一份 item.arrayBuffer
-                const arrayBuffer = item.arrayBuffer.slice(0)
-                // 传输音乐文件向远程端
-                const audioContext = new AudioContext()
-                audioContext.decodeAudioData(arrayBuffer, async audioBuffer => {
-                    // 将音乐流添加到 RTCPeerConnection
-                    const mediaStreamDestination = audioContext.createMediaStreamDestination()
-                    mediaStreamDestination.stream.getAudioTracks().forEach(function (track) {
-                        pc.addTrack(track, mediaStreamDestination.stream)
-                    })
-                    // 播放音乐(远程)
-                    audioSource = audioContext.createBufferSource()
-                    audioSource.buffer = audioBuffer
-                    audioSource.connect(mediaStreamDestination)
-                    audioSource.start()
-                    // 创建SDP offer并将其设置为本地描述, 发送给指定的远程端
-                    const id = clients[0].id
-                    await pc.setLocalDescription(await pc.createOffer())     // 设置本地描述为 offer
-                    ws.send(JSON.stringify({ id, offer: pc.localDescription }))  // 发送给远程终端 offer
-                })
-            })
-            // 监听音乐列表停止事件
-            musicList.on('stop', async () => {
-                audioSource?.stop()
-                audioSource = null
-            })
-            // 监听 ICE 候选事件
-            pc.onicecandidate = event => {
-                if (event.candidate) {
-                    const id = clients[0].id
-                    ws.send(JSON.stringify({ id, candidate: event.candidate }))  // 发送 ICE 候选到远程终端
-                }
-            }
-            // 监听远程流事件
-            pc.ontrack = function (event) {
-                console.log('pc ontrack:', event)
-                const audio = document.createElement('audio')
-                audio.srcObject = event.streams[0]
-                audio.play()
-            }
-            ws.onmessage = async (event) => {
-                const data = JSON.parse(event.data)
-                if (data.type === 'push') {
-                    console.log('收到 type:push 将设备增加', data.id)
-                    clients.push({ id: data.id, channel: data.channel })
-                    const li = document.createElement('li')
-                    li.innerText = `id:${data.id} channel:${data.channel}`
-                    li.id = data.id
-                    li.onclick = async () => {
-                        console.log('点击设备', data.id)
-                        // 清理所有选中状态
-                        clients.forEach(client => {
-                            const li = document.getElementById(client.id)
-                            if (data.id === client.id) {
-                                li.style.backgroundColor = 'red'
-                                console.log('设置选中状态', data.id)
-                                return
-                            }
-                            li.style.backgroundColor = 'transparent'
-                            console.log('清理选中状态', client.id)
-                        })
-                    }
-                    ul.appendChild(li)
-                    return
-                }
-                if (data.type === 'pull') {
-                    console.log('收到 type:pull 将设备删除', data.id)
-                    const index = clients.findIndex(client => client.id === data.id)
-                    if (index !== -1) {
-                        clients.splice(index, 1)
-                        const li = document.getElementById(data.id)
-                        li.remove()
-                    }
-                    return
-                }
-                if (data.type === 'error') {
-                    console.log('收到 type:error 没什么可操作的', data.id)
-                    return
-                }
-                if (data.offer) {
-                    const id = clients[0].id
-                    console.log('收到 offer 并将其设置为远程描述', data.offer)
-                    await pc.setRemoteDescription(new RTCSessionDescription(data.offer)) // 设置远程描述为 offer
-                    await pc.setLocalDescription(await pc.createAnswer())                // 设置本地描述为 answer
-                    ws.send(JSON.stringify({ id, answer: pc.localDescription }))         // 发送给远程终端 answer
-                    return
-                }
-                if (data.answer) {
-                    console.log('收到 answer 并将其设置为远程描述', data.answer)
-                    await pc.setRemoteDescription(new RTCSessionDescription(data.answer))
-                    return
-                }
-                if (data.candidate) {
-                    console.log('收到 candidate 并将其添加到远程端', data.candidate)
-                    await pc.addIceCandidate(new RTCIceCandidate(data.candidate))
-                    return
-                }
-            }
-        }
-        //music()
-    </script-->
-    <!--script type="module">
-        // 创建 RTCPeerConnection
-        const pc = new RTCPeerConnection()
-        // webSocket 连接服务器
-        const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
-        const host = window.location.host
-        const ws = new WebSocket(`${protocol}://${host}/webrtc/default`)
-        ws.onopen = function () {
-            console.log('video ws open')
-        }
-        ws.onmessage = function (event) {
-            const data = JSON.parse(event.data)
-            console.log('ws message:', data)
-            if (data.offer) {
-                console.log('收到 offer 并将其设置为远程描述')
-                pc.setRemoteDescription(new RTCSessionDescription(data.offer))
-                // 创建SDP answer并将其设置为本地描述, 发送给远程端
-                pc.createAnswer().then(function (answer) {
-                    pc.setLocalDescription(answer)
-                    ws.send(JSON.stringify({ answer }))
-                })
-                return
-            }
-            if (data.answer) {
-                console.log('收到 answer 并将其设置为远程描述')
-                pc.setRemoteDescription(new RTCSessionDescription(data.answer))
-                return
-            }
-            if (data.candidate) {
-                console.log('收到 candidate 并将其添加到远程端')
-                pc.addIceCandidate(new RTCIceCandidate(data.candidate))
-            }
-        }
-        ws.onclose = function () {
-            console.log('ws close')
-        }
-
-        setTimeout(() => {
-
-            // 获取本地视频流
-            navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(stream => {
-                // 创建本地视频元素
-                const localVideo = document.createElement('video')
-                localVideo.srcObject = stream
-                localVideo.autoplay = true
-                localVideo.muted = true
-                document.body.appendChild(localVideo)
-
-                // 添加本地视频流到 RTCPeerConnection
-                stream.getTracks().forEach(function (track) {
-                    pc.addTrack(track, stream)
-                })
-
-                // 监听 ICE candidate 事件
-                pc.onicecandidate = function (event) {
-                    if (event.candidate) {
-                        // 发送 ICE candidate 到远程端
-                        ws.send(JSON.stringify({ candidate: event.candidate }))
-                    }
-                }
-
-                // 监听远程视频流事件
-                pc.ontrack = function (event) {
-                    // 创建远程视频元素
-                    var remoteVideo = document.createElement('video')
-                    remoteVideo.srcObject = event.streams[0]
-                    remoteVideo.autoplay = true
-                    document.body.appendChild(remoteVideo)
-                }
-
-                // 创建SDP offer并将其设置为本地描述, 发送给远程端
-                pc.createOffer().then(function (offer) {
-                    pc.setLocalDescription(offer)
-                    ws.send(JSON.stringify({ offer }))
-                })
-
-            }).catch(error => {
-                console.log(error)
-            })
-
-        }, 1000)
-    </script-->
 </body>
 
 </html>

public/music.js

@@ -1,7 +1,8 @@
 import { Button, List, ListItem } from './weigets.js'
 
 export default class MusicList {
-    constructor({ list = [], EventListeners = {} }) {
+    constructor({ list = [], EventListeners = {}, onplay, onstop, onadd, onremove, onlike, onban, onload }) {
+        this.event = { onplay, onstop, onadd, onremove, onlike, onban, onload }
         this.ul = List({})
         this.ul.classList.add('music-list')
         this.EventListeners = EventListeners
@@ -74,7 +75,6 @@ export default class MusicList {
             return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
         }
         this.list.push(item)
-        console.log('添加音乐:', item)
         this.ul.appendChild(ListItem({
             id: item.id,
             classList: item.arrayBuffer ? ['cache'] : [],
@@ -125,55 +125,48 @@ export default class MusicList {
                 })
             ]
         }))
-        // 执行回调函数
+        this.event.onadd(item, this.list)
-        if (this.EventListeners['add']) {
-            this.EventListeners['add'](item)
     }
-    }
+    async remove(item) {
-    remove(item) {
         this.ul.querySelector(`#${item.id}`)?.remove()
         this.stop() // 停止播放
-        // 执行回调函数
+        this.event.onremove(item)
-        if (this.EventListeners['remove']) {
-            this.EventListeners['remove'](item)
-        }
     }
     async load(item) {
-        // 执行回调函数(应当异步)
+        await this.event.onload(item)
-        if (this.EventListeners['load']) {
-            await this.EventListeners['load'](item)
-        }
     }
     async play(item) {
         if (!item.arrayBuffer) {
-            console.log('等待载入缓存:', item)
             await this.load(item)
-            console.log('缓存载入完成:', item)
         }
+        this.playing = item
         this.audio.src = URL.createObjectURL(new Blob([item.arrayBuffer], { type: item.type }))
         this.audio.play()
-        // 执行回调函数
+        this.event.onplay(item)
-        if (this.EventListeners['play']) {
-            this.EventListeners['play'](item)
     }
-    }
+    async stop() {
-    stop() {
         this.audio.pause()
         this.audio.src = ''
-        // 执行回调函数
+        this.event.onstop(this.playing)
-        if (this.EventListeners['stop']) {
-            this.EventListeners['stop']()
     }
-    }
+    async like(item) {
-    like(item) {
         if (!item.arrayBuffer) {
-            console.log('载入缓存:', item)
+            await this.load(item)
-            return
-        } else {
-            console.log('移除缓存:', item)
             return
         }
+        if (item.arrayBuffer) {
+            return
         }
+        // TODO: 添加喜欢和取消喜欢
+        this.event.onlike(item)
+    }
+    async ban(item) {
+        this.event.onban(item)
+    }
+    //like(user_id, item_id) {
+    //    //if (!item.like) item.like = []
+    //    //item.like.push(user_id)
+    //}
     next() { }
     prev() { }
 }