채팅 앱 구현

packages/certs/ca.crt

@@ -0,0 +1,21 @@
+-----BEGIN CERTIFICATE-----
+MIIDXjCCAkagAwIBAgIFODUwODUwDQYJKoZIhvcNAQELBQAwXjEQMA4GA1UEAxMH
+VGVzdCBDQTELMAkGA1UEBhMCVVMxEzARBgNVBAgTCkNhbGlmb3JuaWExFjAUBgNV
+BAcTDVNhbiBGcmFuY2lzY28xEDAOBgNVBAoTB1Rlc3QgQ0EwHhcNMjMwMzEzMTQx
+MzIxWhcNMjQwMzEyMTQxMzIxWjBeMRAwDgYDVQQDEwdUZXN0IENBMQswCQYDVQQG
+EwJVUzETMBEGA1UECBMKQ2FsaWZvcm5pYTEWMBQGA1UEBxMNU2FuIEZyYW5jaXNj
+bzEQMA4GA1UEChMHVGVzdCBDQTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoC
+ggEBAPlqUUvKe6NtMnkVPK+VUtTuE5rTh/VdIXpDOSTs6xyObJJkc9pVvuwh9NBE
+AOrjoFL6wbuqQKVNVsBpWOTNoII8NHXF5rmAug5FXXIAqLiI5uGvzvMg2fxgVzj4
+1FbW9c5ABpZKnC0zOT5KsZ9souRorJTZk3UOX/YiAkdtiolkjK3pPjkNjn0rOFjC
+E9cOJtwdgseFXOyBaJq0YXWVYVLm4ke+0ND0wl9cmpBrmLsDGYVyWNTctZWBbgoc
+o3Am1greu568FPIgMZVM+l+SYcNfBlJ/IbdZlN2fymg6odvKZkzZYGL8PtwqrHwA
+sje9r0plCW2/IfX+yzZjzwvbMl8CAwEAAaMjMCEwDwYDVR0TAQH/BAUwAwEB/zAO
+BgNVHQ8BAf8EBAMCAgQwDQYJKoZIhvcNAQELBQADggEBANL05ypQVGxCSSk4PCe5
+Oyf5vez3/k5f+iYIf46PMGLogHUNB7xfmT6bJzvPbFdvZhEixgBd0jPQseyMFD9O
+xvuT3jA567ERp3q8YPF7bJzYxWZN1jhlopN2NA4jTdFQIUhjycfDHJzi/KIj6RJD
+cNLL7UgR2gm5RBs7wb7dDATi7WbIM3CLkmgQR7ovV/4sWPVkecLkUVx92CvVQNCK
+4eyaysPS0YpXb7frT2Du8pg3q0j9JCC8U53zvou/EPFM58j1tZGWFWY/MvEKvPVv
+V6qPqbpKWRyxED+mE3fi/k+5spf0bMjqKuv6ZJ3FWG+VakmlroICZRdw4MOQqeg3
+T3Y=
+-----END CERTIFICATE-----

packages/certs/ca.key

