Механизм обновления экранов через сокеты

Позволяет обновлять содержимое экрана, используя сокеты.

Использование

import { genSocketId, updateSocket } from '@app/socket'

Параметры

Имя	Тип	Обязательный	Описание
socketName	string	Да	Имя сокета. Используется для генерации идентификатора сокета и обновления содержимого экрана.

Описание

Критерием для использования обновления экранов через сокеты является передача в экран параметра socketIds=[]

app.screen("/", async (ctx, req) => {
  return <screen socketIds={socketIdList}></screen>
})

Функция updateSocket() отличается от refresh() тем, что механизм обновления экранов через сокеты не является действием и не требует никакого вмешательства пользователя, работая автономно.

Примеры

Простой пример

import { genSocketId, updateSocket } from '@app/socket'

app.screen('/', async (ctx, req) => {
  const socketId = await genSocketId('my-socket')

  return (
    <screen socketIds={[socketId]}>
      <section>
        <text style={{ fontSize: 30, fontWeight: 'bold', textAlign: 'center' }}>
          {Math.round(Math.random() * 1000)}
        </text>
        <button
          class={['section', 'primary']}
          onClick={updateSocketRoute.apiCall()}
        >
          Refresh via socketUpdate
        </button>
      </section>
    </screen>
  )
})

const updateSocketRoute = app.apiCall('/', async (ctx) => {
  return await updateSocket('my-socket')
})

Обновление экрана через WebHook

import { genSocketId, updateSocket } from '@app/socket'
import { Heap } from "@app/heap"

const socketName = "webhookSocket"
const BgColor = Heap.Table("BgColor", {
  color: Heap.String()
})

const getColor = async () => {
  return (await BgColor.findAll(ctx, {
    order: { createdAt: "desc" },
    limit: 1
  }))[0]
}

app.post("/getNewColor", async (ctx, req) => {
  const newColor = req.body.bgColor
  const color = await getColor()

  if (color) {
    await BgColor.update(ctx, {
      id: color.id,
      color: newColor
    })
  } else {
    await BgColor.create(ctx, {
      color: newColor
    })
  }

  await updateSocket(socketName)
})

app.screen('/', async (ctx, req) => {
  const socketId = await genSocketId(socketName)
  const color = await getColor()

  return (
    <screen socketIds={[socketId]}>
      <box style={{ backgroundColor: color }}>
        <text>Фоновый цвет этого блока обновляется по вебхуку в реальном времени</text>
      </box>
    </screen>
  )
})

Предложить изменения