summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/group/GroupSender.vue22
-rw-r--r--src/components/group/Message.vue10
-rw-r--r--src/store/index.js4
-rw-r--r--src/views/Home.vue17
4 files changed, 49 insertions, 4 deletions
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 {
19 data() { 19 data() {
20 return { 20 return {
21 message: "", 21 message: "",
22 messages: [] 22 messages: [],
23 } 23 }
24 }, 24 },
25 25
26 props: { 26 props: {
27 group: Object 27 group: Object,
28 socket: Object
28 }, 29 },
29 30
30 methods: { 31 methods: {
@@ -35,6 +36,7 @@ export default {
35 send_message(e) { 36 send_message(e) {
36 e.preventDefault() 37 e.preventDefault()
37 console.log(this.message) 38 console.log(this.message)
39 this.socket.emit("send_group_message", {message: this.message, group: this.group})
38 this.message = "" 40 this.message = ""
39 }, 41 },
40 42
@@ -45,6 +47,11 @@ export default {
45 47
46 if(status===200) 48 if(status===200)
47 this.messages = data.messages 49 this.messages = data.messages
50 },
51
52 push_message(message) {
53 if(message.receiver == this.group.id)
54 this.messages.push(message)
48 } 55 }
49 }, 56 },
50 57
@@ -56,6 +63,10 @@ export default {
56 this.$nextTick(function () { 63 this.$nextTick(function () {
57 this.$refs.input.focus() 64 this.$refs.input.focus()
58 65
66 this.socket.emit("join_group", {group_id: this.group.id})
67 this.socket.on("receive_group_message", ({message}) => {
68 this.push_message(message)
69 })
59 this.get_messages() 70 this.get_messages()
60 }) 71 })
61 } 72 }
@@ -63,5 +74,12 @@ export default {
63</script> 74</script>
64 75
65<style scoped> 76<style scoped>
77.group_view {
78 width: 25%;
79}
66 80
81.messages {
82 overflow:auto;
83 height: 300px;
84}
67</style> 85</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 @@
1<template> 1<template>
2 <div class="message"> 2 <div class="message" :class="{mine: is_message_mine}">
3 <div class="sender">{{ get_message_user }}</div> 3 <div class="sender">{{ get_message_user }}</div>
4 <div class="content">{{ get_message_content }}</div> 4 <div class="content">{{ get_message_content }}</div>
5 <div class="date">{{ get_message_date }}</div> 5 <div class="date">{{ get_message_date }}</div>
@@ -19,6 +19,8 @@ export default {
19 let date = new Date(this.message.create_date) 19 let date = new Date(this.message.create_date)
20 return `${date.getDate()}/${date.getMonth()} ${date.getHours()}:${date.getMinutes()}` 20 return `${date.getDate()}/${date.getMonth()} ${date.getHours()}:${date.getMinutes()}`
21 }, 21 },
22
23 is_message_mine() { return this.message.is_mine }
22 }, 24 },
23 25
24 created() { 26 created() {
@@ -31,5 +33,11 @@ export default {
31<style scoped> 33<style scoped>
32.message { 34.message {
33 width: 100%; 35 width: 100%;
36 margin-bottom: 10px;
37 color: white;
38}
39
40.mine {
41 color: red;
34} 42}
35</style> 43</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({
29 29
30 get_user: (state) => { 30 get_user: (state) => {
31 return state.user 31 return state.user
32 },
33
34 get_token: (state) => {
35 return state.token
32 } 36 }
33 }, 37 },
34 38
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 @@
5 <div v-for="group in groups" :key="group.name" > 5 <div v-for="group in groups" :key="group.name" >
6 <GroupSender 6 <GroupSender
7 :group="group" 7 :group="group"
8 :socket="socket"
8 /> 9 />
9 </div> 10 </div>
10 11
@@ -26,6 +27,7 @@
26import Searcher from '@/components/searcher/Searcher.vue' 27import Searcher from '@/components/searcher/Searcher.vue'
27import GroupMaker from '@/components/group/GroupMaker.vue' 28import GroupMaker from '@/components/group/GroupMaker.vue'
28import GroupSender from '@/components/group/GroupSender.vue' 29import GroupSender from '@/components/group/GroupSender.vue'
30import io from 'socket.io-client'
29 31
30const popups = { 32const popups = {
31 searcher_show: false, 33 searcher_show: false,
@@ -36,7 +38,8 @@ export default {
36 data() { 38 data() {
37 return { 39 return {
38 popups, 40 popups,
39 groups: [] 41 groups: [],
42 socket: Object
40 } 43 }
41 }, 44 },
42 45
@@ -92,6 +95,18 @@ export default {
92 if(!this.$store.getters['is_logged_in']) { 95 if(!this.$store.getters['is_logged_in']) {
93 this.$router.push('/login') 96 this.$router.push('/login')
94 } 97 }
98
99 this.socket = io()
100 this.socket.auth = { token: this.$store.getters.get_token };
101 this.socket.connect();
102
103 this.socket.on("connect", () => {
104 console.log("Socket connected!")
105 });
106
107 this.socket.on("disconnect", () => {
108 console.log("Scoket dsiconected")
109 })
95 } 110 }
96 111
97} 112}