Voltar

Realtime (DOM sem JS)

O Kyrux injeta automaticamente um WebSocket em toda página renderizada. O desenvolvedor não escreve nenhum JS — apenas atributos HTML e funções Go.

1. Marcar o elemento no template

<div kyrux-target="lista-posts">
  {% include "partials/lista.html" %}
</div>

2. Atualizar o DOM na view

func CriarPostView(ctx *router.Context) {
    // ... salvar no banco ...

    // Renderiza o fragmento atualizado
    html, _ := render.Partial("blog", "partials/lista.html", map[string]any{
        "posts": models.ListarPublicados(fw.DB.Use()),
    })

    fw.Realtime.Replace("lista-posts", html)   // substitui o innerHTML
    fw.Realtime.Append("lista-posts", html)    // adiciona ao final
    fw.Realtime.Prepend("lista-posts", html)   // adiciona ao início
    fw.Realtime.Remove("lista-posts")          // remove o elemento do DOM

    ctx.Redirect("/posts/", http.StatusFound)
}

⚠️ Replace/Append/Prepend/Remove são broadcast global — todos os clientes conectados recebem a atualização. Nunca as use com dados privados.

Atualizar apenas um usuário (variantes `For`)

Para conteúdo por usuário (saldo, notificações, carrinho), use as variantes com escopo de sessão — apenas as conexões (abas) daquela sessão recebem:

sess, _ := ctx.Get("session") // colocado por RequireLogin
s := sess.(*session.Session)

fw.Realtime.ReplaceFor(s.ID, "saldo", html)       // só as abas deste usuário
fw.Realtime.AppendFor(s.ID, "notificacoes", html)
fw.Realtime.RemoveFor(s.ID, "alerta")
fw.Realtime.ReplaceTextFor(s.ID, "contador", "3") // textContent — seguro p/ conteúdo do usuário

3. Broadcast via EventBus

// Disparar atualização para todos os clientes conectados via evento:
fw.Realtime.Broadcast("novo.post", payload)

Como funciona

View salva no banco
  → render.Partial() renderiza o HTML atualizado
  → fw.Realtime.Replace() envia via WebSocket
  → browser recebe JSON {type:"kyrux:dom", target, html, action}
  → JavaScript injetado localiza [kyrux-target="..."] e atualiza o DOM