go htmx 和 sse 範例

WBOY原創: 2024-08-28 06:34:331036瀏覽

go htmx and sse example

此範例示範如何取代事件中的幾個區塊，例如「id 1 的貼文已變更」( post-1-changed ) 並觸發透過「chatter」上的ajax 請求載入內容活動。

package main

import (
    "fmt"
    "net/http"
    "time"

    "github.com/r3labs/sse/v2"
)

func main() {
    server := sse.New()
    _ = server.CreateStream("messages")

    mux := http.NewServeMux()
    mux.HandleFunc("/events", func(w http.ResponseWriter, r *http.Request) {

        // la security
        token := r.URL.Query().Get("token")
        if token != "secret" {
            http.Error(w, "invalid token", http.StatusUnauthorized)
            return
        }
        go func() {
            <-r.Context().Done()
            println("The client is disconnected here")
            return
        }()

        server.ServeHTTP(w, r)
    })

    mux.HandleFunc("/chatroom", func(w http.ResponseWriter, r *http.Request) {
        w.Write([]byte(`<div>Hello from chat room</div>`))
    })

    mux.HandleFunc("/index", func(w http.ResponseWriter, r *http.Request) {
        w.Write([]byte(`
        <html>
        <head>
        <script src="https://unpkg.com/htmx.org@2.0.2/dist/htmx.js"></script>
        <script src="https://unpkg.com/htmx-ext-sse@2.2.2/sse.js"></script>
        </head>
        <body hx-ext="sse" sse-connect="/events?stream=messages&token=secret">
        <div >
            <div sse-swap="post-1-changed">one</div>
        </div>
        <div>
            <div sse-swap="post-1-changed">one</div>
        </div>
        <div>
            <div sse-swap="post-1-changed">one</div>
        </div>
        <div>
            <div sse-swap="notifications">one</div>
        </div>
        <div>
            <div hx-get="/chatroom" hx-trigger="sse:chatter">
                chat body reloaded
            </div>
        </div>
        </body></html>
        `))
    })

    go func() {
        i := 0
        for {
            i++
            time.Sleep(1 * time.Second)

            server.TryPublish("messages", &sse.Event{
                ID:    []byte(fmt.Sprintf("%d", i)),
                Event: []byte("post-1-changed"),
                Data:  []byte(`<div>Hello from sse ` + fmt.Sprintf("%d", i) + `</div>`),
            })

            server.TryPublish("messages", &sse.Event{
                ID:    []byte(fmt.Sprintf("%d", i)),
                Event: []byte("notifications"),
                Data:  []byte(`<div>Hello from post 2 sse ` + fmt.Sprintf("%d", i) + `</div>`),
            })

            server.TryPublish("messages", &sse.Event{
                ID:    []byte(fmt.Sprintf("%d", i)),
                Event: []byte("chatter"),
                Data:  []byte(`<div></div>`),
            })
            server.EventTTL = 5 * time.Second
        }
    }()

    http.ListenAndServe(":9999", mux)
}

以上是go htmx 和 sse 範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

ajax for Event this

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Rust 與 Go？我應該生鏽還是應該走下一篇：Rust 與 Go？我應該生鏽還是應該走

看更多