login

api.js

@@ -21,12 +21,19 @@ const wss = new ws.Server({
 });
 
 //WS handler
+let user = [];
 wss.on('connection', (ws, req) => {
     console.log(`${req.socket.remoteAddress} connected`)
     ws.on('message', msgJSON => {
         let msg = JSON.parse(msgJSON)
         console.log(`${req.socket.remoteAddress} => ${msgJSON}`)
         if (msg.type === 'message') wss.clients.forEach(client => client.send(msgJSON))
+        else if (msg.type === 'login' && msg.content.user !== ""){
+            user.push(msg.content.user)
+            ws.send('{"type":"route","path":"/chat"}')
+            let msg = {type: "room", name: "open chat", user: user}
+            ws.send(JSON.stringify(msg))
+        }
     })
     let msg = {
         type: "info",

src/components/newMessage.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import icon from './icon.vue';
+import icon from '@/components/icon.vue';
-import main from '../main.js';
+import main from '@/main.js';
 
 export default {
   name: "newMessage",

src/main.js

@@ -38,6 +38,14 @@ export default {
   mounted() {
     sendMessage()
   },
+  data(){
+    return {
+      roomInfo: {
+        name: "open chat",
+        user: []
+      }
+    }
+  },
   methods: {
     sendMessage(message){
       let msg = {
@@ -76,6 +84,10 @@ socket.onmessage = (e) => {
   console.log(`data received => ${e.data}`)
   let msg = JSON.parse(e.data)
   if (msg.type === 'error') show_error(msg.content)
+  else if (msg.type === 'route') router.push({path: msg.path})
+  else if (msg.type === 'room'){
+    this.roomInfo.user = msg.user
+  }
   else if (msg.type === 'message'){
     //just for now, ik it's dirty
     element('messages').innerHTML +=

src/views/login.vue

@@ -5,23 +5,31 @@
       <label for="longurl-input"></label>
       <input v-model="session.content.user" class="input" id="longurl-input" type="text" autocomplete="off" maxlength="20" placeholder="chose nickname">
     </div>
-    <input type="hidden" value="search" name="login">
+    <textbtn v-on:click.native="login()" text="login" />
-    <textbtn text="login" />
   </div>
 </template>
 
 <script>
 import textbtn from '@/components/textbtn';
+import main from "@/main";
 
 export default {
   name: "login.vue",
   components: {
     textbtn
   },
+  methods: {
+    login() {
+      if (this.session.content.user !== "") {
+        this.session.time = Date.now()
+        main.methods.sendWebSocket(this.session)
+      }
+    }
+  },
   data(){
     return {
       session: {
-        type: "session",
+        type: "login",
         time: Date.now(),
         content: {
           user: ""