混乱之暂存
This commit is contained in:
parent
da79d6d4d7
commit
24b5ab2fce
|
|
@ -6,6 +6,9 @@ channel channel channel: 细流
|
|||
part-server: 调谐, 从不同服务器请求资源分片
|
||||
webrtc://用户@域名:端口/信道标识/资源ID
|
||||
|
||||
封包格式
|
||||
资源ID 分片信息(位置) 分片数据
|
||||
|
||||
1. 每个节点都公开持有的资源列表, 和连接的节点列表
|
||||
2. 每当资源变动时告知所有连接的节点
|
||||
3. 与节点创建多个RTC时, 不发送多份, 以ID为准, id随机生成给不同机器, 无法通过ID锁定其它机器
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ export default class Entanglement {
|
|||
// 数据被修改时触发
|
||||
set(name, data) {
|
||||
// 递归创建代理对象
|
||||
const createDeepProxy = (obj, path = []) => {
|
||||
const useProxy = (obj, path = []) => {
|
||||
const proxy = new Proxy(obj, {
|
||||
set: (target, key, value) => {
|
||||
if (!Array.isArray(target) || key !== 'length') {
|
||||
|
|
@ -177,12 +177,12 @@ export default class Entanglement {
|
|||
})
|
||||
Object.keys(obj).forEach(key => {
|
||||
if (typeof obj[key] === 'object') {
|
||||
obj[key] = createDeepProxy(obj[key], [...path, key])
|
||||
obj[key] = useProxy(obj[key], [...path, key])
|
||||
}
|
||||
})
|
||||
return proxy
|
||||
}
|
||||
return Reflect.set(this.store, name, createDeepProxy(data))
|
||||
return Reflect.set(this.store, name, useProxy(data))
|
||||
}
|
||||
|
||||
// 读取一个通道
|
||||
|
|
|
|||
138
public/test.html
138
public/test.html
|
|
@ -12,72 +12,82 @@
|
|||
<p>同步</p>
|
||||
</div>
|
||||
<script type="module">
|
||||
import Entanglement from './entanglement.js'
|
||||
const entanglement = new Entanglement({
|
||||
options: {
|
||||
iceServers: [
|
||||
{
|
||||
urls: 'turn:satori.love:3478?transport=udp',
|
||||
username: 'x-username',
|
||||
credential: 'x-password'
|
||||
},
|
||||
{
|
||||
urls: [
|
||||
'stun:stun.1und1.de',
|
||||
'stun:stun.callwithus.com',
|
||||
'stun:stun.ekiga.net',
|
||||
'stun:stun.fwdnet.net',
|
||||
'stun:stun.fwdnet.net:3478',
|
||||
'stun:stun.gmx.net',
|
||||
'stun:stun.iptel.org',
|
||||
'stun:stun.internetcalls.com',
|
||||
'stun:stun.minisipserver.com',
|
||||
'stun:stun.schlund.de',
|
||||
'stun:stun.sipgate.net',
|
||||
'stun:stun.sipgate.net:10000',
|
||||
'stun:stun.softjoys.com',
|
||||
'stun:stun.softjoys.com:3478',
|
||||
'stun:stun.voip.aebc.com',
|
||||
'stun:stun.voipbuster.com',
|
||||
'stun:stun.voipstunt.com',
|
||||
'stun:stun.voxgratia.org',
|
||||
'stun:stun.wirlab.net',
|
||||
'stun:stun.xten.com',
|
||||
'stun:stunserver.org',
|
||||
'stun:stun01.sipphone.com',
|
||||
'stun:stun.zoiper.com'
|
||||
]
|
||||
}
|
||||
],
|
||||
iceCandidatePoolSize: 10, // 限制 ICE 候选者的数量
|
||||
iceTransportPolicy: 'all', // 使用所有可用的候选者
|
||||
bundlePolicy: 'balanced', // 每種類型的內容建立一個單獨的傳輸
|
||||
}, server: {}
|
||||
import { List, ListItem, useProxy } from './weigets.js'
|
||||
//import Entanglement from './entanglement.js'
|
||||
//const entanglement = new Entanglement({
|
||||
// options: {
|
||||
// iceServers: [
|
||||
// {
|
||||
// urls: 'turn:satori.love:3478?transport=udp',
|
||||
// username: 'x-username',
|
||||
// credential: 'x-password'
|
||||
// },
|
||||
// {
|
||||
// urls: [
|
||||
// 'stun:stun.1und1.de',
|
||||
// 'stun:stun.callwithus.com',
|
||||
// 'stun:stun.ekiga.net',
|
||||
// 'stun:stun.fwdnet.net',
|
||||
// 'stun:stun.fwdnet.net:3478',
|
||||
// 'stun:stun.gmx.net',
|
||||
// 'stun:stun.iptel.org',
|
||||
// 'stun:stun.internetcalls.com',
|
||||
// 'stun:stun.minisipserver.com',
|
||||
// 'stun:stun.schlund.de',
|
||||
// 'stun:stun.sipgate.net',
|
||||
// 'stun:stun.sipgate.net:10000',
|
||||
// 'stun:stun.softjoys.com',
|
||||
// 'stun:stun.softjoys.com:3478',
|
||||
// 'stun:stun.voip.aebc.com',
|
||||
// 'stun:stun.voipbuster.com',
|
||||
// 'stun:stun.voipstunt.com',
|
||||
// 'stun:stun.voxgratia.org',
|
||||
// 'stun:stun.wirlab.net',
|
||||
// 'stun:stun.xten.com',
|
||||
// 'stun:stunserver.org',
|
||||
// 'stun:stun01.sipphone.com',
|
||||
// 'stun:stun.zoiper.com'
|
||||
// ]
|
||||
// }
|
||||
// ],
|
||||
// iceCandidatePoolSize: 10, // 限制 ICE 候选者的数量
|
||||
// iceTransportPolicy: 'all', // 使用所有可用的候选者
|
||||
// bundlePolicy: 'balanced', // 每種類型的內容建立一個單獨的傳輸
|
||||
// }, server: {}
|
||||
//})
|
||||
//entanglement.set('json', {
|
||||
// users: { name: 'users', list: [{ name: 'satori' }] },
|
||||
// music: { name: 'music', list: [{ name: 'satori' }] },
|
||||
// image: { name: 'image', list: [{ name: 'satori' }] }
|
||||
//})
|
||||
//await new Promise(resolve => setTimeout(resolve, 3000))
|
||||
const store = useProxy({
|
||||
users: { name: 'users', list: [{ name: 'satori' },{ name: 'sato' }] },
|
||||
music: { name: 'music', list: [{ name: 'satori' },{ name: 'sato' }] },
|
||||
image: { name: 'image', list: [{ name: 'satori' },{ name: 'sato' }] },
|
||||
}, data => {
|
||||
//console.log('触发了:', data.key, data.value)
|
||||
console.log('当前数据:', store)
|
||||
})
|
||||
entanglement.set('json', {
|
||||
users: { name: 'users', list: [{ name: 'satori' }] },
|
||||
music: { name: 'music', list: [{ name: 'satori' }] },
|
||||
image: { name: 'image', list: [{ name: 'satori' }] }
|
||||
})
|
||||
const store = entanglement.get('json', event => {
|
||||
console.log(event)
|
||||
// 根据事件传递的路径, 更新对应的组件
|
||||
// 如何绑定多个组件而尽量降低代码量?
|
||||
// 传递变化
|
||||
})
|
||||
await new Promise(resolve => setTimeout(resolve, 3000))
|
||||
store.users.name = 'koishi'
|
||||
|
||||
const element = document.createElement('ul')
|
||||
element.innerHTML = store.users.list.map(user => `<li>${user.name}</li>`).join('')
|
||||
element.onclick = () => {
|
||||
//console.log('当前数据:', JSON.stringify(store))
|
||||
delete store.users.list[1]
|
||||
//console.log('当前数据:', JSON.stringify(store))
|
||||
store.users.list.push({ name: 'koishi' })
|
||||
// 在数据从其他位置被删除时也能删除这里的元素
|
||||
}
|
||||
document.body.appendChild(element)
|
||||
|
||||
// 主动查询获取数据, 然后将数据变化通过推送事件获取
|
||||
// 以事件绑定模式获取数据, 为元素绑定数据变化事件, 使数据变化时自动更新元素
|
||||
//store.users.list.push({ name: 'koishi' })
|
||||
//store.users.list.push({ name: 'koishi' })
|
||||
//console.log('当前数据:', JSON.stringify(store))
|
||||
//document.body.appendChild(List({
|
||||
// children: store.users.list.map(user => ListItem({ textContent: user.name })),
|
||||
// onclick: () => {
|
||||
// if (event.target.tagName === 'LI') {
|
||||
// console.log('点击了:', event.target.textContent)
|
||||
// }
|
||||
// //store.users.name = 'koishi'
|
||||
// store.users.list.push({ name: 'koishi' })
|
||||
// //store.users.list.pop()
|
||||
// // 在数据从其他位置被删除时也能删除这里的元素
|
||||
// }
|
||||
//}))
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -97,18 +97,65 @@ export function Dialog(options) {
|
|||
}
|
||||
|
||||
// 深度代理, 用于监听数据的变化
|
||||
export function useProxy(obj, callback) {
|
||||
return new Proxy(obj, {
|
||||
get(target, key) {
|
||||
if (typeof target[key] === 'object' && target[key] !== null) {
|
||||
return useProxy(target[key], callback)
|
||||
export function useProxy(data, callback, path = []) {
|
||||
if (Array.isArray(data)) {
|
||||
const array = class extends Array {
|
||||
constructor(args) {
|
||||
super(args)
|
||||
}
|
||||
return target[key]
|
||||
},
|
||||
set(target, key, value) {
|
||||
target[key] = value
|
||||
callback(target, key, value)
|
||||
return true
|
||||
push(args) {
|
||||
super.push(args)
|
||||
console.log('push', args)
|
||||
this.__notify()
|
||||
}
|
||||
pop(...args) {
|
||||
const result = super.pop(...args)
|
||||
console.log('pop')
|
||||
this.__notify()
|
||||
return result
|
||||
}
|
||||
shift(...args) {
|
||||
const result = super.shift(...args)
|
||||
this.__notify()
|
||||
return result
|
||||
}
|
||||
unshift(...args) {
|
||||
super.unshift(...args)
|
||||
this.__notify()
|
||||
}
|
||||
splice(...args) {
|
||||
super.splice(...args)
|
||||
this.__notify()
|
||||
}
|
||||
deleteProperty(...args) {
|
||||
console.log('deleteProperty', ...args)
|
||||
super.deleteProperty(...args)
|
||||
this.__notify()
|
||||
}
|
||||
__notify() {
|
||||
if (callback) callback()
|
||||
}
|
||||
}
|
||||
//console.log('为数组每项递归创建代理')
|
||||
data.forEach((item, index) => {
|
||||
data[index] = useProxy(item, callback, [...path, index])
|
||||
})
|
||||
return new array(...data)
|
||||
}
|
||||
if (typeof data === 'object' && data !== null) {
|
||||
//console.log('为对象属性递归创建代理')
|
||||
Object.keys(data).forEach(key => {
|
||||
if (typeof data[key] === 'object' && data[key] !== null) {
|
||||
data[key] = useProxy(data[key], callback, [...path, key])
|
||||
}
|
||||
})
|
||||
return new Proxy(data, {
|
||||
deleteProperty(target, key) {
|
||||
console.log('deleteProperty', key)
|
||||
return delete target[key]
|
||||
}
|
||||
})
|
||||
}
|
||||
console.log('为其它类型直接返回')
|
||||
return data
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue