several bug fixes, and websockets!

App.vue

@@ -20,9 +20,9 @@ import { useServerStore } from './stores/servers'
 export default {
 	data() {
 		return {
-			servers: useServerStore().servers,
+			servers: storeToRefs(useServerStore()).servers,
 			activeServer: storeToRefs(useServerStore()).activeServer,
-			user: useUserStore().user
+			user: storeToRefs(useUserStore()).user
 		}
 	},
 	async setup() {

components/Nav.vue

@@ -1,8 +1,9 @@
 <template>
-	<nav class="p-4 bg-[hsl(216,calc(1*7.2%),13.5%)] grid grid-cols-1 grid-rows-[56px_1fr_56px] h-screen min-w-[88px] text-white relative">
+	<nav
+		class="p-4 bg-[hsl(216,calc(1*7.2%),13.5%)] grid grid-cols-1 grid-rows-[56px_1fr_56px] h-screen min-w-[88px] text-white relative">
 		<div>
-			<div
+			<nuxt-link to="/channel/@me">
-			@click="openServer('@me', 'dms')"
+				<div @click="openServer('@me', 'dms')"
 					class="bg-zinc-600/80 p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-zinc-500/60 duration-300">
 					<svg width="32"
 						height="32"
@@ -15,10 +16,11 @@
 							d="M12 12c2-2.96 0-7-1-8c0 3.038-1.773 4.741-3 6c-1.226 1.26-2 3.24-2 5a6 6 0 1 0 12 0c0-1.532-1.056-3.94-2-5c-1.786 3-2.791 3-4 2z" />
 					</svg>
 				</div>
+			</nuxt-link>
 		</div>
 		<div class="overflow-y-scroll my-2 flex gap-y-2 flex-col">
-			<div v-for="server in servers"
+			<nuxt-link v-for="server in servers" :to="'/channel/' + server.id">
-				:key="server.id"
+				<div :key="server.id"
 					@click="openServer(server.id, 'servers')"
 					class="bg-zinc-600/80 p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-zinc-500/60 duration-300 h-[56px] w-[56px]">
 					<svg width="32"
@@ -40,6 +42,7 @@
 							d="M128 0C93.867 0 72.533 17.067 64 51.2C76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0ZM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2c9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8Z" />
 					</svg>
 				</div>
+			</nuxt-link>
 		</div>
 		<div>
 			<div @click="createServerModelOpen = true"
@@ -102,9 +105,7 @@ export default {
 			serverStore.addServer(server)
 		},
 		openServer(id: string, type: string): void {
-			const router = useRouter();
 			useServerStore().setActive(type, id)
-			router.push({ path: `/channel/${id}` });
 		}
 	},
 	props: ['servers']

components/Sidebar.vue

@@ -1,7 +1,16 @@
 <template>
 	<div class="flex bg-[hsl(223,calc(1*6.9%),19.8%)] min-w-60 w-60 h-screen shadow-sm text-white select-none">
+		<div v-if="!server.id || server.DM == true">
+			<div>
+				<nuxt-link v-for="dm in user.channels" :to="'/channel/@me/' + dm.id">
+					<div class="mx-2 my-4 hover:bg-[hsl(223,calc(1*6.9%),25.8%)] px-2 py-2 w-[calc(240px-1rem)] max-h-10 h-10 overflow-ellipsis rounded-md transition-colors">
+						{{ (dm.name).split('-').filter((e: string) => e !== user.id)[0] }}
+					</div>
+				</nuxt-link>
+			</div>
+		</div>
 		<div class="w-full"
-			v-if="server">
+			v-else>
 			<div class="flex p-4 border-b border-zinc-600/80">
 				<h4 class="text-lg font-semibold w-fit ">
 					{{ server.name }}
@@ -29,12 +38,7 @@
 </template>
 
 <script lang="ts">
-import { useServerStore } from '~/stores/servers'
-
 export default {
-	mounted() {
-		console.log(useServerStore().currentServer, useServerStore().servers)
-	},
 	props: ['server', 'user']
 }
 </script>

package-lock.json

@@ -10,6 +10,8 @@
         "bcryptjs": "^2.4.3",
         "nuxt": "^3.0.0",
         "pinia": "^2.0.28",
+        "socket.io": "^4.5.4",
+        "socket.io-client": "^4.5.4",
         "uuid": "^9.0.0"
       },
       "devDependencies": {
@@ -1089,6 +1091,11 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -1097,6 +1104,19 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
+    },
+    "node_modules/@types/cors": {
+      "version": "2.8.13",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.13.tgz",
+      "integrity": "sha512-RG8AStHlUiV5ysZQKq97copd2UmVYw3/pRMLefISZ3S1hK104Cwm7iLQ3fTKx+lsUH2CE8FlLaYeEA2LSeqYUA==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
@@ -1472,6 +1492,18 @@
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
     },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.8.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
