abstract websockets a bit

client/src/pages/GroupPhoto/GroupPhoto.js

@@ -2,17 +2,9 @@ import React, { useEffect, useState } from 'react'
 import Button from '../../components/Button'
 import Page from '../../components/Page'
 import { downloadFromS3 } from '../../utils/download'
+import { onWsEvent } from '../../websockets'
 import './GroupPhoto.css'
 
-const HOST = window.location.origin
-  .replace(/^http/, 'ws')
-  .replace('3000', '3001')
-const ws = new WebSocket(HOST)
-
-// `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://${
-//   window.location.hostname
-// }:${process.env.PORT || 3001}`,
-
 const GroupPhoto = () => {
   const [isLoading, setIsLoading] = useState(true)
   const [isGenerating, setIsGenerating] = useState(false)
@@ -42,16 +34,14 @@ const GroupPhoto = () => {
 
   useEffect(() => {
     getGroupPhoto()
-    ws.onmessage = (event) => {
-      const data = JSON.parse(event.data)
-      if (data.id !== 'group-photo') return
+    onWsEvent('group-photo', (data) => {
       if (data.status === 200) {
         setFile(data.data)
       } else {
         console.log(data.message, data.error)
       }
       setIsGenerating(false)
-    }
+    })
   }, [])
 
   const header = <h1>Create Group Photo</h1>

client/src/websockets.js

@@ -0,0 +1,12 @@
+const HOST = window.location.origin.replace(/^http/, 'ws')
+
+if (process.env.NODE_ENV === 'development') HOST.replace('3000', '3001')
+
+export const ws = new WebSocket(HOST)
+
+export const onWsEvent = (eventId, callback) => {
+  ws.onmessage = (event) => {
+    const data = JSON.parse(event.data)
+    if (data.id === eventId) callback(data)
+  }
+}

package.json

@@ -53,5 +53,9 @@
       "eslint --fix",
       "prettier --write"
     ]
+  },
+  "optionalDependencies": {
+    "bufferutil": "^4.0.1",
+    "utf-8-validate": "^5.0.2"
   }
 }