잡다한 거 다 추가

lerna.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
+  "useWorkspaces": true,
+  "version": "0.0.0"
+}

nx.json

@@ -0,0 +1,29 @@
+{
+  "tasksRunnerOptions": {
+    "default": {
+      "runner": "@nrwl/nx-cloud",
+      "options": {
+        "cacheableOperations": [
+          "build"
+        ],
+        "accessToken": "ZDcyN2U5YTctNzZjOS00MDM4LTk5YjMtYTczYTc4N2E0OGQxfHJlYWQtd3JpdGU="
+      }
+    }
+  },
+  "targetDefaults": {
+    "dev": {
+      "dependsOn": [
+        "^dev"
+      ]
+    },
+    "build": {
+      "dependsOn": [
+        "^build"
+      ],
+      "outputs": [
+        "{projectRoot}/dist"
+      ]
+    }
+  },
+  "defaultBase": "main"
+}

package.json

@@ -8,5 +8,12 @@
   "main": "index.js",
   "repository": "https://github.com/dinohan/web-chatting-example",
   "author": "dinohan",
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "lerna": "^6.5.1"
+  },
+  "devDependencies": {
+    "nx": "15.8.6",
+    "@nrwl/nx-cloud": "latest"
+  }
 }

packages/client/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@dinohan/ngrok": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "socket.io-client": "^4.6.1"

packages/client/public/service-worker.js

@@ -6,12 +6,14 @@ self.addEventListener("push", (e) => {
     console.log("@@@", data)
     self.registration.showNotification(data.title, {
         body: data.msg,
+        data,
     })
 });
 
 self.addEventListener("notificationclick", (e) => {
     e.notification.close();
+    const url = e.notification.data.url;
     e.waitUntil(
-        clients.openWindow("https://root.channel.io")
+        clients.openWindow(`/?user=${url}`)
     )
 })