@@ -1785,6 +1817,14 @@
         }
       ]
     },
+    "node_modules/base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+      "engines": {
+        "node": "^4.5.0 || >= 5.9"
+      }
+    },
     "node_modules/bcryptjs": {
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
@@ -2289,6 +2329,14 @@
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
+    "node_modules/cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/cookie-es": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-0.5.0.tgz",
@@ -2299,6 +2347,18 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/crc-32": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
@@ -2775,6 +2835,86 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/engine.io": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.2.1.tgz",
+      "integrity": "sha512-ECceEFcAaNRybd3lsGQKas3ZlMVjN3cyWwMP25D2i0zWfyiytVbTpRPa34qrr+FHddtpBVOmq4H/DCv1O0lZRA==",
+      "dependencies": {
+        "@types/cookie": "^0.4.1",
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.4.1",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/engine.io-client": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.3.tgz",
+      "integrity": "sha512-aXPtgF1JS3RuuKcpSrBtimSjYvrbhKW9froICH4s0F3XQWLxsKNxqzG39nnvQZQnva4CMvUK63T7shevxRyYHw==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.5.tgz",
+      "integrity": "sha512-mjEyaa4zhuuRhaSLOdjEb57X0XPP9JEsnXI4E+ivhwT0GgzUogARx4MqoY1jQyB+4Bkz3BUOmzL7t9RMKmlG3g==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/engine.io/node_modules/ws": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.12.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
@@ -4422,6 +4562,25 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
@@ -4553,6 +4712,14 @@
         "node": "^14 || ^16 || >=18"
       }
     },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/nitropack": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/nitropack/-/nitropack-1.0.0.tgz",
@@ -6284,6 +6451,53 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/socket.io": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.4.tgz",
+      "integrity": "sha512-m3GC94iK9MfIEeIBfbhJs5BqFibMtkRk8ZpKwG2QwxV0m/eEhPIV4ara6XCF1LWNAus7z58RodiZlAH71U3EhQ==",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "debug": "~4.3.2",
+        "engine.io": "~6.2.1",
+        "socket.io-adapter": "~2.4.0",
+        "socket.io-parser": "~4.2.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-adapter": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.4.0.tgz",
+      "integrity": "sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg=="
+    },
+    "node_modules/socket.io-client": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.4.tgz",
+      "integrity": "sha512-ZpKteoA06RzkD32IbqILZ+Cnst4xewU7ZYK12aS1mzHftFFjpoMz69IuhP/nL25pJfao/amoPI527KnuhFm01g==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.2.3",
+        "socket.io-parser": "~4.2.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz",
+      "integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
@@ -6883,6 +7097,14 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/vite": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.5.tgz",
@@ -7374,6 +7596,14 @@
         }
       }
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -8253,11 +8483,29 @@
         }
       }
     },
+    "@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
     "@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
       "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="
     },
+    "@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
+    },
+    "@types/cors": {
+      "version": "2.8.13",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.13.tgz",
+      "integrity": "sha512-RG8AStHlUiV5ysZQKq97copd2UmVYw3/pRMLefISZ3S1hK104Cwm7iLQ3fTKx+lsUH2CE8FlLaYeEA2LSeqYUA==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/estree": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
@@ -8580,6 +8828,15 @@
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
     },
+    "accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "requires": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      }
+    },
     "acorn": {
       "version": "8.8.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
@@ -8793,6 +9050,11 @@
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
     },
+    "base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog=="
+    },
     "bcryptjs": {
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
@@ -9142,6 +9404,11 @@
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
+    "cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA=="
+    },
     "cookie-es": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-0.5.0.tgz",
@@ -9152,6 +9419,15 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
     "crc-32": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
@@ -9489,6 +9765,56 @@
         "once": "^1.4.0"
       }
     },
