init

Author: simbafs

.gitignore

@@ -0,0 +1 @@
+node_modules

Makefile

@@ -0,0 +1,5 @@
+npm=pnpm
+
+.PHONY: dev
+dev: 
+	cd ./test/ && nodemon -e go --watch './**/*.go' --signal SIGTERM --exec 'go' run . 

go.mod

@@ -0,0 +1,3 @@
+module github.com/simbafs/wsync
+
+go 1.21.0

handler/new.go

@@ -0,0 +1,17 @@
+package wsync
+
+import (
+	"fmt"
+	"net/http"
+)
+
+type Wsync struct{}
+
+func (ws *Wsync) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+	// upgrade to websocket
+	fmt.Fprintf(w, "<h1>hello world</h1>")
+}
+
+func New() *Wsync {
+	return new(Wsync)
+}

hook/index.js

@@ -0,0 +1,36 @@
+/**
+  * init websocket to server with auto reconnecting and ping check
+  * @param {string} url 
+  */
+function init(url) {
+    if (!window) return
+    const ws = new WebSocket(url)
+
+    const onOpen = () => console.log(`open websocket connection to ${url}`)
+    const onClose = () => {
+        // TODO: reconnecting
+        console.log(`close websocket connection to ${url}`)
+    }
+    const onError = e => console.error(e)
+
+    ws.addEventListener('open', onOpen)
+    ws.addEventListener('close', onClose)
+    ws.addEventListener('error', onError)
+
+    window.ws = ws
+}
+
+/**
+  * before setState, sync to websocket
+  * @template T
+  * @param {T} state 
+  * @param {(state: T) => void} setState 
+  *
+  * @returns {[T, (state: T) => void]}
+  *
+  */
+function sync(state, setState) {
+    // TODO
+
+    return [state, setState]
+}

hook/useWsReducer.js

@@ -0,0 +1,30 @@
+import { useReducer } from "react";
+
+/**
+ * @template S
+ * @template A
+ * 
+ * @callback Reducer
+ * @param {S} state
+ * @param {A} action
+ * @returns {S}
+ */
+
+/**
+ * @template S
+ * @template A
+ * @template I
+ *
+ * @param {WebSocket} ws 
+ * @param {string} key 
+ * @param {Reducer<S, A>} reducer 
+ * @param {S | I} initArgs 
+ * @param {(args: S | I) => S} [init]
+ * 
+ * @returns {[S, React.Dispatch<A>]}
+ */
+export default function useWsReducer(ws, key, reducer, initArgs, init) {
+    const [state, updateState] = useReducer(reducer, initArgs, init)
+
+    return [state, updateState]
+}

hook/useWsState.js

@@ -0,0 +1,14 @@
+import { useState } from "react";
+
+/**
+ * @template T
+ * @param {WebSocket} ws 
+ * @param {string} key 
+ * @param {T} [initState]
+ * @returns {[T, React.Dispatch<T>]}
+ */
+export default function useWsState(ws, key, initState) {
+    const [state, setState] = useState(initState)
+
+    return [state, setState]
+}

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "wsync",
+  "version": "1.0.0",
+  "description": "sync states from backend to frontend with websocket",
+  "main": "hook/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "SimbaFs <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "@types/react": "^18.2.21",
+    "react": "^18.2.0"
+  }
+}

pnpm-lock.yaml

@@ -0,0 +1,14 @@
+package main
+
+import (
+	"log"
+	"net/http"
+
+	wsync "github.com/simbafs/wsync/handler"
+)
+
+func main() {
+	http.Handle("/ws", wsync.New())
+
+	log.Fatal(http.ListenAndServe(":3000", nil))
+}

test/main.go

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": false,
+    "strict": false,
+    "skipLibCheck": true
+  }
+}