From 30f38e4f3a8e9ed3c3c4208f6310d5f59c2b3806 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A7=89?= Date: Sun, 1 Oct 2023 01:22:39 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8E=A7=E5=88=B6=E5=8F=B0=E6=95=B4=E7=90=86,?= =?UTF-8?q?=20=E4=BF=AE=E6=AD=A3=E7=94=A8=E6=88=B7=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.js | 4 +++- public/client.js | 12 ++++++------ public/index.html | 16 +++++++--------- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/index.js b/index.js index 4c07dcb..fb2429b 100644 --- a/index.js +++ b/index.js @@ -11,6 +11,7 @@ app.ws('/webrtc/:channel', (ws, req) => { ws.id = req.headers['sec-websocket-key'] ws.channel = req.params.channel ws.name = req.query.name + console.log('ws.name:', ws.name) // 设备离开频道时广播给所有在线设备 ws.on('close', () => { console.log(ws.id, '设备离开频道:', ws.channel, wsInstance.getWss().clients.size) @@ -35,7 +36,7 @@ app.ws('/webrtc/:channel', (ws, req) => { const data = JSON.parse(message) wsInstance.getWss().clients.forEach(client => { if (client !== ws && client.readyState === 1 && client.channel === ws.channel && client.id === data.id) { - client.send(JSON.stringify({ ...data, id: ws.id })) + client.send(JSON.stringify({ ...data, id: ws.id, name: ws.name })) } }) }) @@ -43,6 +44,7 @@ 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) { + console.log(ws.name, '广播给在线设备:', client.name) 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 26b6ca7..5fe8952 100644 --- a/public/client.js +++ b/public/client.js @@ -1,7 +1,7 @@ import { List, ListItem } from './weigets.js' export default class ClientList { - constructor({ channels = {}, EventListeners = {}, name }) { + constructor({ channels = {}, EventListeners = {}, name: username }) { this.channels = channels this.EventListeners = EventListeners const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws' @@ -12,7 +12,7 @@ export default class ClientList { // 连接 WebSocket const linkStart = () => { - const websocket = new WebSocket(`${protocol}://${host}/webrtc/music?name=${name}`) + const websocket = new WebSocket(`${protocol}://${host}/webrtc/music?name=${username}`) websocket.onmessage = async event => { const data = JSON.parse(event.data) const channels_init = (webrtc) => { @@ -37,15 +37,15 @@ export default class ClientList { } } webrtc.ondatachannel = ({ channel }) => { - console.log('收到对方 datachannel', channel) + console.log('对方建立数据通道', channel.label) channel.onopen = event => { - console.log('收到对方 datachannel open', event) + console.log('对方打开数据通道', channel.label) if (this.channels[event.target.label] && this.channels[event.target.label].onopen) { this.channels[event.target.label].onopen(event, this.clientlist.find(x => x.id === data.id)) } } channel.onmessage = event => { - console.log('收到对方 datachannel message', event) + //console.log('对方发送数据消息', JSON.parse(event.data).type) if (this.channels[event.target.label] && this.channels[event.target.label].onmessage) { this.channels[event.target.label].onmessage(event, this.clientlist.find(x => x.id === data.id)) } @@ -144,7 +144,7 @@ export default class ClientList { send(name, data) { //console.log('广播数据:', data, '到通道:', name, '到所有客户端') this.clientlist.forEach(client => { - console.log('发送数据到客户端:', client.id, client.name, '通道:', name, '数据:', data) + //console.log('发送数据到客户端:', client.id, client.name, '通道:', name, '数据:', data) client.channels.filter(ch => ch.label === name).forEach(async ch => { // 等待 datachannel 打开(临时解决方案) while (ch.readyState !== 'open') { diff --git a/public/index.html b/public/index.html index 17de3c9..3a775fb 100644 --- a/public/index.html +++ b/public/index.html @@ -20,7 +20,7 @@ const store = new IndexedDB('musicDatabase', 1, 'musicObjectStore') await store.open() const list = await store.getAll() - console.log('本地音乐列表:', list) + //console.log('本地音乐列表:', list) // 读取本地用户名(本地缓存) const name = localStorage.getItem('username') @@ -31,15 +31,15 @@ // 初始化音乐列表(加入本地缓存) const musicList = new MusicList({ list }) musicList.on('remove', item => { - console.log('移除音乐', item) + //console.log('移除音乐', item) store.delete(item.id) }) musicList.on('play', item => { - console.log('播放音乐', item) + //console.log('播放音乐', item) }) musicList.on('load', async item => { await new Promise((resolve) => { - console.log('加载音乐', item) + //console.log('加载音乐', item) // 建立一个专用信道, 用于接收音乐数据(接收方已经准备好摘要信息) var buffer = new ArrayBuffer(0) var count = 0 @@ -62,7 +62,7 @@ }) }) musicList.on('add', item => { - console.log('添加音乐', item) + //console.log('添加音乐', item) if (item.arrayBuffer) { store.add(item) // 告知对方音乐列表有更新 @@ -71,6 +71,7 @@ }) // 初始化客户端列表 + console.log('初始化客户端列表', 'name:', name) const clientList = new ClientList({ name }) // 缓冲分片发送 @@ -93,9 +94,7 @@ }, onmessage: async (event, client) => { const { type, id, channel, list } = JSON.parse(event.data) - console.log('收到 base 基本信道数据:', type, id, channel) if (type === 'get_music_list') { - console.log(client, '请求音乐列表x') console.log(client.name, '请求音乐列表:', musicList.list) clientList.send('base', JSON.stringify({ type: 'set_music_list', @@ -104,8 +103,7 @@ return } if (type === 'set_music_list') { - console.log(client, '发来音乐列表x') - console.log(client.name, '发来音乐列表:', event) + console.log(client.name, '发来音乐列表:', `x${JSON.parse(event.data).list.length}`) // 将音乐列表添加到本地 const ids = musicList.list.map(item => item.id) list.filter(item => !ids.includes(item.id)).forEach(item => {