assurdo, ogni volta troppo poco codice per i server sent events

go.mod

@@ -1,3 +1,9 @@
 module gdg-counter-website
 
 go 1.19
+
+require (
+	github.com/r3labs/sse/v2 v2.10.0 // indirect
+	golang.org/x/net v0.0.0-20191116160921-f9c825593386 // indirect
+	gopkg.in/cenkalti/backoff.v1 v1.1.0 // indirect
+)

go.sum

@@ -0,0 +1,15 @@
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/r3labs/sse/v2 v2.10.0 h1:hFEkLLFY4LDifoHdiCN/LlGBAdVJYsANaLqNYa1l/v0=
+github.com/r3labs/sse/v2 v2.10.0/go.mod h1:Igau6Whc+F17QUgML1fYe1VPZzTV6EMCnYktEmkNJ7I=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
+golang.org/x/net v0.0.0-20191116160921-f9c825593386 h1:ktbWvQrW08Txdxno1PiDpSxPXG6ndGsfnJjRRtkM0LQ=
+golang.org/x/net v0.0.0-20191116160921-f9c825593386/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
+gopkg.in/cenkalti/backoff.v1 v1.1.0 h1:Arh75ttbsvlpVA7WtVpH4u9h6Zl46xuptxqLxPiSo4Y=
+gopkg.in/cenkalti/backoff.v1 v1.1.0/go.mod h1:J6Vskwqd+OMVJl8C33mmtxTBs2gyzfv7UDAkHu8BrjI=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

main.go

@@ -4,6 +4,8 @@ import (
 	"encoding/json"
 	"log"
 	"net/http"
+
+	"github.com/r3labs/sse/v2"
 )
 
 func main() {
@@ -20,11 +22,25 @@ func main() {
 	log.Fatal(server.ListenAndServe())
 }
 
+func broadcastCounterUpdate(srv *sse.Server, id string, value int) {
+	bytes, err := json.Marshal(value)
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	srv.Publish(id, &sse.Event{Data: bytes})
+}
+
 func setupRoutes(mux *http.ServeMux) {
+	sseServer := sse.New()
+	sseServer.CreateStream("new-counter-value")
+
 	counter := 0
 
 	// API Routes
 
+	mux.HandleFunc("/api/events", sseServer.ServeHTTP)
+
 	mux.HandleFunc("/api/status", func(w http.ResponseWriter, r *http.Request) {
 		if r.Method != http.MethodGet {
 			http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
@@ -68,6 +84,8 @@ func setupRoutes(mux *http.ServeMux) {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
+
+		broadcastCounterUpdate(sseServer, "new-counter-value", counter)
 	})
 
 	mux.HandleFunc("/api/decrement", func(w http.ResponseWriter, r *http.Request) {
@@ -84,6 +102,8 @@ func setupRoutes(mux *http.ServeMux) {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
+
+		broadcastCounterUpdate(sseServer, "new-counter-value", counter)
 	})
 
 	// Static Files

src/main.js

@@ -1,27 +1,26 @@
 const counterElement = document.querySelector('#counter-value')
-const incrementButton = document.querySelector('#btn-increment')
-const decrementButton = document.querySelector('#btn-decrement')
 
 function updateCounter(value) {
     counterElement.textContent = `Counter: ${value}`
 }
 
-incrementButton.addEventListener('click', async () => {
-    const res = await fetch('/api/increment', { method: 'POST' })
-    const data = await res.json()
+const counterTickSource = new EventSource('/api/events?stream=new-counter-value')
+counterTickSource.addEventListener('message', e => {
+    const data = JSON.parse(e.data)
     updateCounter(data)
 })
 
-decrementButton.addEventListener('click', async () => {
-    const res = await fetch('/api/decrement', { method: 'POST' })
-    const data = await res.json()
-    updateCounter(data)
+const incrementButton = document.querySelector('#btn-increment')
+const decrementButton = document.querySelector('#btn-decrement')
+
+incrementButton.addEventListener('click', () => {
+    fetch('/api/increment', { method: 'POST' })
 })
 
-async function main() {
-    const res = await fetch('/api/value')
-    const data = await res.json()
-    updateCounter(data)
-}
+decrementButton.addEventListener('click', () => {
+    fetch('/api/decrement', { method: 'POST' })
+})
 
-main()
+fetch('/api/value')
+    .then(res => res.json())
+    .then(data => updateCounter(data))