This example demonstrates how to replace few blocks on event for example "post with id 1 changed" ( post-1-changed ) and trigger to load content via ajax request on "chatter" event.
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) }
The above is the detailed content of go htmx and sse example. For more information, please follow other related articles on the PHP Chinese website!