支持自定义名字

index.js

@@ -10,6 +10,7 @@ app.use(express.static('public'))
 app.ws('/webrtc/:channel', (ws, req) => {
     ws.id = req.headers['sec-websocket-key']
     ws.channel = req.params.channel
+    ws.name = req.query.name
     // 设备离开频道时广播给所有在线设备
     ws.on('close', () => {
         console.log(ws.id, '设备离开频道:', ws.channel, wsInstance.getWss().clients.size)
@@ -42,8 +43,8 @@ app.ws('/webrtc/:channel', (ws, req) => {
     console.log(ws.id, '设备加入频道:', ws.channel, wsInstance.getWss().clients.size)
     wsInstance.getWss().clients.forEach(client => {
         if (client !== ws && client.readyState === 1 && client.channel === ws.channel) {
-            client.send(JSON.stringify({ type: 'push', id: ws.id, channel: ws.channel }))
+            client.send(JSON.stringify({ type: 'push', id: ws.id, name: ws.name, channel: ws.channel }))
-            ws.send(JSON.stringify({ type: 'list', id: client.id, channel: client.channel }))
+            ws.send(JSON.stringify({ type: 'list', id: client.id, name: client.name, channel: client.channel }))
         }
     })
 })

public/client.js

@@ -1,15 +1,16 @@
 import { List, ListItem } from './weigets.js'
 
 export default class ClientList {
-    constructor({ channels = {}, EventListeners = {} }) {
+    constructor({ channels = {}, EventListeners = {}, name }) {
         this.channels = channels
         this.EventListeners = EventListeners
         const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
         const host = window.location.host
-        this.websocket = new WebSocket(`${protocol}://${host}/webrtc/music`)
+        this.websocket = new WebSocket(`${protocol}://${host}/webrtc/music?name=${name}`)
         this.clientlist = []
         this.ul = List({})
         document.body.appendChild(this.ul)
+
         this.websocket.onmessage = async event => {
             const data = JSON.parse(event.data)
             const channels_init = (webrtc) => {

public/index.html

@@ -22,6 +22,21 @@
         const list = await store.getAll()
         console.log('本地音乐列表:', list)
 
+        // 读取本地用户名(本地缓存)
+        const name = localStorage.getItem('username')
+        if (!name) {
+            localStorage.setItem('username', `user-${Math.random().toString(36).substr(2)}`)
+        }
+        // 设置自己的主机名
+        const nameInput = document.createElement('input')
+        nameInput.type = 'text'
+        nameInput.placeholder = '请设置你的名字'
+        nameInput.onchange = event => {
+            localStorage.setItem('username', event.target.value)
+            window.location.reload() // 简单刷新页面
+        }
+        document.body.appendChild(nameInput)
+
         // 初始化音乐列表(加入本地缓存)
         const musicList = new MusicList({ list })
         musicList.on('remove', item => {
@@ -64,7 +79,7 @@
         })
 
         // 初始化客户端列表
-        const clientList = new ClientList({})
+        const clientList = new ClientList({ name })
 
         // 缓冲分片发送
         const CHUNK_SIZE = 1024 * 128 // 每个块的大小为128KB