Heim > Artikel > Backend-Entwicklung > Gehen Sie zum Beispiel Htmx und SSE

Gehen Sie zum Beispiel Htmx und SSE

WBOYOriginal: 2024-08-28 06:34:331020Durchsuche

go htmx and sse example

Dieses Beispiel zeigt, wie man einige Blöcke bei einem Ereignis ersetzt, zum Beispiel „Beitrag mit ID 1 geändert“ ( post-1-changed ) und den Auslöser zum Laden von Inhalten über eine Ajax-Anfrage bei „chatter“ auslöst. Veranstaltung.

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

Das obige ist der detaillierte Inhalt vonGehen Sie zum Beispiel Htmx und SSE. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

ajax for Event this

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Rust vs. Go? Soll ich rosten oder soll ich gehen?Nächster Artikel：Rust vs. Go? Soll ich rosten oder soll ich gehen?

In Verbindung stehende Artikel

Mehr sehen