csasq/cit-is-bot-backend
csasq/cit-is-bot-backend
1
0
Форкнуть 0
Код Задачи 8 Запросы на слияние Действия Пакеты Projects Релизы Вики Активность

Предприняты попытки разработки модуля синхронизации данных

Просмотр исходного кода
Этот коммит содержится в:
Глеб Иваницкий 2024-08-15 15:32:28 +03:00
родитель cce8c81e29
Коммит bfa44a1793
3 изменённых файлов: 47 добавлений и 36 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

74
static/scripts/vendor.js
Просмотреть файл

@ -54,44 +54,58 @@
// } // }
// } // }
const connectWebSocket = (url) => { const syncUrl = new URL('https://cit.csasq.ru/ws/sync')
const ws = new WebSocket(url)
ws.onopen = () => { const SyncDataType = {
TEXT: 0,
BOOLEAN: 1,
}
} const enableSync = (url) => {
let ws = new WebSocket(url)
document
.querySelectorAll('md-outlined-text-field[data-sync]')
.forEach(element => element.addEventListener('input', () => {
const data = JSON.stringify({
id: element.id,
type: SyncDataType.TEXT,
value: element.value,
})
ws.send(data)
}))
document
.querySelectorAll('md-switch[data-sync]')
.forEach(element => element.addEventListener('change', () => {
const data = JSON.stringify({
id: element.id,
type: SyncDataType.BOOLEAN,
value: !element.hasAttribute('selected'),
})
ws.send(data)
}))
ws.onmessage = (event) => { ws.onmessage = (event) => {
const data = JSON.parse(event.data) const data = JSON.parse(event.data)
document.querySelectorAll(`#${data.id}`).forEach(element => element.toggleAttribute('selected', data.value)) const elements = document.querySelectorAll(`#${data.id}`)
switch (data.type) {
case SyncDataType.TEXT:
elements.forEach(element => element.value = data.value)
break
case SyncDataType.BOOLEAN:
elements.forEach(element => element.toggleAttribute('selected', data.value))
break
}
} }
ws.onclose = () => { ws.onclose = () => () => ws = new WebSocket(url)
ws.onerror = () => {
console.log('ws_error')
} }
return ws
} }
const wsUrl = new URL(location) document.addEventListener('DOMContentLoaded', () => enableSync(syncUrl))
wsUrl.protocol = 'wss'
wsUrl.pathname = '/ws'
const ws = connectWebSocket(wsUrl)
function getSwitch(id) {
const element = document.createElement('md-switch')
element.id = id
element.onclick = (event) => {
event.preventDefault()
const data = JSON.stringify({
id: id,
value: !event.currentTarget.hasAttribute('selected'),
})
ws.send(data)
}
return element
}
document.addEventListener('DOMContentLoaded', () => {
document.body.querySelector('main').append(getSwitch('qwerty'))
})

7
templates/main.jinja2
Просмотреть файл

@ -41,11 +41,8 @@
</head> </head>
<body> <body>
<main> <main>
<md-outlined-text-field label="Favorite color"></md-outlined-text-field> <md-outlined-text-field id="text" label="Favorite color" data-sync></md-outlined-text-field>
<md-switch id="qwerty"></md-switch> <md-switch id="switch" data-sync></md-switch>
<md-switch id="qwerty"></md-switch>
<md-switch id="qwerty"></md-switch>
<md-switch id="qwerty"></md-switch>
</main> </main>
<nav class="md-typescale-body-small"> <nav class="md-typescale-body-small">
<ul> <ul>

2
web/main.py
Просмотреть файл

@ -73,7 +73,7 @@ async def _():
@app.websocket( @app.websocket(
path='/ws', path='/ws/sync',
) )
async def _( async def _(
websocket: WebSocket, websocket: WebSocket,