From cee635ff1db9ba7c9212547831287efe56c69a1f Mon Sep 17 00:00:00 2001
From: jdlugosz963 <jdlugosz963@gmail.com>
Date: Wed, 15 Dec 2021 22:43:23 +0100
Subject: add working groups sender

---
 package-lock.json                    | 221 +++++++++++++++++++++++++++++++++--
 package.json                         |   2 +-
 src/components/group/GroupSender.vue |  22 +++-
 src/components/group/Message.vue     |  10 +-
 src/store/index.js                   |   4 +
 src/views/Home.vue                   |  17 ++-
 vue.config.js                        |  10 ++
 7 files changed, 271 insertions(+), 15 deletions(-)
 create mode 100644 vue.config.js

diff --git a/package-lock.json b/package-lock.json
index 66d32bf..59cfb94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "axios": "^0.24.0",
         "core-js": "^3.6.5",
+        "socket.io-client": "^4.1.3",
         "v-hotkey": "^0.9.0",
         "vue": "^2.6.11",
         "vue-notification": "^1.3.20",
@@ -1749,6 +1750,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/component-emitter": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz",
+      "integrity": "sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ=="
+    },
     "node_modules/@types/connect": {
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -3153,6 +3159,11 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/backo2": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3189,6 +3200,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz",
+      "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -4329,8 +4348,7 @@
     "node_modules/component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
-      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
-      "dev": true
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
     },
     "node_modules/compressible": {
       "version": "2.0.18",
@@ -5124,7 +5142,6 @@
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
       "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -5724,6 +5741,53 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/engine.io-client": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-5.1.2.tgz",
+      "integrity": "sha512-blRrgXIE0A/eurWXRzvfCLG7uUFJqfTGFsyJzXSK71srMMGJ2VraBLg8Mdw28uUxSpVicepBN9X7asqpD1mZcQ==",
+      "dependencies": {
+        "base64-arraybuffer": "0.1.4",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~4.0.1",
+        "has-cors": "1.1.0",
+        "parseqs": "0.0.6",
+        "parseuri": "0.0.6",
+        "ws": "~7.4.2",
+        "yeast": "0.1.2"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
+      "engines": {
+        "node": ">=8.3.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": "4.0.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-4.0.3.tgz",
+      "integrity": "sha512-xEAAY0msNnESNPc00e19y5heTPX4y/TJ36gr8t1voOaNmTojP9b3oK3BbJLFufW2XFPQaaijpFewm2g2Um3uqA==",
+      "dependencies": {
+        "base64-arraybuffer": "0.1.4"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",
@@ -7152,6 +7216,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-cors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
+      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
+    },
     "node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -9284,8 +9353,7 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/multicast-dns": {
       "version": "6.2.3",
@@ -10126,6 +10194,16 @@
       "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
       "dev": true
     },
+    "node_modules/parseqs": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
+      "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w=="
+    },
+    "node_modules/parseuri": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
+      "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow=="
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -12264,6 +12342,36 @@
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
       "dev": true
     },
+    "node_modules/socket.io-client": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.1.3.tgz",
+      "integrity": "sha512-hISFn6PDpgDifVUiNklLHVPTMv1LAk8poHArfIUdXa+gKgbr0MZbAlquDFqCqsF30yBqa+jg42wgos2FK50BHA==",
+      "dependencies": {
+        "@types/component-emitter": "^1.2.10",
+        "backo2": "~1.0.2",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1",
+        "engine.io-client": "~5.1.2",
+        "parseuri": "0.0.6",
+        "socket.io-parser": "~4.0.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz",
+      "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==",
+      "dependencies": {
+        "@types/component-emitter": "^1.2.10",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/sockjs": {
       "version": "0.3.21",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.21.tgz",
@@ -15225,6 +15333,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/yeast": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
+      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
+    },
     "node_modules/yorkie": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/yorkie/-/yorkie-2.0.0.tgz",
@@ -16510,6 +16623,11 @@
         "@types/node": "*"
       }
     },