@@ -0,0 +1,27 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIIEpQIBAAKCAQEA+WpRS8p7o20yeRU8r5VS1O4TmtOH9V0hekM5JOzrHI5skmRz
+2lW+7CH00EQA6uOgUvrBu6pApU1WwGlY5M2ggjw0dcXmuYC6DkVdcgCouIjm4a/O
+8yDZ/GBXOPjUVtb1zkAGlkqcLTM5Pkqxn2yi5GislNmTdQ5f9iICR22KiWSMrek+
+OQ2OfSs4WMIT1w4m3B2Cx4Vc7IFomrRhdZVhUubiR77Q0PTCX1yakGuYuwMZhXJY
+1Ny1lYFuChyjcCbWCt67nrwU8iAxlUz6X5Jhw18GUn8ht1mU3Z/KaDqh28pmTNlg
+Yvw+3CqsfACyN72vSmUJbb8h9f7LNmPPC9syXwIDAQABAoIBAQDkmhHRSdFwxRFR
+8akhtdep2lyVt/QRbD7W9O5Xbd9A2TmiI/gb0iOgAq+EhA/jOqcj5znSbAW8fNpa
+mTQk4mOPeucKW01SES53DhTL/Nan7LLRgHZKWX3y18qaKVdWEMhTNlPTRKdItn5t
+HcEXwla6y0YDWDjTPU2vJxS3qysjKPqf7v4eM9/83ZC266tUiY6XdSn7oHlHkjsG
+AdySyMmc4VtK87h9jqTWbBgXQ1XTfXpTJYZFWPojcq6srS4BJC0fnAYjb9uUMa9M
+UySuG8i5mKEvTW9uCuC5IafBFD7W6KnKFmqxgt89Axmc9DH0ZzM7l83Rl27CkNcl
+IGJQRstBAoGBAP6SdkboOUZR00ChDm5coUCw5Ly/uP4iMb3IwQyJkZ4WJULFRQJo
+nOzWhvyWRG+cU6MRrQCozwH2dtikiX16WF6rGTWr9B6kAsdxxrXBe/tohyQipos2
+FltKMx2wge+N+PUmYPxMKaZYX4oQl9oB/6jE9h9Z5oRq1/jGa5baJaOXAoGBAPrQ
+c29F150lrWKaNUyGN+cRacLxB5bBq5exJcxEhMrVVaCdzpFsfUKH29iA4W6tlEgQ
+UTqZiOeumiFXV0Q+UQ5ueoHpEpl/yRVjScee/TEX0wwbSvbGBZHl7Gx4u0VgAoBT
+5owvUCEU4/pxfNzg288JiYlLNen+DW5lKeF9EiB5AoGAK7EXe7P/oIIKr9z0jRx4
+0JGLsJl3NqbHwrrh5zT1ORyz6HHTFka+KCfpoxBnToCWGja+ao6OeNfELgqPTmnh
+IN5cxUlt7JRZpcFxSWCb1tpp11nbG6l8zM4/V6kjo+nKAMlFfAfWXiZsv1V5uoD9
+UAn99AOJ/NAZoSjs7kcijqECgYEAgkrZPJu+l18kRA2x1HABCGNOWruVYqZ3OlUH
+Oqb5iNjsI4T28yq1o2MqPL0u3q0DU7BOUi/CJADbBqj1p3jr6KBRubzXMbBlSFwM
+zstz4hXrR+XBupJCAHm9qNfLCQ4IHpv3LynA6X6Ns+NSpveUmGfu78iHWGfmmEur
+Rv0O9pkCgYEA1UBiyVlJbqBbQqgd+XpJEGGVNA9Yw8S7wznlbrJipzSoA9H9kZSZ
+QI3hEmJG1SXCFuYFk0WfVxgWEPy7YS6hT3b0IHiVPdInI8ewPYVyCPhInSPZQRO4
+6L1pR6TeGIx3gM7NPZMFJ9hUAarCnLWXwRX/tpxH17yqtGwdoalA4ZI=
+-----END RSA PRIVATE KEY-----

packages/certs/cert.crt

