- A demo of Server-Side Events using htmx and typed-htmx-go. + A demo countdown using Server-Sent Events, with htmx and typed-htmx-go.
- When you click the button below, that fetches a new element that uses the sse extension to start a live feed. + When you click the button below, that fetches a new element that uses the sse extension to start stream a countdown.
- { ex.PrintOrErr("sse.templ", "entry") }
+ { ex.PrintOrErr("sse.templ", "trigger") }
- The new elements uses the sse.Connect attribute to connect to a server-side event stream, and allows you to POST messages to the stream. + The new elements uses the sse.Connect attribute to connect to a server-side event streaming countdown.
- { ex.PrintOrErr("sse.templ", "chatroom") }
+ { ex.PrintOrErr("sse.templ", "countdown") }
- When you or another user posts a message, it will be sent to the server and broadcast to all connected clients as a simple div. + Each second, the server sends a countdown message that updates the innerHTML of the div.
@@ -49,60 +48,44 @@ templ Page() {
- After 25 seconds, the server will send the EndEvent, that closes removes the sse connection by replacing the sse.Connect element with the initial button using hx.Swap(swap.OuterHTML).
+ After the countdown is complete, the server will send a ResetEvent, that closes removes the sse connection by replacing the sse.Connect element with the initial button using hx.Swap(swap.OuterHTML).
{ msg }
} //ex:end:message diff --git a/examples/web/sse_ex/extempl/sse_templ.go b/examples/web/sse_ex/extempl/sse_templ.go index 8c5a325..246abc5 100644 --- a/examples/web/sse_ex/extempl/sse_templ.go +++ b/examples/web/sse_ex/extempl/sse_templ.go @@ -14,12 +14,11 @@ import ( "github.com/a-h/templ" "github.com/will-wow/typed-htmx-go/htmx" "github.com/will-wow/typed-htmx-go/htmx/ext/sse" - "github.com/will-wow/typed-htmx-go/htmx/on" "github.com/will-wow/typed-htmx-go/htmx/swap" "github.com/will-wow/typed-htmx-go/examples/web/exprint" "github.com/will-wow/typed-htmx-go/examples/web/layout/templ/layout" - "github.com/will-wow/typed-htmx-go/examples/web/sse_ex/chatroom" + "github.com/will-wow/typed-htmx-go/examples/web/sse_ex/shared" ) var hx = htmx.NewTempl() @@ -47,50 +46,50 @@ func Page() templ.Component { templ_7745c5c3_Buffer = templ.GetBuffer() defer templ.ReleaseBuffer(templ_7745c5c3_Buffer) } - _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("A demo of Server-Side Events using htmx and typed-htmx-go.
When you click the button below, that fetches a new element that uses the sse extension to start a live feed.
")
+ _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("Server-Sent Events
A demo countdown using Server-Sent Events, with htmx and typed-htmx-go.
When you click the button below, that fetches a new element that uses the sse extension to start stream a countdown.
")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
- templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(ex.PrintOrErr("sse.templ", "entry"))
+ templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(ex.PrintOrErr("sse.templ", "trigger"))
if templ_7745c5c3_Err != nil {
- return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/sse_ex/extempl/sse.templ`, Line: 32, Col: 41}
+ return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/sse_ex/extempl/sse.templ`, Line: 31, Col: 43}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
- _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
The new elements uses the sse.Connect attribute to connect to a server-side event stream, and allows you to POST messages to the stream.
")
+ _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
The new elements uses the sse.Connect attribute to connect to a server-side event streaming countdown.
")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var4 string
- templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(ex.PrintOrErr("sse.templ", "chatroom"))
+ templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(ex.PrintOrErr("sse.templ", "countdown"))
if templ_7745c5c3_Err != nil {
- return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/sse_ex/extempl/sse.templ`, Line: 40, Col: 44}
+ return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/sse_ex/extempl/sse.templ`, Line: 39, Col: 45}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
- _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
When you or another user posts a message, it will be sent to the server and broadcast to all connected clients as a simple div.
")
+ _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
Each second, the server sends a countdown message that updates the innerHTML of the div.
")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(ex.PrintOrErr("sse.templ", "message"))
if templ_7745c5c3_Err != nil {
- return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/sse_ex/extempl/sse.templ`, Line: 48, Col: 43}
+ return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/sse_ex/extempl/sse.templ`, Line: 47, Col: 43}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
- _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
After 25 seconds, the server will send the EndEvent, that closes removes the sse connection by replacing the sse.Connect element with the initial button using hx.Swap(swap.OuterHTML).
Demo
")
+ _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("After the countdown is complete, the server will send a ResetEvent, that closes removes the sse connection by replacing the sse.Connect element with the initial button using hx.Swap(swap.OuterHTML).
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } var templ_7745c5c3_Var9 string templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(msg) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/sse_ex/extempl/sse.templ`, Line: 105, Col: 11} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/sse_ex/extempl/sse.templ`, Line: 88, Col: 9} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9)) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("") + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/examples/web/sse_ex/shared/shared.go b/examples/web/sse_ex/shared/shared.go new file mode 100644 index 0000000..a45df90 --- /dev/null +++ b/examples/web/sse_ex/shared/shared.go @@ -0,0 +1,4 @@ +package shared + +const CountdownEvent = "countdown" +const ResetEvent = "reset" diff --git a/examples/web/sse_ex/sse_ex.go b/examples/web/sse_ex/sse_ex.go index b7016d2..222f0e9 100644 --- a/examples/web/sse_ex/sse_ex.go +++ b/examples/web/sse_ex/sse_ex.go @@ -1,105 +1,93 @@ package sse_ex import ( - "context" "fmt" "net/http" + "strconv" "time" - "github.com/will-wow/typed-htmx-go/examples/web/sse_ex/chatroom" + "github.com/will-wow/typed-htmx-go/examples/web/sse_ex/exgom" "github.com/will-wow/typed-htmx-go/examples/web/sse_ex/extempl" + "github.com/will-wow/typed-htmx-go/examples/web/sse_ex/shared" ) type example struct { - gom bool - room *chatroom.Chatroom + gom bool } func NewHandler(gom bool) http.Handler { mux := http.NewServeMux() - ctx := context.TODO() - - c := chatroom.New(ctx) - - ex := example{gom: gom, room: c} + ex := example{gom: gom} mux.HandleFunc("GET /{$}", ex.demo) - mux.HandleFunc("GET /chatroom/{$}", ex.chatroom) - mux.HandleFunc("GET /chatroom/feed/{$}", ex.feed) - mux.HandleFunc("POST /chatroom/post/{$}", ex.newPost) + mux.HandleFunc("GET /countdown/{$}", ex.countdown) + mux.HandleFunc("GET /countdown/feed/{$}", ex.feed) return mux } func (ex *example) demo(w http.ResponseWriter, r *http.Request) { - component := extempl.Page() - _ = component.Render(r.Context(), w) + ctx := r.Context() + if ex.gom { + _ = exgom.Page().Render(w) + } else { + _ = extempl.Page().Render(ctx, w) + } } -func (ex *example) chatroom(w http.ResponseWriter, r *http.Request) { - component := extempl.Chatroom() - _ = component.Render(r.Context(), w) +func (ex *example) countdown(w http.ResponseWriter, r *http.Request) { + ctx := r.Context() + if ex.gom { + _ = exgom.Countdown().Render(w) + } else { + _ = extempl.Countdown().Render(ctx, w) + } } func (ex *example) feed(w http.ResponseWriter, r *http.Request) { rc := http.NewResponseController(w) - - feedTimeout := time.NewTimer(25 * time.Second) - ctx := r.Context() - room := ex.room.Join() - defer func() { - // Stop and drain the timer - feedTimeout.Stop() - - // Leave the room - ex.room.Leave(room) - }() w.Header().Set("Content-Type", "text/event-stream") w.Header().Set("Cache-Control", "no-cache") w.Header().Set("Connection", "keep-alive") - for { - select { - case <-feedTimeout.C: - fmt.Println("end feed") - component := extempl.Entry() - - _, _ = fmt.Fprintf(w, "event: %s\n", chatroom.EndEvent) - _, _ = fmt.Fprint(w, "data: ") - _ = component.Render(ctx, w) - _, _ = fmt.Fprint(w, "\n\n") - _ = rc.Flush() - return - case <-ctx.Done(): - fmt.Println("ctx done") - return - case msg := <-room: - fmt.Println("msg", msg.Message) - component := extempl.ChatMessage(msg.Message) + for i := range 5 { + countMessage := strconv.Itoa(5 - i) + ex.sendEvent(w, shared.CountdownEvent, func() { + if ex.gom { + _ = exgom.Message(countMessage).Render(w) + } else { + _ = extempl.Message(countMessage).Render(ctx, w) + } + }) + _ = rc.Flush() + time.Sleep(time.Second) + } - _, _ = fmt.Fprintf(w, "event: %s\n", chatroom.ChatEvent) - _, _ = fmt.Fprint(w, "data: ") - _ = component.Render(ctx, w) - _, _ = fmt.Fprint(w, "\n\n") - _ = rc.Flush() + ex.sendEvent(w, shared.CountdownEvent, func() { + if ex.gom { + _ = exgom.Message("Blastoff!").Render(w) + } else { + _ = extempl.Message("Blastoff!").Render(ctx, w) } - } + }) + _ = rc.Flush() + time.Sleep(2 * time.Second) + + ex.sendEvent(w, shared.ResetEvent, func() { + if ex.gom { + _ = exgom.Trigger().Render(w) + } else { + _ = extempl.Trigger().Render(ctx, w) + } + }) } -func (ex *example) newPost(w http.ResponseWriter, r *http.Request) { - message := r.FormValue("message") - if message == "" { - w.WriteHeader(http.StatusBadRequest) - return - } - if len([]rune(message)) > 140 { - w.WriteHeader(http.StatusRequestEntityTooLarge) - return - } - - ex.room.Send(message) - w.WriteHeader(http.StatusNoContent) +func (ex *example) sendEvent(w http.ResponseWriter, event string, render func()) { + _, _ = fmt.Fprintf(w, "event: %s\n", event) + _, _ = fmt.Fprint(w, "data: ") + render() + _, _ = fmt.Fprint(w, "\n\n") } diff --git a/examples/web/web.go b/examples/web/web.go index dee8b7c..80b632d 100644 --- a/examples/web/web.go +++ b/examples/web/web.go @@ -7,13 +7,8 @@ import ( "net/http" "os" - "github.com/will-wow/typed-htmx-go/examples/web/activesearch" - "github.com/will-wow/typed-htmx-go/examples/web/bulkupdate" - "github.com/will-wow/typed-htmx-go/examples/web/classtools_ex" - "github.com/will-wow/typed-htmx-go/examples/web/clicktoedit" "github.com/will-wow/typed-htmx-go/examples/web/examples" - "github.com/will-wow/typed-htmx-go/examples/web/progressbar" - "github.com/will-wow/typed-htmx-go/examples/web/sse_ex" + "github.com/will-wow/typed-htmx-go/examples/web/examples/registry" ) //go:embed "static" @@ -53,12 +48,10 @@ func (h *Handler) routes() http.Handler { mux.HandleFunc("/{$}", templIndexRoutes.NewIndexHandler) mux.HandleFunc("/examples/gomponents/{$}", gomIndexRoutes.NewIndexHandler) - delegateExample(mux, "click-to-edit", clicktoedit.NewHandler) - delegateExample(mux, "bulk-update", bulkupdate.NewHandler) - delegateExample(mux, "active-search", activesearch.NewHandler) - delegateExample(mux, "progress-bar", progressbar.NewHandler) - delegateExample(mux, "class-tools", classtools_ex.NewHandler) - delegateExample(mux, "sse", sse_ex.NewHandler) + + for _, ex := range registry.Examples { + delegateExample(mux, ex.Slug, ex.Handler) + } return h.recoverPanic(h.logRequest(mux)) }