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=

index.html

@@ -6,7 +6,11 @@
   </head>
   <body>
     <h1>GDG Counter Website</h1>
-    <div id="app"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <div class="app">
+      <div id="counter-value">???</div>
+      <button id="btn-decrement">Decrementa</button>  
+      <button id="btn-increment">Incrementa</button>
+    </div>
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>

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

package.json

@@ -6,10 +6,6 @@
         "build": "vite build"
     },
     "devDependencies": {
-        "@preact/preset-vite": "^2.5.0",
         "vite": "^3.2.3"
-    },
-    "dependencies": {
-        "preact": "^10.13.0"
     }
 }

src/main.js

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

src/main.jsx

@@ -1,38 +0,0 @@
-import { render } from 'preact'
-import { useState, useEffect } from 'preact/hooks'
-
-const App = ({}) => {
-    const [counter, setCounter] = useState(0)
-
-    useEffect(() => {
-        fetch('/api/value')
-            .then(res => res.json())
-            .then(count => setCounter(count))
-    }, [])
-
-    return (
-        <>
-            <div>{counter}</div>
-            <button
-                onClick={() => {
-                    fetch('/api/decrement', { method: 'POST' })
-                        .then(res => res.json())
-                        .then(count => setCounter(count))
-                }}
-            >
-                Decrementa
-            </button>
-            <button
-                onClick={() => {
-                    fetch('/api/increment', { method: 'POST' })
-                        .then(res => res.json())
-                        .then(count => setCounter(count))
-                }}
-            >
-                Incrementa
-            </button>
-        </>
-    )
-}
-
-render(<App />, document.querySelector('#app'))

vite.config.js

@@ -1,4 +1,3 @@
-import preactPlugin from '@preact/preset-vite'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
@@ -8,5 +7,4 @@ export default defineConfig({
             '/api': 'http://localhost:4000/',
         },
     },
-    plugins: [preactPlugin()],
 })