2023-10-06 13:52:09 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>webRTC</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div>
|
|
|
|
|
<h1>Entanglement</h1>
|
|
|
|
|
<p>同步</p>
|
|
|
|
|
</div>
|
|
|
|
|
<script type="module">
|
|
|
|
|
import Entanglement from './entanglement.js'
|
2023-10-06 16:06:17 +08:00
|
|
|
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: {}
|
|
|
|
|
})
|
2023-10-06 13:52:09 +08:00
|
|
|
entanglement.set('json', {
|
|
|
|
|
users: { name: 'users', list: [{ name: 'satori' }] },
|
|
|
|
|
music: { name: 'music', list: [{ name: 'satori' }] },
|
|
|
|
|
image: { name: 'image', list: [{ name: 'satori' }] }
|
|
|
|
|
})
|
2023-10-06 20:47:11 +08:00
|
|
|
const store = entanglement.get('json', event => {
|
|
|
|
|
console.log(event)
|
|
|
|
|
// 根据事件传递的路径, 更新对应的组件
|
|
|
|
|
// 如何绑定多个组件而尽量降低代码量?
|
|
|
|
|
// 传递变化
|
|
|
|
|
})
|
2023-10-06 16:06:17 +08:00
|
|
|
await new Promise(resolve => setTimeout(resolve, 3000))
|
2023-10-06 13:52:09 +08:00
|
|
|
store.users.name = 'koishi'
|
2023-10-06 18:53:13 +08:00
|
|
|
|
|
|
|
|
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' })
|
2023-10-06 20:47:11 +08:00
|
|
|
// 在数据从其他位置被删除时也能删除这里的元素
|
2023-10-06 18:53:13 +08:00
|
|
|
}
|
|
|
|
|
document.body.appendChild(element)
|
|
|
|
|
|
2023-10-06 20:47:11 +08:00
|
|
|
// 主动查询获取数据, 然后将数据变化通过推送事件获取
|
|
|
|
|
// 以事件绑定模式获取数据, 为元素绑定数据变化事件, 使数据变化时自动更新元素
|
2023-10-06 13:52:09 +08:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
2023-10-06 16:06:17 +08:00
|
|
|
</html>
|