@@ -0,0 +1,42 @@
+-----BEGIN CERTIFICATE-----
+MIIDTDCCAjSgAwIBAgIFNzcxODIwDQYJKoZIhvcNAQELBQAwXjEQMA4GA1UEAxMH
+VGVzdCBDQTELMAkGA1UEBhMCVVMxEzARBgNVBAgTCkNhbGlmb3JuaWExFjAUBgNV
+BAcTDVNhbiBGcmFuY2lzY28xEDAOBgNVBAoTB1Rlc3QgQ0EwHhcNMjMwMzEzMTQx
+MzU2WhcNMjQwMzEyMTQxMzU2WjAUMRIwEAYDVQQDEwlsb2NhbGhvc3QwggEiMA0G
+CSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDRvcBRTbnqPoZ6EsRaPin9K8S0+cPC
+qlizJAjpy2pb9GxApyT/ioohi83yV6SEjmR9YFhWiw/NLGd+HvVOykdz7kSNjIw/
+G6WPTxCZNfDQm6V7hV5OZc/HAL0sONljwDoeut1Q/FPt964JG9tyq0bGXGztuUSv
+7yqZReSk9zqLiETFhoN9w28IkNRYHzBlT5fwitV/dO5jhNzmuFXt84SRjYgnZQfr
+rV4ghqp4Re++iRKD8tXmtkbgsITWtrKJVxkHckhKTckcQob2UEo93BhRMa28hfpg
+fGyMg+JQqmpjXj9w+rGGyFPP6sF6F7QohkEAGJ5hN095k0E+iIulORKbAgMBAAGj
+WzBZMAwGA1UdEwEB/wQCMAAwDgYDVR0PAQH/BAQDAgWgMB0GA1UdJQQWMBQGCCsG
+AQUFBwMBBggrBgEFBQcDAjAaBgNVHREEEzARgglsb2NhbGhvc3SHBH8AAAEwDQYJ
+KoZIhvcNAQELBQADggEBALoysUNK5r+dLxWn6jOOWS4rfha/59b8rjmE314tBMM7
+a5tDVOPGsfpZ+6MpJaLdVHr5EAFO/KL8Y0kD+GjsBhWz1KeXI5L7aX+EYhF5CUb1
+n0+rWaFGfWf5iBCFtyGLnZX58OEBdwhXimaGZdaShidwEl6phW1ec/QAOFfVXiRV
+Y2+S+gjG3VIpkJVBrZKPA9JOrkpMjQbMLLNq6yNW6TAYUYj0A31VkZzN//8T0U/o
+axs2aQyTu/L2oXzaHLHdgybEgcYx2DkyenYUKkjENs2kYPIdjsAG1yAQEdRlJ5xZ
+wav4LqiGJkfjjjci/4pmiJh0VKIc9P4qRrwxHJrEQZM=
+-----END CERTIFICATE-----
+
+-----BEGIN CERTIFICATE-----
+MIIDXjCCAkagAwIBAgIFODUwODUwDQYJKoZIhvcNAQELBQAwXjEQMA4GA1UEAxMH
+VGVzdCBDQTELMAkGA1UEBhMCVVMxEzARBgNVBAgTCkNhbGlmb3JuaWExFjAUBgNV
+BAcTDVNhbiBGcmFuY2lzY28xEDAOBgNVBAoTB1Rlc3QgQ0EwHhcNMjMwMzEzMTQx
+MzIxWhcNMjQwMzEyMTQxMzIxWjBeMRAwDgYDVQQDEwdUZXN0IENBMQswCQYDVQQG
+EwJVUzETMBEGA1UECBMKQ2FsaWZvcm5pYTEWMBQGA1UEBxMNU2FuIEZyYW5jaXNj
+bzEQMA4GA1UEChMHVGVzdCBDQTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoC
+ggEBAPlqUUvKe6NtMnkVPK+VUtTuE5rTh/VdIXpDOSTs6xyObJJkc9pVvuwh9NBE
+AOrjoFL6wbuqQKVNVsBpWOTNoII8NHXF5rmAug5FXXIAqLiI5uGvzvMg2fxgVzj4
+1FbW9c5ABpZKnC0zOT5KsZ9souRorJTZk3UOX/YiAkdtiolkjK3pPjkNjn0rOFjC
+E9cOJtwdgseFXOyBaJq0YXWVYVLm4ke+0ND0wl9cmpBrmLsDGYVyWNTctZWBbgoc
+o3Am1greu568FPIgMZVM+l+SYcNfBlJ/IbdZlN2fymg6odvKZkzZYGL8PtwqrHwA
+sje9r0plCW2/IfX+yzZjzwvbMl8CAwEAAaMjMCEwDwYDVR0TAQH/BAUwAwEB/zAO
+BgNVHQ8BAf8EBAMCAgQwDQYJKoZIhvcNAQELBQADggEBANL05ypQVGxCSSk4PCe5
+Oyf5vez3/k5f+iYIf46PMGLogHUNB7xfmT6bJzvPbFdvZhEixgBd0jPQseyMFD9O
+xvuT3jA567ERp3q8YPF7bJzYxWZN1jhlopN2NA4jTdFQIUhjycfDHJzi/KIj6RJD
+cNLL7UgR2gm5RBs7wb7dDATi7WbIM3CLkmgQR7ovV/4sWPVkecLkUVx92CvVQNCK
+4eyaysPS0YpXb7frT2Du8pg3q0j9JCC8U53zvou/EPFM58j1tZGWFWY/MvEKvPVv
+V6qPqbpKWRyxED+mE3fi/k+5spf0bMjqKuv6ZJ3FWG+VakmlroICZRdw4MOQqeg3
+T3Y=
+-----END CERTIFICATE-----

packages/certs/cert.key

