LaniakeaSupercluster/webrtc
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

控制台整理, 修正用户名

Browse Source
This commit is contained in:
觉
2023-10-01 01:22:39 +08:00
parent 41955f9cfb
commit 30f38e4f3a
3 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.js
View File

@@ -11,6 +11,7 @@ app.ws('/webrtc/:channel', (ws, req) => {
ws.id = req.headers['sec-websocket-key'] ws.id = req.headers['sec-websocket-key']
ws.channel = req.params.channel ws.channel = req.params.channel
ws.name = req.query.name ws.name = req.query.name
console.log('ws.name:', ws.name)
// 设备离开频道时广播给所有在线设备 // 设备离开频道时广播给所有在线设备
ws.on('close', () => { ws.on('close', () => {
console.log(ws.id, '设备离开频道:', ws.channel, wsInstance.getWss().clients.size) 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) const data = JSON.parse(message)
wsInstance.getWss().clients.forEach(client => { wsInstance.getWss().clients.forEach(client => {
if (client !== ws && client.readyState === 1 && client.channel === ws.channel && client.id === data.id) { 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) console.log(ws.id, '设备加入频道:', ws.channel, wsInstance.getWss().clients.size)
wsInstance.getWss().clients.forEach(client => { wsInstance.getWss().clients.forEach(client => {
if (client !== ws && client.readyState === 1 && client.channel === ws.channel) { 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 })) 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 })) ws.send(JSON.stringify({ type: 'list', id: client.id, name: client.name, channel: client.channel }))
} }

12
public/client.js
View File

@@ -1,7 +1,7 @@
import { List, ListItem } from './weigets.js' import { List, ListItem } from './weigets.js'
export default class ClientList { export default class ClientList {
constructor({ channels = {}, EventListeners = {}, name }) { constructor({ channels = {}, EventListeners = {}, name: username }) {
this.channels = channels this.channels = channels
this.EventListeners = EventListeners this.EventListeners = EventListeners
const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws' const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
@@ -12,7 +12,7 @@ export default class ClientList {
// 连接 WebSocket // 连接 WebSocket
const linkStart = () => { 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 => { websocket.onmessage = async event => {
const data = JSON.parse(event.data) const data = JSON.parse(event.data)
const channels_init = (webrtc) => { const channels_init = (webrtc) => {
@@ -37,15 +37,15 @@ export default class ClientList {
} }
} }
webrtc.ondatachannel = ({ channel }) => { webrtc.ondatachannel = ({ channel }) => {
console.log('收到对方 datachannel', channel) console.log('对方建立数据通道', channel.label)
channel.onopen = event => { channel.onopen = event => {
console.log('收到对方 datachannel open', event) console.log('对方打开数据通道', channel.label)
if (this.channels[event.target.label] && this.channels[event.target.label].onopen) { 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)) this.channels[event.target.label].onopen(event, this.clientlist.find(x => x.id === data.id))
} }
} }
channel.onmessage = event => { 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) { 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)) 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) { send(name, data) {
//console.log('广播数据:', data, '到通道:', name, '到所有客户端') //console.log('广播数据:', data, '到通道:', name, '到所有客户端')
this.clientlist.forEach(client => { 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 => { client.channels.filter(ch => ch.label === name).forEach(async ch => {
// 等待 datachannel 打开(临时解决方案) // 等待 datachannel 打开(临时解决方案)
while (ch.readyState !== 'open') { while (ch.readyState !== 'open') {

16
public/index.html
View File

@@ -20,7 +20,7 @@
const store = new IndexedDB('musicDatabase', 1, 'musicObjectStore') const store = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
await store.open() await store.open()
const list = await store.getAll() const list = await store.getAll()
console.log('本地音乐列表:', list) //console.log('本地音乐列表:', list)
// 读取本地用户名(本地缓存) // 读取本地用户名(本地缓存)
const name = localStorage.getItem('username') const name = localStorage.getItem('username')
@@ -31,15 +31,15 @@
// 初始化音乐列表(加入本地缓存) // 初始化音乐列表(加入本地缓存)
const musicList = new MusicList({ list }) const musicList = new MusicList({ list })
musicList.on('remove', item => { musicList.on('remove', item => {
console.log('移除音乐', item) //console.log('移除音乐', item)
store.delete(item.id) store.delete(item.id)
}) })
musicList.on('play', item => { musicList.on('play', item => {
console.log('播放音乐', item) //console.log('播放音乐', item)
}) })
musicList.on('load', async item => { musicList.on('load', async item => {
await new Promise((resolve) => { await new Promise((resolve) => {
console.log('加载音乐', item) //console.log('加载音乐', item)
// 建立一个专用信道, 用于接收音乐数据(接收方已经准备好摘要信息) // 建立一个专用信道, 用于接收音乐数据(接收方已经准备好摘要信息)
var buffer = new ArrayBuffer(0) var buffer = new ArrayBuffer(0)
var count = 0 var count = 0
@@ -62,7 +62,7 @@
}) })
}) })
musicList.on('add', item => { musicList.on('add', item => {
console.log('添加音乐', item) //console.log('添加音乐', item)
if (item.arrayBuffer) { if (item.arrayBuffer) {
store.add(item) store.add(item)
// 告知对方音乐列表有更新 // 告知对方音乐列表有更新
@@ -71,6 +71,7 @@
}) })
// 初始化客户端列表 // 初始化客户端列表
console.log('初始化客户端列表', 'name:', name)
const clientList = new ClientList({ name }) const clientList = new ClientList({ name })
// 缓冲分片发送 // 缓冲分片发送
@@ -93,9 +94,7 @@
}, },
onmessage: async (event, client) => { onmessage: async (event, client) => {
const { type, id, channel, list } = JSON.parse(event.data) const { type, id, channel, list } = JSON.parse(event.data)
console.log('收到 base 基本信道数据:', type, id, channel)
if (type === 'get_music_list') { if (type === 'get_music_list') {
console.log(client, '请求音乐列表x')
console.log(client.name, '请求音乐列表:', musicList.list) console.log(client.name, '请求音乐列表:', musicList.list)
clientList.send('base', JSON.stringify({ clientList.send('base', JSON.stringify({
type: 'set_music_list', type: 'set_music_list',
@@ -104,8 +103,7 @@
return return
} }
if (type === 'set_music_list') { if (type === 'set_music_list') {
console.log(client, '发来音乐列表x') console.log(client.name, '发来音乐列表:', `x${JSON.parse(event.data).list.length}`)
console.log(client.name, '发来音乐列表:', event)
// 将音乐列表添加到本地 // 将音乐列表添加到本地
const ids = musicList.list.map(item => item.id) const ids = musicList.list.map(item => item.id)
list.filter(item => !ids.includes(item.id)).forEach(item => { list.filter(item => !ids.includes(item.id)).forEach(item => {