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 @@ +
+
+ Discussions +
+
+
+
+ {{ 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