@@ -0,0 +1,27 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIIEowIBAAKCAQEA0b3AUU256j6GehLEWj4p/SvEtPnDwqpYsyQI6ctqW/RsQKck
+/4qKIYvN8lekhI5kfWBYVosPzSxnfh71TspHc+5EjYyMPxulj08QmTXw0Jule4Ve
+TmXPxwC9LDjZY8A6HrrdUPxT7feuCRvbcqtGxlxs7blEr+8qmUXkpPc6i4hExYaD
+fcNvCJDUWB8wZU+X8IrVf3TuY4Tc5rhV7fOEkY2IJ2UH661eIIaqeEXvvokSg/LV
+5rZG4LCE1rayiVcZB3JISk3JHEKG9lBKPdwYUTGtvIX6YHxsjIPiUKpqY14/cPqx
+hshTz+rBehe0KIZBABieYTdPeZNBPoiLpTkSmwIDAQABAoIBABTyP0+fVI7ZObLd
+RvDAPo9DHLz6KJu7SWpykdVPdErEqT73slE2876P6LxoFk0Kr2x5/7h84NIbuiY1
+T0hUGTixtfTw8VyoFSuvuLekVG1w7eDdG+L2df6oyzusXcGBhAxnmwyodnVQg/fy
+6UKValcLCfHfy8VKPFXcTg5PhnBCuFNLPMadL3TJAzoxksvkL2/LH/d5rIWGIrIi
+7tJHutkOadtMDCKgwdGR8CdaW2vDqkkjQ9ysQmF5EoCWwxpoZtq9/jn7J+UeV9xd
+E29cjB215zcD6QJqW0gCbdLME36veXFWGAOcafA0ASHgwtKReakTCxonCIVrYKgK
+zxvXL1ECgYEA8ETLYwjKFaMSMFdUEdBQkOqB/OmGEvf73pDe7xmodths7vo+Ozk5
+L7RiKLpUN62VLui8WnpeGyzXxsRkgZxLoSufQBRgoNhvBI3+KzQ3/l/zsa4LcIFQ
+K/ALxBc2mgkl+XpE+16ORYjvDNwBrXRDKjDlij0RE/zTdzy8mXXHSKkCgYEA33lG
+/r8ippG2zr8XCi9/HMWNkZITJ6UpyCbtWfPWIyp4D23Fd60jeNffITKZzMqzbXN9
+oVOyrZIm5JKkp7U/rMYpR39yCCRKiJlVOBeu/tON0Z8J2cTBt9rd+h0PR6iu8Ivo
+d7QyzFiqN+NcXVQRy/aPQ1gMUAsgocgV54Vdt6MCgYEA6QRfF/njOx6+uiFHiEs2
+h4TXcjfsbqMQI2buvoZsym3VH+OTzQ4PNwPDGuqyWJlBEJBoc3svnz1bOwsmykiR
+VIqg1J2upO+io5EuCiqHj2zxQ8WelIrk/Oe+EXvN2Y+7w3rgQcUPR8KozBjmi5kw
+tk9bnjjhQjg1wfMmmdIO5pkCgYBydayOSBmYVSPbyvYjCmbBttGm0Lms4aR/1qhV
+HVX9lv/9bwzoGi8D8xVe7Irn4J58Hd4n5jWrPyNaiV16ZJQjiy+TZkxirSvbwSVr
+4H2KGZMW3a1u858A60Ism/u6iURpAk/kF9C452Tv0Sz6xFeFL1j7djqAOOLS2ieV
++LIinwKBgDt70h4x5smmW4dPwDNns7pzbgeKdcBtqPFbsHPKMMizKG5qmIhsHeur
+LiUWMe9PuB/6WAI9knO3S4ku46NqkgbnNP5jRPoVuIk4EpmdqPZG0+hqaptCL5Is
+k+Uwg8ZEOSdyyYn9h/hbSMij1cyiL6GX+fXYq+JMUx7qFXBClez7
+-----END RSA PRIVATE KEY-----

packages/client/index.html

@@ -4,6 +4,7 @@
     <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>

packages/client/package.json

@@ -17,6 +17,7 @@
     "@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/client/public/manifest.json

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

packages/client/public/service-worker.js

@@ -0,0 +1,17 @@
+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,
+    })
+});
+
+self.addEventListener("notificationclick", (e) => {
+    e.notification.close();
+    e.waitUntil(
+        clients.openWindow("https://root.channel.io")
+    )
+})

