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

存储分离

Browse Source
This commit is contained in:
觉
2023-09-29 20:20:00 +08:00
parent 90377a0334
commit 549c5d0ec4
3 changed files with 62 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
public/client.js
View File

@@ -2,6 +2,7 @@ import { List, ListItem } from './weigets.js'
export default class ClientList { export default class ClientList {
constructor({ channels = {}, EventListeners = {} }) { constructor({ channels = {}, EventListeners = {} }) {
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'
const host = window.location.host const host = window.location.host
@@ -16,19 +17,19 @@ export default class ClientList {
Object.entries(channels).forEach(([name, callback]) => { Object.entries(channels).forEach(([name, callback]) => {
const channel = webrtc.createDataChannel(name) const channel = webrtc.createDataChannel(name)
channel.onopen = event => { channel.onopen = event => {
console.log('datachannel 已打开', event) //console.log('datachannel 已打开', event)
if (callback.onopen) callback.onopen(event, channel) if (callback.onopen) callback.onopen(event, channel)
} }
channel.onclose = event => { channel.onclose = event => {
console.log('datachannel 已关闭', event) //console.log('datachannel 已关闭', event)
if (callback.onclose) callback.onclose(event, channel) if (callback.onclose) callback.onclose(event, channel)
} }
channel.onerror = event => { channel.onerror = event => {
console.log('datachannel 发生错误', event) //console.log('datachannel 发生错误', event)
if (callback.onerror) callback.onerror(event, channel) if (callback.onerror) callback.onerror(event, channel)
} }
channel.onmessage = event => { channel.onmessage = event => {
console.log('datachannel 收到数据', event) //console.log('datachannel 收到数据', event)
if (callback.onmessage) callback.onmessage(event, channel) if (callback.onmessage) callback.onmessage(event, channel)
} }
}) })
@@ -51,14 +52,14 @@ export default class ClientList {
} }
} }
webrtc.oniceconnectionstatechange = event => { webrtc.oniceconnectionstatechange = event => {
console.log('WebRTC ICE 连接状态更改:', webrtc.iceConnectionState) //console.log('WebRTC ICE 连接状态更改:', webrtc.iceConnectionState)
} }
return webrtc return webrtc
} }
if (data.type === 'list') { if (data.type === 'list') {
console.log('取得在线对端列表:', data) //console.log('取得在线对端列表:', data)
const webrtc = webrtc_init() const webrtc = webrtc_init()
console.log('发送给对方 offer') //console.log('发送给对方 offer')
const offer = await webrtc.createOffer() const offer = await webrtc.createOffer()
await webrtc.setLocalDescription(offer) await webrtc.setLocalDescription(offer)
this.clientlist.push({ id: data.id, name: data.name, webrtc }) this.clientlist.push({ id: data.id, name: data.name, webrtc })
@@ -75,10 +76,10 @@ export default class ClientList {
return this.remove(data) return this.remove(data)
} }
if (data.type === 'offer') { if (data.type === 'offer') {
console.log('收到对方 offer', data) //console.log('收到对方 offer', data)
const webrtc = webrtc_init() const webrtc = webrtc_init()
this.clientlist.push({ id: data.id, name: data.name, webrtc }) this.clientlist.push({ id: data.id, name: data.name, webrtc })
console.log('发送给对方 answer') //console.log('发送给对方 answer')
await webrtc.setRemoteDescription(data.offer) await webrtc.setRemoteDescription(data.offer)
const answer = await webrtc.createAnswer() const answer = await webrtc.createAnswer()
await webrtc.setLocalDescription(answer) await webrtc.setLocalDescription(answer)
@@ -86,15 +87,16 @@ export default class ClientList {
return return
} }
if (data.type === 'answer') { if (data.type === 'answer') {
console.log('收到对方 answer', data) //console.log('收到对方 answer', data)
const pc = this.clientlist.find(client => client.id === data.id).webrtc const pc = this.clientlist.find(client => client.id === data.id).webrtc
await pc.setRemoteDescription(data.answer) await pc.setRemoteDescription(data.answer)
return return
} }
if (data.type === 'candidate') { if (data.type === 'candidate') {
// console.log('收到 candidate 并将其添加到远程端', data.candidate)
const pc = this.clientlist.find(client => client.id === data.id).webrtc const pc = this.clientlist.find(client => client.id === data.id).webrtc
await pc.addIceCandidate(data.candidate) await pc.addIceCandidate(data.candidate)
return console.log('收到 candidate 并将其添加到远程端', data.candidate) return
} }
console.log('收到未知数据:', data) console.log('收到未知数据:', data)
} }

