✨ Site > Chat > Add user update

lib/chat.js

@@ -42,11 +42,11 @@ class Chat
                 console.log('chat > user'.green.bold + ' - ' + 'create'.cyan + ' - ' + user.name.cyan)
             }
 
-            // Send infos
+            // Send user infos
             const broadcastUser = {}
             broadcastUser.name = user.name
             broadcastUser.color = user.color
-            socket.emit('infos', broadcastUser)
+            socket.emit('user', broadcastUser)
 
             // On message
             socket.on('message', (data) =>
@@ -74,8 +74,8 @@ class Chat
                 }
             })
 
-            // On update infos
+            // On update user
-            socket.on('update_infos', (data) =>
+            socket.on('update_user', (data) =>
             {
                 const newName = data.name.trim()
                 const oldName = user.name
@@ -92,7 +92,7 @@ class Chat
                 // Debug
                 if(this.config.debug >= 1)
                 {
-                    console.log('chat > socket'.green.bold + ' - ' + 'update_infos'.cyan + ' - ' + (oldName + ' > ' + user.name).cyan)
+                    console.log('chat > socket'.green.bold + ' - ' + 'update_user'.cyan + ' - ' + (oldName + ' > ' + user.name).cyan)
                 }
             })
 
@@ -161,11 +161,11 @@ class Chat
         // Create user A
         const userA = this.createUser()
 
-        // Send infos
+        // Send user infos
         const broadcastUser = {}
         broadcastUser.name = userA.name
         broadcastUser.color = userA.color
-        this.chatSocket.emit('infos', broadcastUser)
+        this.chatSocket.emit('user', broadcastUser)
 
         let counting = 0
         setInterval(() =>
@@ -188,8 +188,6 @@ class Chat
             broadcastMessage.user = userA
 
             this.chatSocket.emit('message', broadcastMessage)
-
-            console.log('message')
         }, 1500)
     }
 }

site/src/components/chat/index.vue

@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus" scoped></style>

site/src/components/chat/script.js

@@ -0,0 +1,53 @@
+export default
+{
+    name: 'chat',
+
+    data()
+    {
+        return {
+            userName: ''
+        }
+    },
+
+    computed:
+    {
+        messages()
+        {
+            return this.$store.state.chatMessages
+        },
+
+        user()
+        {
+            return this.$store.state.user
+        }
+    },
+
+    watch:
+    {
+        user(value)
+        {
+            this.userName = value.name
+        }
+    },
+
+    mounted()
+    {
+    },
+
+    methods:
+    {
+        onUserNameChange()
+        {
+            this.$store.commit('askUpdateUser', { name: this.userName })
+        },
+
+        onUserNameKeyDown(event)
+        {
+            // Blur if enter pressed
+            if(event.keyCode === 13)
+            {
+                event.target.blur()
+            }
+        }
+    }
+}

site/src/components/chat/style.styl

@@ -0,0 +1,8 @@
+.chat
+    position fixed
+    bottom 0
+    right 20px
+
+.user-name
+    outline none
+    border none

site/src/components/chat/template.html

@@ -0,0 +1,21 @@
+<div class="chat">
+    <header>
+        Discussions
+    </header>
+    <div class="messages">
+        <div class="message" v-for="message of messages" :key="message.id">
+            <div class="date">
+                {{ message.time }}
+            </div>
+            <div class="user" :style="`color: ${message.user.color};`">
+                {{ message.user.name }}
+            </div>
+            <div class="text">
+                {{ message.text }}
+            </div>
+        </div>
+    </div>
+    <div class="infos" v-if="user">
+        Your nickname is <input class="user-name" :style="`color: ${user.color};`" v-model="userName" @change="onUserNameChange($event)" @keydown="onUserNameKeyDown($event)"/>
+    </div>
+</div>

site/src/components/connexion/script.js

@@ -9,12 +9,18 @@ export default
         project()
         {
             return this.$store.state.project
+        },
+
+        pendingUser()
+        {
+            return this.$store.state.pendingUser
         }
     },
 
     watch:
     {
-        project: 'onProjectChange'
+        project: 'onProjectChange',
+        pendingUser: 'onPendingUser'
     },
 
     created()
@@ -29,7 +35,6 @@ export default
 
         this.projectsSocket.on('update_projects', (data) =>
         {
-            // console.log('update_projects', data)
             this.$store.commit('updateProjects', data.all)
         })
     },
@@ -38,6 +43,12 @@ export default
     {
         onProjectChange(value)
         {
+            if(!value)
+            {
+                return
+            }
+
+            // Project socket
             const projectURL = `${process.env.NODE_ENV === 'production' ? '' : 'http://localhost:1571'}/project/${value.slug}`
 
             this.projectSocket = socketIoClient(projectURL)
@@ -66,6 +77,31 @@ export default
             {
                 this.$store.commit('createVersion', data)
             })
+
+            // Chat socket
+            const chatURL = `${process.env.NODE_ENV === 'production' ? '' : 'http://localhost:1571'}/project/${value.slug}/chat`
+
+            this.chatSocket = socketIoClient(chatURL)
+
+            this.chatSocket.on('connect', () =>
+            {
+                // console.log('chat connected')
+            })
+
+            this.chatSocket.on('user', (data) =>
+            {
+                this.$store.commit('updateUser', data)
+            })
+
+            this.chatSocket.on('message', (data) =>
+            {
+                this.$store.commit('createMessage', data)
+            })
+        },
+
+        onPendingUser(value)
+        {
+            this.chatSocket.emit('update_user', value)
         }
     }
 }

site/src/components/project/script.js

@@ -1,5 +1,6 @@
 import FilesTree from '@/components/files-tree'
 import File from '@/components/file'
+import Chat from '@/components/chat'
 
 export default
 {
@@ -8,7 +9,8 @@ export default
     components:
     {
         FilesTree,
-        File
+        File,
+        Chat
     },
 
     computed:

site/src/components/project/template.html

@@ -3,4 +3,5 @@
 
     <files-tree></files-tree>
     <file v-if="file" :content="file.data"></file>
+    <chat></chat>
 </div>

site/src/store.js

@@ -11,7 +11,10 @@ export default new Vuex.Store({
         project: null,
         files: new FileTree({ autoWash: true }),
         file: null,
-        version: null
+        version: null,
+        chatMessages: [],
+        user: null,
+        pendingUser: null
     },
 
     mutations:
@@ -106,6 +109,32 @@ export default new Vuex.Store({
         setVersion(state, data)
         {
             state.version = data
+        },
+
+        /**
+         * Messages
+         */
+        createMessage(state, data)
+        {
+            state.chatMessages.push(data)
+
+            if(state.chatMessages.length > 100)
+            {
+                state.chatMessages.splice(0, state.chatMessages.length - 100)
+            }
+        },
+
+        /**
+         * User
+         */
+        updateUser(state, data)
+        {
+            state.user = data
+        },
+
+        askUpdateUser(state, data)
+        {
+            state.pendingUser = data
         }
     }
 })