packages/client/src/App.tsx

@@ -1,8 +1,88 @@
+import { useEffect, useState } from 'react'
 import ChatRoom from './ChatRoom'
+import { SERVER_URL } from './constansts';
+
+function urlBase64ToUint8Array(base64String: string) {
+  const padding = '='.repeat((4 - base64String.length % 4) % 4);
+  const base64 = (base64String + padding)
+    .replace(/\-/g, '+')
+    .replace(/_/g, '/');
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+}
+
+function getVapidKey() {
+  return fetch(`${SERVER_URL}/vapidPublicKey`).then(response => {
+    return response.json()
+  }).then(data => {
+    return data.data
+  })
+}
 
 function App() {
+  const [user, setUser] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    fetch(`${SERVER_URL}/register`, {
+      method: "POST",
+      headers: {
+          "content-type": "application/json",
+      },
+    }).then(response => {
+      return response.json()
+    }).then(data => {
+      setUser(data.data.id)
+      return data.data.id
+    }).then((user) => {
+      if ('serviceWorker' in navigator && 'PushManager' in window) {
+        navigator.serviceWorker.register('/service-worker.js')
+          .then(function(registration) {
+            return registration.pushManager.getSubscription()
+              .then(async function(subscription) {
+                // if (subscription) {
+                //   return subscription;
+                // }
+
+                const vapidPublicKey = await getVapidKey()
+                const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);
+
+                return registration.pushManager.subscribe({
+                  userVisibleOnly: true,
+                  applicationServerKey: convertedVapidKey
+                });
+              });
+          })
+          .then((subscription) => {
+            console.log(subscription)
+            fetch(`${SERVER_URL}/subscription`, {
+              method: 'post',
+              headers: {
+                'Content-type': 'application/json'
+              },
+              body: JSON.stringify({
+                user: user,
+                subscription: subscription
+              }),
+            });
+          });
+      }
+    })
+  }, [])
+
+  useEffect(() => {
+
+  }, [])
+
+  if (!user) {
+    return null
+  }
+
   return (
-    <ChatRoom />
+    <ChatRoom user={user}/>
   )
 }
 

packages/client/src/ChatRoom.tsx

@@ -1,10 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import io from 'socket.io-client';
+import { SERVER_URL } from './constansts';
 
-const socket = io('http://localhost:3000', { withCredentials: true });
+const socket = io(SERVER_URL, { withCredentials: true });
 
-function ChatRoom() {
-  const [user] = useState(() => `user-${Math.floor(Math.random() * 1000)}`)
+function ChatRoom({
+  user,
+}: {
+  user: string;
+}) {
   const [messages, setMessages] = useState<{ user: string, msg: string }[]>([]);
   const [inputValue, setInputValue] = useState('');
 

packages/client/src/constansts.ts

@@ -0,0 +1 @@
+export const SERVER_URL = 'https://5b41755ace00.ngrok.app'

packages/client/vite.config.ts

@@ -1,7 +1,17 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import fs from 'fs';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  server: {
+    https: {
+      key: fs.readFileSync('../certs/cert.key'),
+      cert: fs.readFileSync('../certs/cert.crt'),
+    },
+    host: true,
+  },
+  plugins: [
+    react(),
+  ],
 })

packages/server/package.json

@@ -4,20 +4,28 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "start": "node dist/app.js",
+    "start": "node dist/src/main.js",
     "build": "tsc -p .",
     "dev": "nodemon --watch \"src/**/*.ts\" --exec \"ts-node\" src/main.ts"
   },
   "dependencies": {
+    "cors": "^2.8.5",
     "express": "4",
+    "http": "^0.0.1-security",
+    "http2": "^3.3.7",
+    "http2-express-bridge": "^1.0.7",
+    "nanoid": "^4.0.1",
     "nodemon": "^2.0.21",
+    "querystring": "^0.2.1",
     "socket.io": "^4.6.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "web-push": "^3.5.0"
   },
   "devDependencies": {
     "@types/express": "^4.17.17",
     "@types/node": "^18.15.1",
-    "@types/socket.io": "^3.0.2"
+    "@types/socket.io": "^3.0.2",
+    "@types/web-push": "^3.3.2"
   }
 }