Skip to content

V
vue_chat
Commit 41fce3ce by Hứa Minh Thành
Options

Function chat

parent 61fe620e
Pipeline #1164 failed with stages
in 0 seconds
Showing with 94 additions and 47 deletions
pages/chat/index.vue
...@@ -4,58 +4,49 @@ ...@@ -4,58 +4,49 @@
<div <div
class="col-md-6 offset-md-3 col-sm-6 offset-sm-3 col-12 comments-main pt-4 rounded" class="col-md-6 offset-md-3 col-sm-6 offset-sm-3 col-12 comments-main pt-4 rounded"
> >
<div class="form-chat"> <div id="form-chat" class="form-chat" style="overflow-y: scroll">
<ul class="p-0 list-message"> <ul class="p-0 list-message" style="max-height: 100%">
<li> <li v-for="(message, key) in messages" :key="key">
<div class="row comments mb-2"> <!-- friend -->
<div class="col-md-2 col-sm-2 col-3 text-center user-img"> <div
<img class="row comments mb-2"
id="profile-photo" style="margin: 0"
src="http://nicesnippets.com/demo/man01.png" v-if="message.current == idFriend"
class="rounded-circle" >
/> <div class="col-md-7 col-sm-9 col-9 comment rounded mb-2">
</div> <p class="mb-0 text-white">
<div class="col-md-9 col-sm-9 col-9 comment rounded mb-2"> {{ message.content }}
<h4 class="m-0"><a href="#">Jacks David</a></h4> </p>
<time class="text-white ml-3">1 hours ago</time> <time class="text-white ml-3">1 hours ago</time>
</div>
</div>
<!-- Me -->
<div class="row comments mb-2" style="margin: 0" v-else>
<div
class="col-md-2 offset-md-2 col-sm-2 offset-sm-2 col-3 offset-1 text-center user-img"
></div>
<div class="col-md-7 col-sm-7 col-8 comment rounded mb-2">
<p class="mb-0 text-white"> <p class="mb-0 text-white">
Thank you for visiting all the way from New York. {{ message.content }}
</p> </p>
<time class="text-white ml-3">1 week ago</time>
</div> </div>
</div> </div>
</li> </li>
<ul class="p-0">
<li>
<div class="row comments mb-2">
<div
class="col-md-2 offset-md-2 col-sm-2 offset-sm-2 col-3 offset-1 text-center user-img"
>
<img
id="profile-photo"
src="http://nicesnippets.com/demo/man02.png"
class="rounded-circle"
/>
</div>
<div class="col-md-7 col-sm-7 col-8 comment rounded mb-2">
<h4 class="m-0"><a href="#">Steve Alex</a></h4>
<time class="text-white ml-3">1 week ago</time>
<p class="mb-0 text-white">
Thank you for visiting all the way from NYC.
</p>
</div>
</div>
</li>
</ul>
</ul> </ul>
</div> </div>
<div class="row comment-box-main p-3 rounded-bottom send-message"> <div class="row comment-box-main p-3 rounded-bottom send-message">
<div class="col-md-9 col-sm-9 col-9 pr-0 comment-box"> <div class="col-md-9 col-sm-9 col-9 pr-0 comment-box">
<input type="text" class="form-control" placeholder="comment ...." /> <input
type="text"
class="form-control"
v-model="content"
placeholder="comment ...."
v-on:keyup.enter="send()"
/>
</div> </div>
<div class="col-md-3 col-sm-2 col-2 pl-0 text-center send-btn"> <div class="col-md-3 col-sm-2 col-2 pl-0 text-center send-btn">
<button class="btn btn-info">Send</button> <button class="btn btn-info" @click="send()">Send</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -69,10 +60,16 @@ export default { ...@@ -69,10 +60,16 @@ export default {
data() { data() {
return { return {
urlFireBase: "https://vue-chat-c1525-default-rtdb.firebaseio.com", urlFireBase: "https://vue-chat-c1525-default-rtdb.firebaseio.com",
content: "",
messages: [],
idFriend: this.$route.query.friendId,
}; };
}, },
methods: { methods: {
getListChat: function () { getListChat: function () {
var objDiv = document.getElementsByClassName("nav-menu")[0];
objDiv.scrollTop = objDiv.scrollHeight;
console.log(this.$el);
// Get list user and friend // Get list user and friend
axios axios
.get( .get(
...@@ -80,25 +77,51 @@ export default { ...@@ -80,25 +77,51 @@ export default {
"/chat/" + "/chat/" +
this.$store.state.user.uid + this.$store.state.user.uid +
"/" + "/" +
this.$route.query.friendId + this.idFriend +
".json" ".json"
) )
.then((res) => { .then((res) => {
// get mesages // get mesages
let mes = res.data;
// let data = JSON.stringify(res.data);
// foreach qua key and values của object Object.keys || Object.values
let data = res.data;
// Object.values(data).forEach((key, value) => {
// // dataArray[childSnapshot.key] = childSnapshot.val();
// console.log(key);
// console.log(value);
// });
// let arr = [];
// for (const [key, value] of Object.entries(data)) {
// arr[key] = value;
// }
let current = res.data;
// console.log(this.messages);
// Get list friend and user // Get list friend and user
axios axios
.get( .get(
this.urlFireBase + this.urlFireBase +
"/chat/" + "/chat/" +
this.$route.query.friendId + this.idFriend +
"/" + "/" +
this.$store.state.user.uid + this.$store.state.user.uid +
".json" ".json"
) )
.then((res) => { .then((res) => {
// remove current user // merge 2 object message
console.log(res); let mes = { ...current, ...res.data };
// sort
let keys = Object.keys(mes);
keys.sort();
let len = keys.length;
let arrMes = [];
for (let i = 0; i < len; i++) {
let k = keys[i];
arrMes.push(mes[k]);
}
this.messages = arrMes;
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);
...@@ -108,10 +131,34 @@ export default { ...@@ -108,10 +131,34 @@ export default {
console.log(error); console.log(error);
}); });
}, },
send: function () {
let time = new Date().getTime();
axios
.patch(
this.urlFireBase +
`/chat/${this.$store.state.user.uid}/${this.idFriend}/${time}.json`,
{
content: this.content,
current: this.$store.state.user.uid,
}
)
.then((res) => {
this.getListChat();
this.content = "";
var objDiv = document.getElementsByClassName(".form-chat");
objDiv.scrollTop = objDiv.scrollHeight;
})
.catch(function (error) {
console.log(error);
});
},
}, },
created: function () { created: function () {
this.getListChat(); setInterval(this.getListChat, 2000);
console.log(this.$route.query.friendId); //
//
// this.getListChat();
}, },
}; };
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment