diff --git a/lib/chat.js b/lib/chat.js
index d8b9c87..7ead020 100644
--- a/lib/chat.js
+++ b/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
- socket.on('update_infos', (data) =>
+ // On update user
+ 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)
}
}
diff --git a/site/src/components/chat/index.vue b/site/src/components/chat/index.vue
new file mode 100644
index 0000000..246515d
--- /dev/null
+++ b/site/src/components/chat/index.vue
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/site/src/components/chat/script.js b/site/src/components/chat/script.js
new file mode 100644
index 0000000..ac9d7bc
--- /dev/null
+++ b/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()
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/site/src/components/chat/style.styl b/site/src/components/chat/style.styl
new file mode 100644
index 0000000..daae169
--- /dev/null
+++ b/site/src/components/chat/style.styl
@@ -0,0 +1,8 @@
+.chat
+ position fixed
+ bottom 0
+ right 20px
+
+.user-name
+ outline none
+ border none
\ No newline at end of file
diff --git a/site/src/components/chat/template.html b/site/src/components/chat/template.html
new file mode 100644
index 0000000..f2a0edc
--- /dev/null
+++ b/site/src/components/chat/template.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+ {{ message.time }}
+
+
+ {{ message.user.name }}
+
+
+ {{ message.text }}
+
+
+
+
+ Your nickname is
+
+
\ No newline at end of file
diff --git a/site/src/components/connexion/script.js b/site/src/components/connexion/script.js
index b38fd4f..e3c5126 100644
--- a/site/src/components/connexion/script.js
+++ b/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)
}
}
}
\ No newline at end of file
diff --git a/site/src/components/project/script.js b/site/src/components/project/script.js
index de9a203..97abff5 100644
--- a/site/src/components/project/script.js
+++ b/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:
diff --git a/site/src/components/project/template.html b/site/src/components/project/template.html
index b850b25..3771b45 100644
--- a/site/src/components/project/template.html
+++ b/site/src/components/project/template.html
@@ -3,4 +3,5 @@
+
\ No newline at end of file
diff --git a/site/src/store.js b/site/src/store.js
index 261f986..88a4e64 100644
--- a/site/src/store.js
+++ b/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
}
}
})
\ No newline at end of file