混乱之暂存
This commit is contained in:
140
public/test.html
140
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 = () => {
|
||||
store.users.list.push({ name: 'koishi' })
|
||||
// 在数据从其他位置被删除时也能删除这里的元素
|
||||
}
|
||||
document.body.appendChild(element)
|
||||
|
||||
// 主动查询获取数据, 然后将数据变化通过推送事件获取
|
||||
// 以事件绑定模式获取数据, 为元素绑定数据变化事件, 使数据变化时自动更新元素
|
||||
//console.log('当前数据:', JSON.stringify(store))
|
||||
delete store.users.list[1]
|
||||
//console.log('当前数据:', JSON.stringify(store))
|
||||
store.users.list.push({ name: 'koishi' })
|
||||
//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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user