data-star를 이용한 실시간 웹-Golang-php.cn

data-star를 이용한 실시간 웹

DDD

풀어 주다： 2024-10-13 06:12:02

원래의

685명이 탐색했습니다.

realtime web with data-star

여기 https://data-star.dev를 사용하여 golang에서 "라이브"가 얼마나 간단하고 깔끔한지 보여주는 작은 예가 있습니다

서버 시계:

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

로그인 후 복사

웹/뷰/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>
}

로그인 후 복사

그리고 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>
}

로그인 후 복사

그게 다입니다.

실제 사례는 여기에 있습니다: https://github.com/blinkinglight/clock-data-star

위 내용은 data-star를 이용한 실시간 웹의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!