+    "@types/component-emitter": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz",
+      "integrity": "sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ=="
+    },
     "@types/connect": {
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -17683,6 +17801,11 @@
         "@babel/helper-define-polyfill-provider": "^0.2.4"
       }
     },
+    "backo2": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -17715,6 +17838,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz",
+      "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI="
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -18656,8 +18784,7 @@
     "component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
-      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
-      "dev": true
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
     },
     "compressible": {
       "version": "2.0.18",
@@ -19299,7 +19426,6 @@
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
       "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
-      "dev": true,
       "requires": {
         "ms": "2.1.2"
       }
@@ -19779,6 +19905,38 @@
         "once": "^1.4.0"
       }
     },
+    "engine.io-client": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-5.1.2.tgz",
+      "integrity": "sha512-blRrgXIE0A/eurWXRzvfCLG7uUFJqfTGFsyJzXSK71srMMGJ2VraBLg8Mdw28uUxSpVicepBN9X7asqpD1mZcQ==",
+      "requires": {
+        "base64-arraybuffer": "0.1.4",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~4.0.1",
+        "has-cors": "1.1.0",
+        "parseqs": "0.0.6",
+        "parseuri": "0.0.6",
+        "ws": "~7.4.2",
+        "yeast": "0.1.2"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "7.4.6",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
+          "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
+          "requires": {}
+        }
+      }
+    },
+    "engine.io-parser": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-4.0.3.tgz",
+      "integrity": "sha512-xEAAY0msNnESNPc00e19y5heTPX4y/TJ36gr8t1voOaNmTojP9b3oK3BbJLFufW2XFPQaaijpFewm2g2Um3uqA==",
+      "requires": {
+        "base64-arraybuffer": "0.1.4"
+      }
+    },
     "enhanced-resolve": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",
@@ -20904,6 +21062,11 @@
       "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==",
       "dev": true
     },
+    "has-cors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
+      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
+    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -22563,8 +22726,7 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -23246,6 +23408,16 @@
         }
       }
     },
+    "parseqs": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
+      "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w=="
+    },
+    "parseuri": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
+      "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow=="
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -25054,6 +25226,30 @@
         }
       }
     },
+    "socket.io-client": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.1.3.tgz",
+      "integrity": "sha512-hISFn6PDpgDifVUiNklLHVPTMv1LAk8poHArfIUdXa+gKgbr0MZbAlquDFqCqsF30yBqa+jg42wgos2FK50BHA==",
+      "requires": {
+        "@types/component-emitter": "^1.2.10",
+        "backo2": "~1.0.2",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1",
+        "engine.io-client": "~5.1.2",
+        "parseuri": "0.0.6",
+        "socket.io-parser": "~4.0.4"
+      }
+    },
+    "socket.io-parser": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz",
+      "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==",
+      "requires": {
+        "@types/component-emitter": "^1.2.10",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1"
+      }
+    },
     "sockjs": {
       "version": "0.3.21",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.21.tgz",
@@ -27462,6 +27658,11 @@
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
       "dev": true
     },
+    "yeast": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
+      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
+    },
     "yorkie": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/yorkie/-/yorkie-2.0.0.tgz",
diff --git a/package.json b/package.json
index d1d42e8..f5251fc 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,6 @@
   "name": "lom_frontend",
   "version": "0.1.0",
   "private": true,
