支持自定义名字

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