38
public/index.html
View File

@@ -16,8 +16,13 @@
import MusicList from './music.js' import MusicList from './music.js'
import ClientList from './client.js' import ClientList from './client.js'
// 打开数据库
const store = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
await store.open()
const list = await store.getAll()
// 初始化音乐列表 // 初始化音乐列表
const musicList = new MusicList() const musicList = new MusicList({ list })
musicList.on('play', item => { musicList.on('play', item => {
console.log('播放音乐', item) console.log('播放音乐', item)
}) })
@@ -28,19 +33,46 @@
'musicList': { 'musicList': {
onopen: async (event, channel) => { onopen: async (event, channel) => {
const list = await musicList.list const list = await musicList.list
console.log('musicList:', list) console.log('发送 musicList:', list)
channel.send(JSON.stringify(list)) channel.send(JSON.stringify(list.map(({ arrayBuffer, ...data }) => data)))
}, },
onmessage: async (event, channel) => { onmessage: async (event, channel) => {
console.log('收到 musicList:', event) console.log('收到 musicList:', event)
JSON.parse(event.data).forEach(item => { JSON.parse(event.data).forEach(item => {
musicList.push(item) musicList.push(item)
}) })
}
}, },
'musicload': {
onopen: async (event, channel) => {
console.log('发送 musicload:', event)
}, },
onmessage: async (event, channel) => {
console.log('收到 musicload:', event)
}
}
} }
}) })
// 延迟2秒执行
await new Promise(resolve => setTimeout(resolve, 2000))
// 设定被动传输
clientList.clientlist.forEach(client => {
console.log('client:', client)
client.webrtc.addEventListener('datachannel', event => {
console.log('收到 datachannel:', event)
event.channel.addEventListener('message', event => {
console.log('收到消息:', event)
})
})
})
//musicList.on('load', item => {
// console.log('从来源加载音乐', item)
// clientList.send('musicList', JSON.stringify([item]))
//})
// 在什么时机发送musicList? // 在什么时机发送musicList?
// 通道准备好时即可发送 // 通道准备好时即可发送

25
public/music.js
View File

@@ -2,16 +2,15 @@ import IndexedDB from './database.js'
import { Button, List, ListItem } from './weigets.js' import { Button, List, ListItem } from './weigets.js'
export default class MusicList { export default class MusicList {
constructor() { constructor(EventListeners = {}) {
this.EventListeners = {} this.EventListeners = EventListeners
this.ul = List({}) this.ul = List({})
this.list = [] this.list = []
this.store = new IndexedDB('musicDatabase', 1, 'musicObjectStore') this.store = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
this.store.open().then(() => { this.store.open().then(async () => {
this.store.getAll().then((data) => { this.list = await this.store.getAll()
this.list = data this.list.forEach(item => this.__add(item))
data.forEach(item => this.__add(item)) this.EventListeners['ready'](this.list)
})
}) })
document.body.appendChild(this.ul) document.body.appendChild(this.ul)
@@ -48,10 +47,6 @@ export default class MusicList {
const li = ListItem({ const li = ListItem({
id: item.id, id: item.id,
innerText: `${item.name} - ${item.size} - ${item.type} - ${item.id}`, innerText: `${item.name} - ${item.size} - ${item.type} - ${item.id}`,
onclick: event => {
event.stopPropagation()
this.play(item)
},
children: [ children: [
Button({ Button({
innerText: '播放', innerText: '播放',
@@ -113,7 +108,13 @@ export default class MusicList {
this.ul.removeChild(this.ul.querySelector(`#${item.id}`)) this.ul.removeChild(this.ul.querySelector(`#${item.id}`))
this.stop() // 停止播放 this.stop() // 停止播放
} }
play(item) { async play(item) {
// 如果没有arrayBuffer则从对方获取
console.log('play:', item)
if (!item.arrayBuffer) {
console.log('从对方获取:', item)
return
}
this.audio.src = URL.createObjectURL(new Blob([item.arrayBuffer], { type: item.type })) this.audio.src = URL.createObjectURL(new Blob([item.arrayBuffer], { type: item.type }))
this.audio.play() this.audio.play()
this._on('play', item) this._on('play', item)