add websockets

.gitignore

@@ -1,3 +1,4 @@
 build
 bin
 tmp
+.DS_Store

assets/js/websocket_example.js

@@ -0,0 +1,45 @@
+let socket = null;
+let msgCount = 0;
+
+function setupSocket() {
+  socket = new WebSocket("ws://localhost:5155/ws");
+
+  socket.addEventListener("message", (event) => {
+    msgCount += 1;
+    const msgCountElement = document.getElementById("msgCount");
+    if (msgCountElement) {
+      msgCountElement.textContent = msgCount;
+    }
+    console.log("message: ", event.data);
+  });
+
+  socket.addEventListener("close", (event) => {
+    const header = document.getElementById("msg");
+    header.textContent = "Connection Closed";
+    console.log("connection closed");
+  });
+}
+
+function closeConn() {
+  if (socket) {
+    socket.close();
+    socket = null;
+    const header = document.getElementById("msg");
+    header.textContent = "Connection Closed";
+    console.log("connection closed");
+  }
+}
+
+function openConn() {
+  if (!socket || socket.readyState === WebSocket.CLOSED) {
+    const header = document.getElementById("msg");
+    header.textContent = "Connection Open";
+    console.log("connection open");
+    setupSocket();
+  } else {
+    console.log("Socket is already open or connecting.");
+  }
+}
+
+// Start the first connection
+setupSocket();

cmd/webapp/main.go

@@ -8,14 +8,21 @@ import (
 	"os"
 	"path/filepath"
 	"strings"
+	"time"
 
 	"github.com/gin-gonic/gin"
+	"github.com/gorilla/websocket"
 )
 
 type DeleteSelected struct {
 	Svgs []string `json:"svgs" binding:"required"`
 }
 
+var upgrader = websocket.Upgrader{
+	ReadBufferSize:  1024,
+	WriteBufferSize: 1024,
+}
+
 func main() {
 	router := gin.Default()
 	funcMap := template.FuncMap{
@@ -80,6 +87,23 @@ func main() {
 		c.HTML(200, "create-icon.html", nil)
 	})
 
+	router.GET("/ws", func(c *gin.Context) {
+		conn, err := upgrader.Upgrade(c.Writer, c.Request, nil)
+		if err != nil {
+			log.Panicln("error upgrading ws: ", err)
+			return
+		}
+		defer conn.Close()
+		for {
+			conn.WriteMessage(websocket.TextMessage, []byte("Hello Socket"))
+			time.Sleep(time.Second)
+		}
+	})
+
+	router.GET("/ws-example", func(c *gin.Context) {
+		c.HTML(200, "ws-example.html", nil)
+	})
+
 	router.POST("/prompt-icon", func(c *gin.Context) {
 		var form struct {
 			Prompt string `form:"prompt" binding:"required"`

go.mod

@@ -14,6 +14,7 @@ require (
 	github.com/go-playground/universal-translator v0.18.1 // indirect
 	github.com/go-playground/validator/v10 v10.26.0 // indirect
 	github.com/goccy/go-json v0.10.5 // indirect
+	github.com/gorilla/websocket v1.5.3 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
 	github.com/klauspost/cpuid/v2 v2.2.10 // indirect
 	github.com/leodido/go-urn v1.4.0 // indirect

go.sum

@@ -24,6 +24,8 @@ github.com/go-playground/validator/v10 v10.26.0/go.mod h1:I5QpIEbmr8On7W0TktmJAu
 github.com/goccy/go-json v0.10.5 h1:Fq85nIqj+gXn/S5ahsiTlK3TmC85qgirsdTP/+DeaC4=
 github.com/goccy/go-json v0.10.5/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
+github.com/gorilla/websocket v1.5.3 h1:saDtZ6Pbx/0u+bgYQ3q96pZgCzfhKXGPqt7kZ72aNNg=
+github.com/gorilla/websocket v1.5.3/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
 github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
 github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
 github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=

internal/helper.go

@@ -193,7 +193,6 @@ func DownloadIcon(prompt string, outputPath string) (string, error) {
 }
 
 func FindNoneCollisionFileName(fileName, fileExt, path string) string {
-
 	filePath := filepath.Join(path, fileName+"."+fileExt)
 	for fileCount := 1; FileExists(filePath); fileCount += 1 {
 		log.Println("file exists: ", filePath)

templates/home.html

@@ -10,6 +10,7 @@
       <h2>Pages</h2>
       <a href="view-all-icons">View Icons</a>
       <a href="create-icon">Create Icons</a>
+      <a href="/ws-example">WebSocket Example</a>
     </div>
   </body>
 </html>

templates/ws-example.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Websocket Test</title>
+    <script src="/assets/js/websocket_example.js"></script>
+  </head>
+  <body>
+    <h1 id="msg">Connection Closed</h1>
+    <p id="msgCount">0</p>
+    <button type="button" onclick="openConn()">Open</button>
+    <button type="button" onclick="closeConn()">Close</button>
+  </body>
+</html>