此示例演示如何替换事件中的几个块，例如“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中文网其他相关文章！
