diff --git a/client/src/pages/GroupPhoto/GroupPhoto.js b/client/src/pages/GroupPhoto/GroupPhoto.js
index 4699860..ebcbdbd 100644
--- a/client/src/pages/GroupPhoto/GroupPhoto.js
+++ b/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>
diff --git a/client/src/websockets.js b/client/src/websockets.js
new file mode 100644
index 0000000..6d70d52
--- /dev/null
+++ b/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)
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index 79c0027..596ebb9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -734,6 +734,15 @@
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
       "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
     },
+    "bufferutil": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.1.tgz",
+      "integrity": "sha512-xowrxvpxojqkagPcWRQVXZl0YXhRhAtBEIq3VoER1NH5Mw1n1o0ojdspp+GS2J//2gCVyrzQDApQ4unGF+QOoA==",
+      "optional": true,
+      "requires": {
+        "node-gyp-build": "~3.7.0"
+      }
+    },
     "busboy": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-0.2.14.tgz",
@@ -3413,6 +3422,12 @@
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.0.0.tgz",
       "integrity": "sha512-sSHCgWfJ+Lui/u+0msF3oyCgvdkhxDbkCS6Q8uiJquzOimkJBvX6hl5aSSA7DR1XbMpdM8r7phjcF63sF4rkKg=="
     },
+    "node-gyp-build": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-3.7.0.tgz",
+      "integrity": "sha512-L/Eg02Epx6Si2NXmedx+Okg+4UHqmaf3TNcxd50SF9NQGcJaON3AtU++kax69XV7YWz4tUspqZSAsVofhFKG2w==",
+      "optional": true
+    },
     "nodemon": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.4.tgz",
@@ -4900,6 +4915,15 @@
         "prepend-http": "^2.0.0"
       }
     },
+    "utf-8-validate": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.2.tgz",
+      "integrity": "sha512-SwV++i2gTD5qh2XqaPzBnNX88N6HdyhQrNNRykvcS0QKvItV9u3vPEJr+X5Hhfb1JC0r0e1alL0iB09rY8+nmw==",
+      "optional": true,
+      "requires": {
+        "node-gyp-build": "~3.7.0"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 2f3d4fa..382acbf 100644
--- a/package.json
+++ b/package.json
@@ -53,5 +53,9 @@
       "eslint --fix",
       "prettier --write"
     ]
+  },
+  "optionalDependencies": {
+    "bufferutil": "^4.0.1",
+    "utf-8-validate": "^5.0.2"
   }
 }