setup yjs server

.github/workflows/deploy.yml

@@ -18,3 +18,4 @@ jobs:
           echo "${{secrets.SSH_PRIVATE_KEY}}" > ansible/.ssh_key
           chmod 600 ansible/.ssh_key
           make deploy
+          make deploy_yjs

.gitignore

@@ -41,6 +41,7 @@ key.txt
 
 # vercel
 web/.vercel
+web/dbdir
 
 
 # Binaries

Makefile

@@ -9,6 +9,9 @@ export $(shell sed 's/=.*//' .env)
 build_server:
 	go run main.go
 
+yjs_server:
+	cd web && YPERSISTENCE=./dbdir  yarn yjs
+
 test:
 	go test ./internal/...
 
@@ -25,6 +28,15 @@ deploy:
 	ssh -o StrictHostKeyChecking=no -p 32022 -i ansible/.ssh_key [email protected] "sudo chown gempbot:gempbot /home/gempbot/gempbot"
 	ssh -o StrictHostKeyChecking=no -p 32022 -i ansible/.ssh_key [email protected] "sudo systemctl restart gempbot-migrate && sudo systemctl start gempbot"
 
+deploy_yjs:
+	(cd web && yarn)
+	tar -czvf web.tar.gz web
+	rsync -avz -e "ssh -o StrictHostKeyChecking=no -p 32022 -i ansible/.ssh_key" web.tar.gz [email protected]:/home/gempbot/
+	ssh -o StrictHostKeyChecking=no -p 32022 -i ansible/.ssh_key [email protected] "sudo systemctl stop gempbot-yjs"
+	ssh -o StrictHostKeyChecking=no -p 32022 -i ansible/.ssh_key [email protected] "rm -rf /home/gempbot/web"
+	ssh -o StrictHostKeyChecking=no -p 32022 -i ansible/.ssh_key [email protected] "tar -xvf /home/gempbot/web.tar.gz -C /home/gempbot/"
+	ssh -o StrictHostKeyChecking=no -p 32022 -i ansible/.ssh_key [email protected] "sudo systemctl start gempbot-yjs"
+
 ansible:
 	cd ansible && ansible-vault decrypt ssh_key.vault --output=.ssh_key
 	chmod 600 ansible/.ssh_key

ansible/group_vars/main/vars.yml

@@ -2,6 +2,7 @@
 web_host: bot.gempir.com
 cookie_domain: gempir.com
 api_host: bot-api.gempir.com
+yjs_host: bot-yjs.gempir.com
 grafana_host: grafana.o.gempir.com
 prometheus_host: prometheus.o.gempir.com
 

ansible/roles/caddy/templates/Caddyfile.j2

@@ -2,6 +2,10 @@
     reverse_proxy 127.0.0.1:3010
 }
 
+{{ yjs_host }} {
+    reverse_proxy 127.0.0.1:1234
+}
+
 {{ grafana_host }} {
     reverse_proxy 127.0.0.1:3000
 }

ansible/roles/gempbot/tasks/main.yml

@@ -29,6 +29,11 @@
     src: templates/service.j2
     dest: /etc/systemd/system/gempbot.service
 
+- name: Install Yjs Service
+  template:
+    src: templates/service-yjs.j2
+    dest: /etc/systemd/system/gempbot-yjs.service
+
 - name: Install Migrate Service
   template:
     src: templates/migrate.j2
@@ -45,3 +50,9 @@
     daemon_reload: true
     name: gempbot
     enabled: true
+
+- name: ensure yjs service is enabled
+  systemd:
+    daemon_reload: true
+    name: gempbot-yjs
+    enabled: true

ansible/roles/gempbot/templates/service-yjs.j2

@@ -0,0 +1,17 @@
+[Unit]
+Description=gempbot-yjs
+After=network.target
+StartLimitBurst=10
+
+[Service]
+Restart=always
+RestartSec=5
+ExecStart=server/yjs
+WorkingDirectory=/home/gempbot/web
+Environment=NODE_ENV=production
+Environment=YPERSISTENCE=/home/gempbot/yjs_db
+Environment=HOST=127.0.0.1
+Environment=PORT=1234
+
+[Install]
+WantedBy=multi-user.target

web/.env.development

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_BASE_URL="http://localhost:3000"
 NEXT_PUBLIC_API_BASE_URL="http://localhost:3010"
+NEXT_PUBLIC_YJS_WS_URL="ws://localhost:1234"
 NEXT_PUBLIC_TWITCH_CLIENT_ID="7ex2fcx0zjznrb3o20gl10f53ury1j"

web/.env.production

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_BASE_URL="https://bot.gempir.com"
 NEXT_PUBLIC_API_BASE_URL="https://bot-api.gempir.com"
+NEXT_PUBLIC_YJS_WS_URL="wss://bot-yjs.gempir.com"
 NEXT_PUBLIC_TWITCH_CLIENT_ID="il5oqz0li81219qvw2hs7umntr493e"

web/package.json