-  "proxy": "localhost:8000",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -11,6 +10,7 @@
   "dependencies": {
     "axios": "^0.24.0",
     "core-js": "^3.6.5",
+    "socket.io-client": "^4.1.3",
     "v-hotkey": "^0.9.0",
     "vue": "^2.6.11",
     "vue-notification": "^1.3.20",
diff --git a/src/components/group/GroupSender.vue b/src/components/group/GroupSender.vue
index 160ca76..ba36949 100644
--- a/src/components/group/GroupSender.vue
+++ b/src/components/group/GroupSender.vue
@@ -19,12 +19,13 @@ export default {
   data() {
     return {
       message: "",
-      messages: []
+      messages: [],
     }
   },
 
   props: {
-    group: Object
+    group: Object,
+    socket: Object
   },
 
   methods: {
@@ -35,6 +36,7 @@ export default {
     send_message(e) {
       e.preventDefault()
       console.log(this.message)
+      this.socket.emit("send_group_message", {message: this.message, group: this.group})
       this.message = ""
     },
 
@@ -45,6 +47,11 @@ export default {
 
       if(status===200)
         this.messages = data.messages
+    },
+
+    push_message(message) {
+      if(message.receiver == this.group.id)
+        this.messages.push(message)
     }
   },
 
@@ -56,6 +63,10 @@ export default {
     this.$nextTick(function () {
       this.$refs.input.focus()
 
+      this.socket.emit("join_group", {group_id: this.group.id})
+      this.socket.on("receive_group_message", ({message}) => {
+        this.push_message(message)
+      })
       this.get_messages()
     })
   }
@@ -63,5 +74,12 @@ export default {
 </script>
 
 <style scoped>
+.group_view {
+  width: 25%;
+}
 
+.messages {
+  overflow:auto;
+  height: 300px;
+}
 </style>
diff --git a/src/components/group/Message.vue b/src/components/group/Message.vue
index 56e2805..eedcc6e 100644
--- a/src/components/group/Message.vue
+++ b/src/components/group/Message.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="message">
+  <div class="message" :class="{mine: is_message_mine}">
       <div class="sender">{{ get_message_user }}</div>
       <div class="content">{{ get_message_content }}</div>
       <div class="date">{{ get_message_date }}</div>
@@ -19,6 +19,8 @@ export default {
       let date = new Date(this.message.create_date)
       return `${date.getDate()}/${date.getMonth()} ${date.getHours()}:${date.getMinutes()}`
     },
+
+    is_message_mine() { return this.message.is_mine }
   },
 
   created() {
@@ -31,5 +33,11 @@ export default {
 <style scoped>
 .message {
   width: 100%;
+  margin-bottom: 10px;
+  color: white;
+}
+
+.mine {
+  color: red;
 }
 </style>
diff --git a/src/store/index.js b/src/store/index.js
index 02e3efa..c131271 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -29,6 +29,10 @@ const store = new Vuex.Store({
      
     get_user: (state) => {
       return state.user
+    },
+
+    get_token: (state) => {
+      return state.token
     }
   },
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 7bd99a2..d85760b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -5,6 +5,7 @@
       <div v-for="group in groups" :key="group.name" >
           <GroupSender
               :group="group"
+              :socket="socket"
           />
       </div>
 
@@ -26,6 +27,7 @@
 import Searcher from '@/components/searcher/Searcher.vue'
 import GroupMaker from '@/components/group/GroupMaker.vue'
 import GroupSender from  '@/components/group/GroupSender.vue'
+import io from 'socket.io-client'
 
 const popups = {
     searcher_show: false,
@@ -36,7 +38,8 @@ export default {
   data() {
     return {
         popups,
-        groups: []
+        groups: [],
+        socket: Object
     }
   },
 
@@ -92,6 +95,18 @@ export default {
     if(!this.$store.getters['is_logged_in']) {
       this.$router.push('/login')
     }
+
+    this.socket = io()
+    this.socket.auth = { token: this.$store.getters.get_token };
+    this.socket.connect();
+
+    this.socket.on("connect", () => {
+        console.log("Socket connected!")
+    });
+
+    this.socket.on("disconnect", () => {
+        console.log("Scoket dsiconected")
+    })
   }
   
 }
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..8ac410f
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  devServer: {
+    proxy: {
+      '/': {
+        target: 'http://localhost:8001',
+        ws: true
+      },
+    },
+  }
+}
-- 
cgit v1.2.3