firebase.firestore().collection('messages').orderBy('createdAt').onSnapshot(snapshot => {snapShot.changes().forEach(...)})
firebase.firestore().collection('messages').orderBy('createdAt').onSnapshot(snapshot => {snapShot.changes().forEach(...)})
firebase.firestore().collection('users').doc(message.data().userId).get().then(author => {})
firebase.firestore().collection('users').doc(message.data().userId).get().then(author => {})
this.messages.push({
key: message.id,
userName: author.data().name,
userPhoto: author.data().photoURL,
message: message.data().message
});
this.messages.push({
key: message.id,
userName: author.data().name,
userPhoto: author.data().photoURL,
message: message.data().message
});
<div v-for="{ key, userName, userPhoto, message } in messages" :key="key">
</div>
<div v-for="{ key, userName, userPhoto, message } in messages" :key="key">
</div>
<template>
<div class='chat'>
<h2>チャット</h2>
<transition-group name="chat" tag="div" class="message-list container">
<div v-for="{ key, userName, userPhoto, message } in messages" :key="key" class="message">
<div class="message-user">
<div class="message-img user-profile-img">
<img v-if='userPhoto' :src="userPhoto">
<img v-else :src="defaultImgURL" alt="">
</div>
<div class="message-name">{{ userName }}</div>
</div>
<div class="message-text-box">
<div class='message-text'>{{ message }}</div>
</div>
</div>
</transition-group>
<form action="" @submit.prevent="sendMessage" class="message-form">
<textarea
v-model="input"
:disabled="!userStatus"
@keydown.enter.exact.prevent="sendMessage"
class='form-control'></textarea>
<button type="submit" :disabled="!userStatus" class="btn">送信する</button>
</form>
</div>
</template>
<script>
import firebase from 'firebase';
import authUser from '../authUser.js'; //authでログインしているユーザー
export default {
name: 'chat',
data() {
return {
messages: [], // 取得したメッセージを入れる配列
input: '', // 入力したメッセージ
defaultImgURL: 'userPhotoが登録されていないときに表示される画像'
}
},
created() {
authUser.onAuth();
// messagesコレクションを取得・追加を監視してループでsetMessage()にわたす
this.dbMessages.orderBy('createdAt').onSnapshot(snapshot => {
snapshot.docChanges().forEach(change => {
if(change.type === 'added' ) {
const message = change.doc;
this.setMessage(message)
}
});
});
},
computed: {
currentUser() {
return this.$store.getters.currentUser;
},
db() {
return firebase.firestore()
},
dbMessages() {
return this.db.collection('messages');
},
dbUsers() {
return this.db.collection('users');
}
},
methods: {
// メッセージをDBに登録
sendMessage() {
if(this.input === '') {
return
}
this.dbMessages.add({
userId: this.currentUser.uid, //投稿するユーザー
message: this.input.trim(), // 本文
createdAt: firebase.firestore.FieldValue.serverTimestamp()
})
.then(doc => {
this.input = '';
})
.catch(error => {
console.log(error);
})
},
// messageのuserIdから投稿したユーザーを取得しそのnameとphotoURLをdataのmessages[]に入れる
setMessage(message) {
this.dbUsers.doc(message.data().userId).get()
.then(author => {
this.messages.push({
key: message.id,
userName: author.data().name,
userPhoto: author.data().photoURL,
message: message.data().message
});
})
.catch(error => {
console.log(error);
});
},
}
}
</script>
<template>
<div class='chat'>
<h2>チャット</h2>
<transition-group name="chat" tag="div" class="message-list container">
<div v-for="{ key, userName, userPhoto, message } in messages" :key="key" class="message">
<div class="message-user">
<div class="message-img user-profile-img">
<img v-if='userPhoto' :src="userPhoto">
<img v-else :src="defaultImgURL" alt="">
</div>
<div class="message-name">{{ userName }}</div>
</div>
<div class="message-text-box">
<div class='message-text'>{{ message }}</div>
</div>
</div>
</transition-group>
<form action="" @submit.prevent="sendMessage" class="message-form">
<textarea
v-model="input"
:disabled="!userStatus"
@keydown.enter.exact.prevent="sendMessage"
class='form-control'></textarea>
<button type="submit" :disabled="!userStatus" class="btn">送信する</button>
</form>
</div>
</template>
<script>
import firebase from 'firebase';
import authUser from '../authUser.js'; //authでログインしているユーザー
export default {
name: 'chat',
data() {
return {
messages: [], // 取得したメッセージを入れる配列
input: '', // 入力したメッセージ
defaultImgURL: 'userPhotoが登録されていないときに表示される画像'
}
},
created() {
authUser.onAuth();
// messagesコレクションを取得・追加を監視してループでsetMessage()にわたす
this.dbMessages.orderBy('createdAt').onSnapshot(snapshot => {
snapshot.docChanges().forEach(change => {
if(change.type === 'added' ) {
const message = change.doc;
this.setMessage(message)
}
});
});
},
computed: {
currentUser() {
return this.$store.getters.currentUser;
},
db() {
return firebase.firestore()
},
dbMessages() {
return this.db.collection('messages');
},
dbUsers() {
return this.db.collection('users');
}
},
methods: {
// メッセージをDBに登録
sendMessage() {
if(this.input === '') {
return
}
this.dbMessages.add({
userId: this.currentUser.uid, //投稿するユーザー
message: this.input.trim(), // 本文
createdAt: firebase.firestore.FieldValue.serverTimestamp()
})
.then(doc => {
this.input = '';
})
.catch(error => {
console.log(error);
})
},
// messageのuserIdから投稿したユーザーを取得しそのnameとphotoURLをdataのmessages[]に入れる
setMessage(message) {
this.dbUsers.doc(message.data().userId).get()
.then(author => {
this.messages.push({
key: message.id,
userName: author.data().name,
userPhoto: author.data().photoURL,
message: message.data().message
});
})
.catch(error => {
console.log(error);
});
},
}
}
</script>