Maison > Article > développement back-end > web en temps réel avec data-star

web en temps réel avec data-star

DDDoriginal: 2024-10-13 06:12:02682parcourir

realtime web with data-star

Voici un petit exemple de la simplicité et de la propreté des choses "en direct" dans Golang en utilisant https://data-star.dev

L'horloge du serveur :

cmd/app/main.go

package main

import (
    "log"
    "net/http"

    "github.com/blinkinglight/clock-data-star/handlers"
    "github.com/go-chi/chi/v5"
)

func main() {
    router := chi.NewRouter()

    handlers.SetupHome(router)

    log.Printf("Starting server on :3000")
    log.Fatal(http.ListenAndServe(":3000", router))
}

handlers/handlers.go

package handlers

import (
    "net/http"
    "time"

    "github.com/blinkinglight/clock-data-star/web/views"
    "github.com/delaneyj/datastar"
    "github.com/go-chi/chi/v5"
)

func SetupHome(router chi.Router) {

    homeRoute := func(w http.ResponseWriter, r *http.Request) {
        views.ClockPage().Render(r.Context(), w)
    }

    clockRoute := func(w http.ResponseWriter, r *http.Request) {
        sse := datastar.NewSSE(w, r)
        ticker := time.NewTicker(time.Second)
        for {
            select {
            case <-r.Context().Done():
                ticker.Stop()
                return
            case <-ticker.C:
                datastar.RenderFragmentTempl(sse, views.ClockFragment(time.Now().Format("15:04:05")))
            }
        }
    }

    router.Get("/", homeRoute)
    router.Get("/clock", clockRoute)
}

web/views/page.templ

package views

templ Page() {
    <!DOCTYPE html>
    <html>
        <head>
            <script type="module" defer src="https://cdn.jsdelivr.net/npm/@sudodevnull/datastar"></script>
        </head>
        <body>
            <div>
                { children... }
            </div>
        </body>
    </html>
}

et web/views/clock.templ

package views

import "github.com/delaneyj/datastar"

templ ClockPage() {
    @Page() {
        <div data-on-load={ datastar.GET("/clock") }>
            <h1>Clock</h1>
            <div id="clock"></div>
        </div>
    }
}

templ ClockFragment(t string) {
    <div id="clock">
        { t }
    </div>
}

et c'est tout.

Un exemple concret se trouve ici : https://github.com/blinkinglight/clock-data-star

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

golang using github https

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Ouvrir la boîte à outils Crypto de Go, Go Crypto 2Article suivant：Ouvrir la boîte à outils Crypto de Go, Go Crypto 2

Articles Liés

Voir plus