Echtzeit-Web mit Data-Star-Golang-php.cn

Echtzeit-Web mit Data-Star

DDD

Freigeben： 2024-10-13 06:12:02

Original

608 Leute haben es durchsucht

realtime web with data-star

Hier ist ein kleines Beispiel dafür, wie einfach und sauber „Live“-Dinge in Golang mit https://data-star.dev sein können

Die Serveruhr:

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))
}

Nach dem Login kopieren

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)
}

Nach dem Login kopieren

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>
}

Nach dem Login kopieren

und 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>
}

Nach dem Login kopieren

und das ist es.

Arbeitsbeispiel lebt hier: https://github.com/blinkinglight/clock-data-star

Das obige ist der detaillierte Inhalt vonEchtzeit-Web mit Data-Star. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!