展示设备列表

README.md

@@ -1,6 +1,12 @@
 # webRTC
 webrtc 实现的 p2p 信道
 
+- [ ] P2P通信
+- [ ] 集群分发
+- [ ] 下载加速
+- [ ] 音乐播放
+- [ ] 即时通讯
+
 - 能获取所有在线设备列表
 - 随机连接至四个设备, 且按效率扩展收缩
 - 将数据拆解同时向多台设备分发, 对端接收后再次分发
@@ -8,6 +14,8 @@ webrtc 实现的 p2p 信道
 - 五色
 - 单向链
 - 固定填位(矩阵)
-- [a1, b1, c1, d1, e1]
+```txt
--         [a2, b2, c2, d2, e2]
+[a1, b1, c1, d1, e1]
--                 [a3, b3, c3, d3, e3]
+        [a2, b2, c2, d2, e2]
+                [a3, b3, c3, d3, e3]
+```

public/index.html

@@ -14,12 +14,13 @@
     <script type="module">
         // webRTC 传递音乐(分别传输文件和操作事件能更流畅)
         const music = async function () {
+            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()
             const clients = []
-
             // 监听 ICE 候选事件
             pc.onicecandidate = event => {
                 if (event.candidate) {
@@ -39,6 +40,10 @@
                 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
+                    ul.appendChild(li)
                     return
                 }
                 if (data.type === 'pull') {
@@ -46,6 +51,8 @@
                     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
                 }