混乱之暂存
This commit is contained in:
parent
da79d6d4d7
commit
24b5ab2fce
@ -6,6 +6,9 @@ channel channel channel: 细流
|
|||||||
part-server: 调谐, 从不同服务器请求资源分片
|
part-server: 调谐, 从不同服务器请求资源分片
|
||||||
webrtc://用户@域名:端口/信道标识/资源ID
|
webrtc://用户@域名:端口/信道标识/资源ID
|
||||||
|
|
||||||
|
封包格式
|
||||||
|
资源ID 分片信息(位置) 分片数据
|
||||||
|
|
||||||
1. 每个节点都公开持有的资源列表, 和连接的节点列表
|
1. 每个节点都公开持有的资源列表, 和连接的节点列表
|
||||||
2. 每当资源变动时告知所有连接的节点
|
2. 每当资源变动时告知所有连接的节点
|
||||||
3. 与节点创建多个RTC时, 不发送多份, 以ID为准, id随机生成给不同机器, 无法通过ID锁定其它机器
|
3. 与节点创建多个RTC时, 不发送多份, 以ID为准, id随机生成给不同机器, 无法通过ID锁定其它机器
|
||||||
|
|||||||
@ -162,7 +162,7 @@ export default class Entanglement {
|
|||||||
// 数据被修改时触发
|
// 数据被修改时触发
|
||||||
set(name, data) {
|
set(name, data) {
|
||||||
// 递归创建代理对象
|
// 递归创建代理对象
|
||||||
const createDeepProxy = (obj, path = []) => {
|
const useProxy = (obj, path = []) => {
|
||||||
const proxy = new Proxy(obj, {
|
const proxy = new Proxy(obj, {
|
||||||
set: (target, key, value) => {
|
set: (target, key, value) => {
|
||||||
if (!Array.isArray(target) || key !== 'length') {
|
if (!Array.isArray(target) || key !== 'length') {
|
||||||
@ -177,12 +177,12 @@ export default class Entanglement {
|
|||||||
})
|
})
|
||||||
Object.keys(obj).forEach(key => {
|
Object.keys(obj).forEach(key => {
|
||||||
if (typeof obj[key] === 'object') {
|
if (typeof obj[key] === 'object') {
|
||||||
obj[key] = createDeepProxy(obj[key], [...path, key])
|
obj[key] = useProxy(obj[key], [...path, key])
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return proxy
|
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>
|
<p>同步</p>
|
||||||
</div>
|
</div>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import Entanglement from './entanglement.js'
|
import { List, ListItem, useProxy } from './weigets.js'
|
||||||
const entanglement = new Entanglement({
|
//import Entanglement from './entanglement.js'
|
||||||
options: {
|
//const entanglement = new Entanglement({
|
||||||
iceServers: [
|
// options: {
|
||||||
{
|
// iceServers: [
|
||||||
urls: 'turn:satori.love:3478?transport=udp',
|
// {
|
||||||
username: 'x-username',
|
// urls: 'turn:satori.love:3478?transport=udp',
|
||||||
credential: 'x-password'
|
// username: 'x-username',
|
||||||
},
|
// credential: 'x-password'
|
||||||
{
|
// },
|
||||||
urls: [
|
// {
|
||||||
'stun:stun.1und1.de',
|
// urls: [
|
||||||
'stun:stun.callwithus.com',
|
// 'stun:stun.1und1.de',
|
||||||
'stun:stun.ekiga.net',
|
// 'stun:stun.callwithus.com',
|
||||||
'stun:stun.fwdnet.net',
|
// 'stun:stun.ekiga.net',
|
||||||
'stun:stun.fwdnet.net:3478',
|
// 'stun:stun.fwdnet.net',
|
||||||
'stun:stun.gmx.net',
|
// 'stun:stun.fwdnet.net:3478',
|
||||||
'stun:stun.iptel.org',
|
// 'stun:stun.gmx.net',
|
||||||
'stun:stun.internetcalls.com',
|
// 'stun:stun.iptel.org',
|
||||||
'stun:stun.minisipserver.com',
|
// 'stun:stun.internetcalls.com',
|
||||||
'stun:stun.schlund.de',
|
// 'stun:stun.minisipserver.com',
|
||||||
'stun:stun.sipgate.net',
|
// 'stun:stun.schlund.de',
|
||||||
'stun:stun.sipgate.net:10000',
|
// 'stun:stun.sipgate.net',
|
||||||
'stun:stun.softjoys.com',
|
// 'stun:stun.sipgate.net:10000',
|
||||||
'stun:stun.softjoys.com:3478',
|
// 'stun:stun.softjoys.com',
|
||||||
'stun:stun.voip.aebc.com',
|
// 'stun:stun.softjoys.com:3478',
|
||||||
'stun:stun.voipbuster.com',
|
// 'stun:stun.voip.aebc.com',
|
||||||
'stun:stun.voipstunt.com',
|
// 'stun:stun.voipbuster.com',
|
||||||
'stun:stun.voxgratia.org',
|
// 'stun:stun.voipstunt.com',
|
||||||
'stun:stun.wirlab.net',
|
// 'stun:stun.voxgratia.org',
|
||||||
'stun:stun.xten.com',
|
// 'stun:stun.wirlab.net',
|
||||||
'stun:stunserver.org',
|
// 'stun:stun.xten.com',
|
||||||
'stun:stun01.sipphone.com',
|
// 'stun:stunserver.org',
|
||||||
'stun:stun.zoiper.com'
|
// 'stun:stun01.sipphone.com',
|
||||||
]
|
// 'stun:stun.zoiper.com'
|
||||||
}
|
// ]
|
||||||
],
|
// }
|
||||||
iceCandidatePoolSize: 10, // 限制 ICE 候选者的数量
|
// ],
|
||||||
iceTransportPolicy: 'all', // 使用所有可用的候选者
|
// iceCandidatePoolSize: 10, // 限制 ICE 候选者的数量
|
||||||
bundlePolicy: 'balanced', // 每種類型的內容建立一個單獨的傳輸
|
// iceTransportPolicy: 'all', // 使用所有可用的候选者
|
||||||
}, server: {}
|
// 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', {
|
//console.log('当前数据:', JSON.stringify(store))
|
||||||
users: { name: 'users', list: [{ name: 'satori' }] },
|
delete store.users.list[1]
|
||||||
music: { name: 'music', list: [{ name: 'satori' }] },
|
//console.log('当前数据:', JSON.stringify(store))
|
||||||
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 = () => {
|
|
||||||
store.users.list.push({ name: 'koishi' })
|
store.users.list.push({ name: 'koishi' })
|
||||||
// 在数据从其他位置被删除时也能删除这里的元素
|
//store.users.list.push({ name: 'koishi' })
|
||||||
}
|
//store.users.list.push({ name: 'koishi' })
|
||||||
document.body.appendChild(element)
|
//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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
@ -97,18 +97,65 @@ export function Dialog(options) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 深度代理, 用于监听数据的变化
|
// 深度代理, 用于监听数据的变化
|
||||||
export function useProxy(obj, callback) {
|
export function useProxy(data, callback, path = []) {
|
||||||
return new Proxy(obj, {
|
if (Array.isArray(data)) {
|
||||||
get(target, key) {
|
const array = class extends Array {
|
||||||
if (typeof target[key] === 'object' && target[key] !== null) {
|
constructor(args) {
|
||||||
return useProxy(target[key], callback)
|
super(args)
|
||||||
}
|
}
|
||||||
return target[key]
|
push(args) {
|
||||||
},
|
super.push(args)
|
||||||
set(target, key, value) {
|
console.log('push', args)
|
||||||
target[key] = value
|
this.__notify()
|
||||||
callback(target, key, value)
|
}
|
||||||
return true
|
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
Block a user