Merge pull request #2869 from djames-bloom/feat/1533-sse-user-events

ReneWerner87 · web-flow · commit f807cf753687 · 2025-03-25T08:20:56.000+01:00
feat: Improve SSE example to demonstrate user-defined publishing
diff --git a/sse/README.md b/sse/README.md
@@ -45,22 +45,53 @@ Server-Sent Events (SSE) allow servers to push updates to the client over a sing
 
 - **GET /**: Index page
 - **GET /sse**: SSE route
+- **PUT /publish**: Send messages via SSE
 
 ## Example Usage
 
+By default, the example will run on port `3000`; this can be changed by modifying the `appPort` constant in `main.go`
+
 1. Open your browser and navigate to `http://localhost:3000`.
 2. The client will automatically connect to the SSE endpoint and start receiving updates from the server.
+3. The `/sse` endpoint will publish the current time to the client every two seconds
+
+### Custom Messages
+
+To send a custom message, send a `PUT` request to the `/publish` endpoint in the following JSON format
+
+```json
+{
+  "message": "Hello, World!"
+}
+```
+
+Messages sent to the `/publish` endpoint will be added to a queue that is read from in FIFO order. You can test this
+by using curl in an iterator
+
+If you are using the Bash or Zsh shell:
+```sh
+for i in {1..10}; do
+  curl -X PUT -H 'Content-type: application/json' --data "{\"message\":\"SSE TEST $i\"}" http://localhost:3000/publish
+done
+```
+
+If you are using fish:
+```sh
+for i in (seq 1 10)
+  curl -X PUT -H 'Content-type: application/json' --data "{\"message\":\"SSE TEST $i\"}" http://localhost:3000/publish
+end
+```
+
+Once published, your added messages will begin appearing in the output at `http://localhost:3000`. Once the queue is empty
+and no user-published messages are left, `/sse` will return to it's standard behavior of displaying the current time.
+
 
 ## Code Overview
 
 ### `main.go`
 
 The main Go file sets up the Fiber application and handles the SSE connections. It includes the necessary configuration to send events to the client.
 
-### `index.html`
-
-The HTML file provides a simple user interface to connect to the SSE endpoint and display the received messages.
-
 ## Additional Information
 
 Server-Sent Events (SSE) is a standard allowing servers to push data to web clients over HTTP. Unlike WebSockets, which require a full-duplex connection, SSE uses a unidirectional connection from the server to the client. This makes SSE simpler to implement and more efficient for scenarios where only the server needs to send updates.
diff --git a/sse/main.go b/sse/main.go
@@ -2,16 +2,22 @@ package main
 
 import (
 	"bufio"
+	"bytes"
 	"fmt"
 	"log"
+	"text/template"
 	"time"
 
 	"github.com/gofiber/fiber/v2"
 	"github.com/gofiber/fiber/v2/middleware/cors"
 	"github.com/valyala/fasthttp"
 )
 
-var index = []byte(`<!DOCTYPE html>
+// appPort is the port that the server will listen on
+const appPort = "3000"
+
+// index is the HTML template that will be served to the client on the index page (`/`)
+const index = `<!DOCTYPE html>
 <html>
 <body>
 
@@ -20,7 +26,7 @@ var index = []byte(`<!DOCTYPE html>
 
 <script>
 if(typeof(EventSource) !== "undefined") {
-  var source = new EventSource("http://127.0.0.1:3000/sse");
+  var source = new EventSource("http://127.0.0.1:{{.Port}}/sse");
   source.onmessage = function(event) {
     document.getElementById("result").innerHTML += event.data + "<br>";
   };
@@ -31,23 +37,43 @@ if(typeof(EventSource) !== "undefined") {
 
 </body>
 </html>
-`)
+`
 
 func main() {
+	// create a queue to store incoming messages from the
+	// `/publish` endpoint
+	var sseMessageQueue []string
+
 	// Fiber instance
 	app := fiber.New()
 
 	// CORS for external resources
 	app.Use(cors.New(cors.Config{
-		AllowOrigins:     "*",
-		AllowHeaders:     "Cache-Control",
-		AllowCredentials: true,
+		AllowOrigins: "*",
+		AllowHeaders: "Cache-Control",
 	}))
 
 	app.Get("/", func(c *fiber.Ctx) error {
 		c.Response().Header.SetContentType(fiber.MIMETextHTMLCharsetUTF8)
 
-		return c.Status(fiber.StatusOK).Send(index)
+		tpl, err := template.New("index").Parse(index)
+		if err != nil {
+			return c.Status(fiber.StatusInternalServerError).SendString(err.Error())
+		}
+
+		data := struct {
+			Port string
+		}{
+			Port: appPort,
+		}
+
+		buf := new(bytes.Buffer)
+		err = tpl.Execute(buf, data)
+		if err != nil {
+			return c.Status(fiber.StatusInternalServerError).SendString(err.Error())
+		}
+
+		return c.Status(fiber.StatusOK).Send(buf.Bytes())
 	})
 
 	app.Get("/sse", func(c *fiber.Ctx) error {
@@ -61,7 +87,19 @@ func main() {
 			var i int
 			for {
 				i++
-				msg := fmt.Sprintf("%d - the time is %v", i, time.Now())
+
+				var msg string
+
+				// if there are messages that have been sent to the `/publish` endpoint
+				// then use these first, otherwise just send the current time
+				if len(sseMessageQueue) > 0 {
+					msg = fmt.Sprintf("%d - message recieved: %s", i, sseMessageQueue[0])
+					// remove the message from the buffer
+					sseMessageQueue = sseMessageQueue[1:]
+				} else {
+					msg = fmt.Sprintf("%d - the time is %v", i, time.Now())
+				}
+
 				fmt.Fprintf(w, "data: Message: %s\n\n", msg)
 				fmt.Println(msg)
 
@@ -81,6 +119,25 @@ func main() {
 		return nil
 	})
 
+	// Publish endpoint adds messages to the queue that will be sent to the client
+	// via the `/sse` endpoint in FIFO order. If there are no messages in the queue
+	// then the current time will be sent to the client instead.
+	app.Put("/publish", func(c *fiber.Ctx) error {
+		type Message struct {
+			Message string `json:"message"`
+		}
+
+		payload := new(Message)
+
+		if err := c.BodyParser(payload); err != nil {
+			return c.Status(fiber.StatusBadRequest).SendString(err.Error())
+		}
+
+		sseMessageQueue = append(sseMessageQueue, payload.Message)
+
+		return c.SendString("Message added to queue\n")
+	})
+
 	// Start server
-	log.Fatal(app.Listen(":3000"))
+	log.Fatal(app.Listen(":" + appPort))
 }
