From b671c459d41a711c65be487b91ca6778bade6d1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Sat, 30 Sep 2023 22:45:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E5=90=8D=E5=AD=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.js          |  5 +++--
 public/client.js  |  5 +++--
 public/index.html | 17 ++++++++++++++++-
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/index.js b/index.js
index 4bc4ab3..4c07dcb 100644
--- a/index.js
+++ b/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 }))
-            ws.send(JSON.stringify({ type: 'list', id: client.id, channel: client.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, name: client.name, channel: client.channel }))
         }
     })
 })
diff --git a/public/client.js b/public/client.js
index 4a59b80..d62c5a0 100644
--- a/public/client.js
+++ b/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) => {
diff --git a/public/index.html b/public/index.html
index 72b5535..979bf2f 100644
--- a/public/index.html
+++ b/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