packages/client/src/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import ChatRoom from './ChatRoom'
-import { SERVER_URL } from './constansts';
+import NGROK_URL from '@dinohan/ngrok'
 
 function urlBase64ToUint8Array(base64String: string) {
   const padding = '='.repeat((4 - base64String.length % 4) % 4);
@@ -16,17 +16,20 @@ function urlBase64ToUint8Array(base64String: string) {
 }
 
 const getVapidKey = async () => {
-  const response = await fetch(`${SERVER_URL}/vapidPublicKey`);
+  const response = await fetch(`${NGROK_URL.server}/vapidPublicKey`);
   const data = await response.json();
   return data.data as string;
 }
 
-const postRegister = async () => {
-  const response = await fetch(`${SERVER_URL}/register`, {
+const postRegister = async (userId: string | null) => {
+  const response = await fetch(`${NGROK_URL.server}/register`, {
     method: "POST",
     headers: {
         "content-type": "application/json",
     },
+    body: JSON.stringify({
+      userId,
+    }),
   })
   const data = await response.json()
   return data.data.id as string
@@ -51,7 +54,7 @@ const registerServiceWorker = async () => {
 }
 
 const postSubscription = async (user: string, subscription: PushSubscription) => {
-  const response = await fetch(`${SERVER_URL}/subscription`, {
+  const response = await fetch(`${NGROK_URL.server}/subscription`, {
     method: 'post',
     headers: {
       'Content-type': 'application/json'
@@ -71,7 +74,9 @@ const getUserFromQueryString = () => {
 }
 
 function App() {
-  const [user, setUser] = useState<string | null>(getUserFromQueryString)
+  const [userId, setUser] = useState<string | null>(getUserFromQueryString)
+
+  console.log(userId)
 
   const handleSetUser = (user: string) => {
     setUser(user)
@@ -80,7 +85,7 @@ function App() {
   }
 
   useEffect(() => {
-    postRegister()
+    postRegister(userId)
       .then((user) => {
         handleSetUser(user)
         registerServiceWorker()
@@ -91,12 +96,12 @@ function App() {
       })
   }, [])
 
-  if (!user) {
+  if (!userId) {
     return null
   }
 
   return (
-    <ChatRoom user={user}/>
+    <ChatRoom userId={userId}/>
   )
 }
 

packages/client/src/ChatRoom.tsx

@@ -1,21 +1,21 @@
 import React, { useState, useEffect } from 'react';
 import io from 'socket.io-client';
-import { SERVER_URL } from './constansts';
+import NGROK_URL from '@dinohan/ngrok';
 
-const socket = io(SERVER_URL, { withCredentials: true });
+const socket = io(NGROK_URL.server, { withCredentials: true });
 
 function ChatRoom({
-  user,
+  userId,
 }: {
-  user: string;
+  userId: string;
 }) {
-  const [messages, setMessages] = useState<{ user: string, msg: string }[]>([]);
+  const [messages, setMessages] = useState<{ userId: string, msg: string }[]>([]);
   const [inputValue, setInputValue] = useState('');
 
   useEffect(() => {
-    socket.on('msg', ({ user, msg }: { user: string, msg: string }) => {
-      console.log('msg', user, msg)
-      setMessages((prevMessages) => [...prevMessages, { user, msg }]);
+    socket.on('msg', ({ userId, msg }: { userId: string, msg: string }) => {
+      console.log('msg', userId, msg)
+      setMessages((prevMessages) => [...prevMessages, { userId, msg }]);
     });
 
     return () => {
@@ -26,8 +26,8 @@ function ChatRoom({
   function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     if (inputValue) {
-      socket.emit('write', { user, msg: inputValue });
-      setMessages((prevMessages) => [...prevMessages, { user, msg: inputValue }]);
+      socket.emit('write', { userId, msg: inputValue });
+      setMessages((prevMessages) => [...prevMessages, { userId, msg: inputValue }]);
       setInputValue('');
     }
   }
@@ -39,8 +39,8 @@ function ChatRoom({
   return (
     <div>
       <ul>
-        {messages.map(({ user, msg }, index) => (
-          <li key={index}>{user}: {msg}</li>
+        {messages.map(({ userId, msg }, index) => (
+          <li key={index}>{userId}: {msg}</li>
         ))}
       </ul>
       <form onSubmit={handleSubmit}>

packages/ngrok/index.cjs

@@ -0,0 +1,6 @@
+const NGROK_URL = {
+  client: 'https://d035e17593b2.ngrok.app',
+  server: 'https://5b41755ace00.ngrok.app',
+}
+
+module.exports = NGROK_URL

packages/ngrok/index.d.ts

@@ -0,0 +1,6 @@
+const NGROK_URL = {
+  client: 'https://d035e17593b2.ngrok.app',
+  server: 'https://5b41755ace00.ngrok.app',
+}
+
+export default NGROK_URL

packages/ngrok/index.js

@@ -0,0 +1,6 @@
+const NGROK_URL = {
+  client: 'https://d035e17593b2.ngrok.app',
+  server: 'https://5b41755ace00.ngrok.app',
+}
+
+export default NGROK_URL

packages/ngrok/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@dinohan/ngrok",
+  "version": "0.0.1",
+  "description": "url",
+  "main": "index.cjs",
+  "module": "index.js",
+  "types": "index.d.ts"
+}

packages/plugin/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/plugin/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

packages/plugin/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "plugin",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@dinohan/ngrok": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "socket.io-client": "^4.6.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.1.0",
+    "fs": "^0.0.1-security",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0"
+  }
+}

packages/plugin/public/manifest.json

@@ -0,0 +1,4 @@
+{
+  "display": "standalone",
+  "start_url": "/"
+}

packages/plugin/public/service-worker.js

@@ -0,0 +1,19 @@
+console.log("Service Worker Loaded...");
+
+self.addEventListener("push", (e) => {
+    const data = e.data.json();
+    console.log("Push Recieved...");
+    console.log("@@@", data)
+    self.registration.showNotification(data.title, {
+        body: data.msg,
+        data,
+    })
+});
+
+self.addEventListener("notificationclick", (e) => {
+    e.notification.close();
+    const url = e.notification.data.url;
+    e.waitUntil(
+        clients.openWindow(`/?user=${url}`)
+    )
+})