+    "engine.io": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.2.1.tgz",
+      "integrity": "sha512-ECceEFcAaNRybd3lsGQKas3ZlMVjN3cyWwMP25D2i0zWfyiytVbTpRPa34qrr+FHddtpBVOmq4H/DCv1O0lZRA==",
+      "requires": {
+        "@types/cookie": "^0.4.1",
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.4.1",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "8.2.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+          "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+          "requires": {}
+        }
+      }
+    },
+    "engine.io-client": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.3.tgz",
+      "integrity": "sha512-aXPtgF1JS3RuuKcpSrBtimSjYvrbhKW9froICH4s0F3XQWLxsKNxqzG39nnvQZQnva4CMvUK63T7shevxRyYHw==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "8.2.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+          "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+          "requires": {}
+        }
+      }
+    },
+    "engine.io-parser": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.5.tgz",
+      "integrity": "sha512-mjEyaa4zhuuRhaSLOdjEb57X0XPP9JEsnXI4E+ivhwT0GgzUogARx4MqoY1jQyB+4Bkz3BUOmzL7t9RMKmlG3g=="
+    },
     "enhanced-resolve": {
       "version": "5.12.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
@@ -10608,6 +10934,19 @@
       "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
       "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A=="
     },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
     "mimic-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
@@ -10707,6 +11046,11 @@
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
       "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg=="
     },
+    "negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="
+    },
     "nitropack": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/nitropack/-/nitropack-1.0.0.tgz",
@@ -11872,6 +12216,44 @@
       "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
       "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew=="
     },
+    "socket.io": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.5.4.tgz",
+      "integrity": "sha512-m3GC94iK9MfIEeIBfbhJs5BqFibMtkRk8ZpKwG2QwxV0m/eEhPIV4ara6XCF1LWNAus7z58RodiZlAH71U3EhQ==",
+      "requires": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "debug": "~4.3.2",
+        "engine.io": "~6.2.1",
+        "socket.io-adapter": "~2.4.0",
+        "socket.io-parser": "~4.2.1"
+      }
+    },
+    "socket.io-adapter": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.4.0.tgz",
+      "integrity": "sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg=="
+    },
+    "socket.io-client": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.4.tgz",
+      "integrity": "sha512-ZpKteoA06RzkD32IbqILZ+Cnst4xewU7ZYK12aS1mzHftFFjpoMz69IuhP/nL25pJfao/amoPI527KnuhFm01g==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.2.3",
+        "socket.io-parser": "~4.2.1"
+      }
+    },
+    "socket.io-parser": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz",
+      "integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      }
+    },
     "source-map": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
@@ -12330,6 +12712,11 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
       "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
     },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
+    },
     "vite": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.5.tgz",
@@ -12650,6 +13037,11 @@
       "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
       "requires": {}
     },
+    "xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

package.json

@@ -12,6 +12,8 @@
     "bcryptjs": "^2.4.3",
     "nuxt": "^3.0.0",
     "pinia": "^2.0.28",
