Examples: Pause SSE to save resources (ThreeDotsLabs#468)

_examples/real-world-examples/server-sent-events-htmx/http.go

@@ -39,7 +39,9 @@ func NewHandler(repo *Repository, eventBus *cqrs.EventBus, sseRouter watermillht
 
 	counter := sseHandlersCounter{}
 
-	e.GET("/", h.AllPosts)
+	e.GET("/", h.Index)
+	e.GET("/posts", h.Posts)
+	e.GET("/idle", h.Idle)
 	e.POST("/posts/:id/reactions", h.AddReaction)
 	e.GET("/posts/:id/stats", func(c echo.Context) error {
 		postID := c.Param("id")
@@ -59,20 +61,42 @@ func NewHandler(repo *Repository, eventBus *cqrs.EventBus, sseRouter watermillht
 	return e
 }
 
-func (h Handler) AllPosts(c echo.Context) error {
-	posts, err := h.repo.AllPosts(c.Request().Context())
+func (h Handler) Index(c echo.Context) error {
+	posts, err := h.allPosts(c)
+	if err != nil {
+		return err
+	}
+
+	return views.Index(posts).Render(c.Request().Context(), c.Response())
+}
+
+func (h Handler) Posts(c echo.Context) error {
+	posts, err := h.allPosts(c)
 	if err != nil {
 		return err
 	}
 
+	return views.Posts(posts).Render(c.Request().Context(), c.Response())
+}
+
+func (h Handler) Idle(c echo.Context) error {
+	return views.Idle().Render(c.Request().Context(), c.Response())
+}
+
+func (h Handler) allPosts(c echo.Context) ([]views.Post, error) {
+	posts, err := h.repo.AllPosts(c.Request().Context())
+	if err != nil {
+		return nil, err
+	}
+
 	for _, post := range posts {
 		event := PostViewed{
 			PostID: post.ID,
 		}
 
 		err = h.eventBus.Publish(c.Request().Context(), event)
 		if err != nil {
-			return err
+			return nil, err
 		}
 	}
 
@@ -81,7 +105,7 @@ func (h Handler) AllPosts(c echo.Context) error {
 		postViews = append(postViews, newPostView(post))
 	}
 
-	return views.Index(postViews).Render(c.Request().Context(), c.Response())
+	return postViews, nil
 }
 
 func (h Handler) AddReaction(c echo.Context) error {

_examples/real-world-examples/server-sent-events-htmx/views/pages.templ

@@ -27,14 +27,41 @@ type PostViews struct {
 
 templ Index(posts []Post) {
     @base() {
-        <div class="row">
-            for _, p := range posts {
-                @postView(p)
-            }
-        </div>
+        @Posts(posts)
     }
 }
 
+templ Posts(posts []Post) {
+    <div class="row" id="main">
+        for _, p := range posts {
+            @postView(p)
+        }
+
+        <div hx-get="/idle" hx-trigger="load delay:600s" hx-target="#main" hx-swap="outerHTML" ></div>
+    </div>
+}
+
+templ Idle() {
+    <div class="row" id="main">
+        <div class="card mb-3">
+            <div class="card-body">
+                <h5 class="card-title mb-2">Paused to save resources. 🫢</h5>
+
+                <h5 class="card-title mb-1">Still around?</h5>
+
+                <button
+                    class="btn btn-outline-secondary m-1"
+                    hx-get="/posts"
+                    hx-target="#main"
+                    hx-swap="outerHTML"
+                >
+                    Reload
+                </button>
+            </div>
+        </div>
+    </div>
+}
+
 templ postView(post Post) {
     <div class="card mb-3">
       <div class="card-body">