@@ -3,7 +3,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "yjs": "node yjs/server.js"
   },
   "type": "module",
   "dependencies": {
@@ -22,6 +23,9 @@
     "react-use-websocket": "^4.5.0",
     "seedrandom": "^3.0.5",
     "tailwindcss": "^3.4.1",
+    "y-utility": "^0.1.3",
+    "y-websocket": "^1.5.3",
+    "yjs": "^13.6.11",
     "zustand": "^3.7.2"
   },
   "devDependencies": {

web/src/components/Overlay/Editor.tsx

@@ -0,0 +1,15 @@
+import { Tldraw } from '@tldraw/tldraw';
+import '@tldraw/tldraw/tldraw.css';
+import { useYjsStore } from '../../hooks/useYjsStore';
+import { useStore } from '../../store';
+
+
+export function Editor() {
+    const yjsWsUrl = useStore(state => state.yjsWsUrl);
+    const store = useYjsStore({
+        roomId: 'example17',
+        hostUrl: yjsWsUrl,
+    });
+
+    return <Tldraw inferDarkMode store={store} />
+}

web/src/components/Overlay/OverlayPage.tsx

@@ -2,13 +2,12 @@
 
 import dynamic from 'next/dynamic';
 
-const Tldraw = dynamic(async () => (await import('@tldraw/tldraw')).Tldraw, { ssr: false })
-import '@tldraw/tldraw/tldraw.css'
+const Editor = dynamic(async () => (await import('./Editor')).Editor, { ssr: false })
 
 export function OverlayPage() {
     return (
         <div className="relative w-full">
-            <Tldraw inferDarkMode />
+            <Editor />
         </div>
     );
 }

web/src/hooks/default_store.ts

@@ -0,0 +1,141 @@
+export const DEFAULT_STORE = {
+	store: {
+		'document:document': {
+			gridSize: 10,
+			name: '',
+			meta: {},
+			id: 'document:document',
+			typeName: 'document',
+		},
+		'pointer:pointer': {
+			id: 'pointer:pointer',
+			typeName: 'pointer',
+			x: 0,
+			y: 0,
+			lastActivityTimestamp: 0,
+			meta: {},
+		},
+		'page:page': {
+			meta: {},
+			id: 'page:page',
+			name: 'Page 1',
+			index: 'a1',
+			typeName: 'page',
+		},
+		'camera:page:page': {
+			x: 0,
+			y: 0,
+			z: 1,
+			meta: {},
+			id: 'camera:page:page',
+			typeName: 'camera',
+		},
+		'instance_page_state:page:page': {
+			editingShapeId: null,
+			croppingShapeId: null,
+			selectedShapeIds: [],
+			hoveredShapeId: null,
+			erasingShapeIds: [],
+			hintingShapeIds: [],
+			focusedGroupId: null,
+			meta: {},
+			id: 'instance_page_state:page:page',
+			pageId: 'page:page',
+			typeName: 'instance_page_state',
+		},
+		'instance:instance': {
+			followingUserId: null,
+			opacityForNextShape: 1,
+			stylesForNextShape: {},
+			brush: null,
+			scribble: null,
+			cursor: {
+				type: 'default',
+				rotation: 0,
+			},
+			isFocusMode: false,
+			exportBackground: true,
+			isDebugMode: false,
+			isToolLocked: false,
+			screenBounds: {
+				x: 0,
+				y: 0,
+				w: 720,
+				h: 400,
+			},
+			zoomBrush: null,
+			isGridMode: false,
+			isPenMode: false,
+			chatMessage: '',
+			isChatting: false,
+			highlightedUserIds: [],
+			canMoveCamera: true,
+			isFocused: true,
+			devicePixelRatio: 2,
+			isCoarsePointer: false,
+			isHoveringCanvas: false,
+			openMenus: [],
+			isChangingStyle: false,
+			isReadonly: false,
+			meta: {},
+			id: 'instance:instance',
+			currentPageId: 'page:page',
+			typeName: 'instance',
+		},
+	},
+	schema: {
+		schemaVersion: 1,
+		storeVersion: 4,
+		recordVersions: {
+			asset: {
+				version: 1,
+				subTypeKey: 'type',
+				subTypeVersions: {
+					image: 2,
+					video: 2,
+					bookmark: 0,
+				},
+			},
+			camera: {
+				version: 1,
+			},
+			document: {
+				version: 2,
+			},
+			instance: {
+				version: 21,
+			},
+			instance_page_state: {
+				version: 5,
+			},
+			page: {
+				version: 1,
+			},
+			shape: {
+				version: 3,
+				subTypeKey: 'type',
+				subTypeVersions: {
+					group: 0,
+					text: 1,
+					bookmark: 1,
+					draw: 1,
+					geo: 7,
+					note: 4,
+					line: 1,
+					frame: 0,
+					arrow: 1,
+					highlight: 0,
+					embed: 4,
+					image: 2,
+					video: 1,
+				},
+			},
+			instance_presence: {
+				version: 5,
+			},
+			pointer: {
+				version: 1,
+			},
+		},
+	},
+}