+    "socket.io": "^4.5.4",
+    "socket.io-client": "^4.5.4",
     "uuid": "^9.0.0"
   },
   "devDependencies": {

pages/channel/@me/[dmId].vue

@@ -8,22 +8,12 @@
 				</div>
 				<div v-else
 					v-for="conversations in conversation">
-					<div v-if="conversations.userId == user.id"
+					<div class="message-container">
-						class="message-container"
+						<div>
-						id="messages-container">
-						<div class="message-sender">
 							<div class="message-sender-text">
-								<p class="message-sender-you">You</p>
+								<p :class="(conversations.userId == user.id) ? 'message-sender-you' : 'message-sender'">
-								<p>{{ conversations.body }}</p>
+									{{ conversations.userId }}</p>
-							</div>
+								<p class="break-words max-w-full">{{ conversations.body }}</p>
-						</div>
-					</div>
-					<div v-else
-						class="message-container">
-						<div class="message-sender">
-							<div class="message-sender-text">
-								<p class="message-sender">{{ conversations.userId }}</p>
-								<p>{{ conversations.body }}</p>
 							</div>
 						</div>
 					</div>
@@ -32,14 +22,12 @@
 		</div>
 		<div class="conversation-input w-[calc(100vw-88px-240px)]">
 			<form @submit.prevent="sendMessage"
+				@keydown.enter="sendMessage"
 				class="relative px-4 w-full">
-				<div
+				<div id="textbox"
-					id="textbox"
 					class="px-4 rounded-md w-full h-[44px] bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[hsl(218,calc(1*4.6%),46.9%)] flex flex-row">
-					<textarea
+					<textarea type="text"
-						type="text"
 						id="messageBox"
-						style="position: relative; outline: none; white-space: pre-wrap; overflow-wrap: break-word;"
 						class="bg-transparent focus:outline-none py-2 w-full resize-none leading-relaxed"
 						v-model="messageContent"
 						placeholder="Send a Message..." />
@@ -47,7 +35,8 @@
 						class="absolute -top-full -left-full invisible"
 						id="submit">
 					<label for="submit"
-						class="py-1 px-1.5 h-fit my-auto"><svg width="32"
+						class="py-1 px-1.5 h-fit my-auto cursor-pointer"
+						role="button"><svg width="32"
 							height="32"
 							viewBox="0 0 24 24">
 							<path fill="none"
@@ -65,6 +54,7 @@
 
 <script lang="ts">
 import { useServerStore } from '~/stores/servers'
+import { io } from 'socket.io-client'
 
 export default {
 	data() {
@@ -80,13 +70,43 @@ export default {
 		useServerStore().addDM(server);
 		await useServerStore().setActive('dms', server.id);
 
-		const conversation: Array<Record<string, unknown>> = server.messages
+		const conversation: Array<Record<string, unknown>> = ref(server.messages)
 
 		return {
 			server,
-			conversation
+			conversation,
 		}
 	},
+	mounted() {
+		const route = useRoute()
+		const socket = io();
+
+		const conversationDiv = document.getElementById('conversation-pane');
+		if (!conversationDiv) throw new Error('wtf');
+		setTimeout(() => {
+			conversationDiv.scrollTop = conversationDiv.scrollHeight;
+		})
+
+		socket.on('connect', () => {
+			// listen for messages from the server
+			socket.on(`message-${route.params.dmId}`, (ev) => {
+				const { message } = ev
+				console.log(message.userId, this.user.id, message, this.conversation)
+				if (message.userId == this.user.id) return;
+
+				this.conversation.push(message)
+
+				const lastElementChild = conversationDiv.children[0]?.lastElementChild
+				if (!lastElementChild) return;
+
+				setTimeout(() => {
+					console.log(conversationDiv.scrollTop, conversationDiv.scrollHeight, conversationDiv.clientHeight, lastElementChild.clientHeight, (conversationDiv.scrollHeight - conversationDiv.clientHeight) - lastElementChild.clientHeight)
+					if (conversationDiv.scrollTop + 11.2 < (conversationDiv.scrollHeight - conversationDiv.clientHeight) - lastElementChild.clientHeight) return;
+					conversationDiv.scrollTop = conversationDiv.scrollHeight;
+				})
+			})
+		});
+	},
 	async updated() {
 		if (!useServerStore().activeServer == this.server) await useServerStore().setActive('dms', this.server.id)
 	},
@@ -99,6 +119,11 @@ export default {
 
 			this.conversation.push(message)
 			this.messageContent = '';
+			const conversationDiv = document.getElementById('conversation-pane');
+			if (!conversationDiv) throw new Error('wtf');
+			setTimeout(() => {
+				conversationDiv.scrollTop = conversationDiv.scrollHeight;
+			})
 		},
 		// resizeTextarea() {
 		// 	const textArea = document.getElementById('messageBox')

pages/channel/[id].vue

@@ -9,7 +9,7 @@ export default {
 	async setup() {
 		const route = useRoute()
 
-		const { server } = await $fetch(`/api/channels/${route.params.id}`)
+		const { server } = await $fetch(`/api/guilds/${route.params.id}`)
 		if (!server) return;
 		useServerStore().addServer(server);
 		await useServerStore().setActive('servers', server.id)

pages/test.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { io } from 'socket.io-client'
+
+const connected = ref(false)
+
+onMounted(() => {
+  const socket = io();
+
+  socket.on('connect', () => {
+    connected.value = socket.connected
+  });
+
+  socket.on('disconnect', () => {
+    connected.value = socket.connected
+  });
+})
+</script>
+
+<template>
+  <div>Connected: {{ connected }}</div>
+</template>

prisma/schema.prisma

@@ -16,8 +16,7 @@ model User {
   serverId     String?
   messages     Message[]
   session      Session[]
-  Channel      Channel?  @relation(fields: [channelId], references: [id])
+  channels     Channel[]
-  channelId    String?
 }
 
 model Server {

server/api/channels/[id]/index.get.ts

@@ -2,9 +2,11 @@ import { PrismaClient } from '@prisma/client'
 const prisma = new PrismaClient()
 
 export default defineEventHandler(async (event) => {
-	if (!event.context.user.authenticated) return {
+	if (!event.context.user.authenticated) {
+		return {
 			message: 'You must be logged in to view a channel.'
 		}
+	}
 
 	if (!event.context.params.id) {
 		event.node.res.statusCode = 400;
@@ -19,6 +21,7 @@ export default defineEventHandler(async (event) => {
 		},
 		include: {
 			messages: true,
+			dmParticipants: true
 		}
 	})
 
@@ -45,7 +48,7 @@ export default defineEventHandler(async (event) => {
 		if (!userInServer) {
 			event.node.res.statusCode = 401;
 			return {
-				message: `You mus be in the server to access a channel in that server`
+				message: `You must be in the server to access a channel in that server`
 			}
 		}
 	}

server/api/channels/createDM.post.ts

@@ -53,7 +53,7 @@ export default defineEventHandler(async (event) => {
 
 	const server = await prisma.channel.create({
 		data: {
-			name: `${user.username}-${partner.username}`,
+			name: `${user.id}-${partner.id}`,
 			dmParticipants: { connect: [{ id: event.context.user.id }, { id: partner.id }] },
 			DM: true
 		},

server/api/channels/sendMessage.post.ts

@@ -1,6 +1,10 @@
 import { PrismaClient } from '@prisma/client'
 const prisma = new PrismaClient()
 
+declare global {
+	var io: Server | undefined
+}
+
 export default defineEventHandler(async (event) => {
 	if (!event.context.user.authenticated) {
 		event.node.res.statusCode = 401;
@@ -27,8 +31,6 @@ export default defineEventHandler(async (event) => {
 		}
 	})
 
-	console.log(channel)
-
 	if (!channel.DM) {
 		const server = await prisma.server.findFirst({
 			where: {
@@ -78,9 +80,14 @@ export default defineEventHandler(async (event) => {
 					id: channelId
 				}
 			}
+		},
+		include: {
+			creator: true
 		}
 	})
 
+	global.io.emit(`message-${channel.id}`, { message });
+
 	return {
 		message
 	}

server/api/getCurrentUser.get.ts

@@ -2,7 +2,7 @@ import { PrismaClient } from '@prisma/client'
 const prisma = new PrismaClient()
 
 export default defineEventHandler(async (event) => {
-	if (event.context.user === undefined || event.context.user.id === undefined) {
+	if (!event.context.user.authenticated) {
 		// event.node.res.statusCode = 401;
 		return {
 			message: "Unauthenticated"
@@ -12,6 +12,9 @@ export default defineEventHandler(async (event) => {
 	const user = await prisma.user.findFirst({
 		where: {
 			id: event.context.user.id
+		},
+		include: {
+			channels: true
 		}
 	})
 

server/middleware/socket.ts

@@ -0,0 +1,14 @@
+// server/middleware/socket.ts
+import { Server } from 'socket.io'
+
+declare global {
+  var io: Server | undefined
+}
+
+export default defineEventHandler(({ node }) => {
+  if (!global.io) {
+    global.io = new Server(node.res.socket?.server);
+
+    global.io.on('connection', (socket) => { })
+  }
+})

stores/servers.ts

@@ -6,7 +6,7 @@ export const useServerStore = defineStore('server', {
   }),
   actions: {
     addServer(server) {
-      if (this.servers.includes(server)) return;
+      if (this.servers.find((e) => e.id === server.id)) return;
       this.servers.push(server)
     },
     addDM(server) {
@@ -14,6 +14,10 @@ export const useServerStore = defineStore('server', {
       this.dms.push(server)
     },
     setActive(type, serverId) {
+      if (serverId === '@me') {
+        this.activeServer = {}
+        return;
+      }
       this.activeServer = this[type].find((e) => e.id === serverId)
     },
   },