(feat) add online status and typing indicator

Author: antoine92190

demo/src/ChatContainer.vue

@@ -64,17 +64,18 @@
 			@menuActionHandler="menuActionHandler"
 			@messageActionHandler="messageActionHandler"
 			@sendMessageReaction="sendMessageReaction"
+			@typingMessage="typingMessage"
 		/>
 	</div>
 </template>
 
 <script>
 import {
+	firebase,
 	roomsRef,
 	usersRef,
 	filesRef,
-	deleteDbField,
-	firebase
+	deleteDbField
 } from '@/firestore'
 import { parseTimestamp, isSameDay } from '@/utils/dates'
 import ChatWindow from './../../src/ChatWindow'
@@ -118,6 +119,7 @@ export default {
 
 	mounted() {
 		this.fetchRooms()
+		this.updateUserOnlineStatus()
 	},
 
 	destroyed() {
@@ -147,14 +149,21 @@ export default {
 		async fetchRooms() {
 			this.resetRooms()
 
-			const rooms = await roomsRef
-				.where('users', 'array-contains', this.currentUserId)
-				.get()
+			const query = roomsRef.where(
+				'users',
+				'array-contains',
+				this.currentUserId
+			)
 
+			const rooms = await query.get()
+
+			const roomList = []
 			const rawRoomUsers = []
 			const rawMessages = []
 
 			rooms.forEach(room => {
+				roomList[room.id] = { ...room.data(), users: [] }
+
 				const rawUsers = []
 
 				room.data().users.map(userId => {
@@ -178,14 +187,11 @@ export default {
 				rawMessages.push(this.getLastMessage(room))
 			})
 
-			let roomList = []
-
 			const users = await Promise.all(rawRoomUsers)
 
-			users.map(user => {
-				if (roomList[user.roomId]) roomList[user.roomId].users.push(user)
-				else roomList[user.roomId] = { users: [user] }
-			})
+			users.map(user => roomList[user.roomId].users.push(user))
+
+			this.listenUsersOnlineStatus(users)
 
 			const roomMessages = await Promise.all(rawMessages).then(messages => {
 				return messages.map(message => {
@@ -227,6 +233,8 @@ export default {
 			this.rooms = this.rooms.concat(formattedRooms)
 			this.loadingRooms = false
 			this.rooms.map((room, index) => this.listenLastMessage(room, index))
+
+			this.listenRoomsTypingUsers(query)
 		},
 
 		getLastMessage(room) {
@@ -261,7 +269,7 @@ export default {
 			const timestampFormat = isSameDay(date, new Date()) ? 'HH:mm' : 'DD/MM/YY'
 
 			let timestamp = parseTimestamp(message.timestamp, timestampFormat)
-			if (timestampFormat === 'HH:mm') timestamp = 'Today, ' + timestamp
+			if (timestampFormat === 'HH:mm') timestamp = `Today, ${timestamp}`
 
 			let content = message.content
 			if (message.file) content = `${message.file.name}.${message.file.type}`
@@ -465,6 +473,87 @@ export default {
 				})
 		},
 
+		typingMessage({ message, roomId }) {
+			const dbAction = message
+				? firebase.firestore.FieldValue.arrayUnion(this.currentUserId)
+				: firebase.firestore.FieldValue.arrayRemove(this.currentUserId)
+
+			roomsRef.doc(roomId).update({
+				typingUsers: dbAction
+			})
+		},
+
+		async listenRoomsTypingUsers(query) {
+			query.onSnapshot(rooms => {
+				rooms.forEach(room => {
+					const foundRoom = this.rooms.find(r => r.roomId === room.id)
+					if (foundRoom) foundRoom.typingUsers = room.data().typingUsers
+				})
+			})
+		},
+
+		updateUserOnlineStatus() {
+			const userStatusRef = firebase
+				.database()
+				.ref('/status/' + this.currentUserId)
+
+			const isOfflineData = {
+				state: 'offline',
+				last_changed: firebase.database.ServerValue.TIMESTAMP
+			}
+
+			const isOnlineData = {
+				state: 'online',
+				last_changed: firebase.database.ServerValue.TIMESTAMP
+			}
+
+			firebase
+				.database()
+				.ref('.info/connected')
+				.on('value', snapshot => {
+					if (snapshot.val() == false) return
+
+					userStatusRef
+						.onDisconnect()
+						.set(isOfflineData)
+						.then(() => {
+							userStatusRef.set(isOnlineData)
+						})
+				})
+		},
+
+		listenUsersOnlineStatus(users) {
+			users.map(user => {
+				firebase
+					.database()
+					.ref('/status/' + user._id)
+					.on('value', snapshot => {
+						if (!snapshot.val()) return
+
+						const foundUser = users.find(u => snapshot.key === u._id)
+
+						if (foundUser) {
+							const timestampFormat = isSameDay(
+								new Date(snapshot.val().last_changed),
+								new Date()
+							)
+								? 'HH:mm'
+								: 'DD MMMM, HH:mm'
+
+							const timestamp = parseTimestamp(
+								new Date(snapshot.val().last_changed),
+								timestampFormat
+							)
+
+							const last_changed =
+								timestampFormat === 'HH:mm' ? `today, ${timestamp}` : timestamp
+
+							foundUser.status = { ...snapshot.val(), last_changed }
+						}
+					})
+			})
+		},
+
 		addRoom() {
 			this.resetForms()
 			this.addNewRoom = true

demo/src/firestore/index.js

@@ -1,5 +1,6 @@
 import * as app from 'firebase/app'
 import 'firebase/firestore'
+import 'firebase/database'
 import 'firebase/storage'
 
 const config =

demo/src/utils/dates.js

@@ -13,7 +13,13 @@ export const parseTimestamp = (timestamp, format = '') => {
 	} else if (format === 'DD/MM/YY') {
 		const options = { month: 'numeric', year: 'numeric', day: 'numeric' }
 		return `${new Intl.DateTimeFormat('en-GB', options).format(date)}`
+	} else if (format === 'DD MMMM, HH:mm') {
+		const options = { month: 'long', day: 'numeric' }
+		return `${new Intl.DateTimeFormat('en-GB', options).format(
+			date
+		)}, ${zeroPad(date.getHours(), 2)}:${zeroPad(date.getMinutes(), 2)}`
 	}
+
 	return date
 }
 

src/ChatWindow/ChatWindow.vue

@@ -36,6 +36,7 @@
 				@menuActionHandler="menuActionHandler"
 				@messageActionHandler="messageActionHandler"
 				@sendMessageReaction="sendMessageReaction"
+				@typingMessage="typingMessage"
 			>
 			</room>
 		</div>
@@ -92,8 +93,10 @@ export default {
 	},
 
 	watch: {
-		rooms(val) {
-			if (val[0]) this.fetchRoom({ room: val[0] })
+		rooms(newVal, oldVal) {
+			if (newVal[0] && newVal.length !== oldVal.length) {
+				this.fetchRoom({ room: newVal[0] })
+			}
 		},
 
 		room(val) {
@@ -190,6 +193,12 @@ export default {
 				...messageReaction,
 				roomId: this.room.roomId
 			})
+		},
+		typingMessage(message) {
+			this.$emit('typingMessage', {
+				message,
+				roomId: this.room.roomId
+			})
 		}
 	}
 }

src/ChatWindow/Room.vue

@@ -17,7 +17,15 @@
 				class="room-avatar"
 				:style="{ 'background-image': `url(${room.avatar})` }"
 			></div>
-			<div class="room-name">{{ room.roomName }}</div>
+			<div>
+				<div class="room-name">{{ room.roomName }}</div>
+				<div v-if="typingUsers" class="room-info">
+					{{ typingUsers }} {{ textMessages.IS_TYPING }}
+				</div>
+				<div v-else-if="userStatus" class="room-info">
+					{{ userStatus }}
+				</div>
+			</div>
 			<div
 				class="svg-button room-options"
 				v-if="menuActions.length"
@@ -63,7 +71,7 @@
 					</infinite-loading>
 				</transition>
 				<transition-group name="fade-message">
-					<div v-for="(message, i) in messages" :key="message._id">
+					<div v-for="(message, i) in messages" :key="i">
 						<message
 							:currentUserId="currentUserId"
 							:message="message"
@@ -150,7 +158,7 @@
 						'padding-left': `${imageDimensions.width + 6}px`
 					}"
 					v-model="message"
-					@input="autoGrow"
+					@input="onChangeInput"
 					@keydown.esc="resetMessage"
 					@keydown.enter.exact.prevent="sendMessage"
 				></textarea>
@@ -279,9 +287,12 @@ export default {
 			if (val) this.infiniteState = null
 			else this.focusTextarea()
 		},
-		room() {
-			this.loadingMessages = true
-			this.resetMessage()
+		room(newVal, oldVal) {
+			if (newVal.roomId && newVal.roomId !== oldVal.roomId) {
+				this.loadingMessages = true
+				this.resetMessage()
+				this.$emit('typingMessage', this.message)
+			}
 		},
 		messages(newVal, oldVal) {
 			newVal.forEach(message => {
@@ -340,6 +351,35 @@ export default {
 		},
 		inputDisabled() {
 			return this.isMessageEmpty()
+		},
+		typingUsers() {
+			if (!this.room.typingUsers || !this.room.typingUsers.length) return
+
+			const typingUsers = this.room.users.filter(user => {
+				if (user._id === this.currentUserId) return
+				if (this.room.typingUsers.indexOf(user._id) === -1) return
+				if (user.status && user.status.state === 'offline') return
+				return true
+			})
+
+			return typingUsers.map(user => user.username).join(', ')
+		},
+		userStatus() {
+			if (!this.room.users || this.room.users.length !== 2) return
+
+			const user = this.room.users.find(u => u._id !== this.currentUserId)
+
+			if (!user.status) return
+
+			let text = ''
+
+			if (user.status.state === 'online') {
+				text = this.textMessages.IS_ONLINE
+			} else if (user.status.last_changed) {
+				text = this.textMessages.LAST_SEEN + user.status.last_changed
+			}
+
+			return text
 		}
 	},
 
@@ -435,6 +475,10 @@ export default {
 			const element = this.$refs.scrollContainer
 			element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' })
 		},
+		onChangeInput(el) {
+			this.autoGrow(el)
+			this.$emit('typingMessage', this.message)
+		},
 		autoGrow(el) {
 			this.resizeTextarea(el.srcElement)
 		},
@@ -527,6 +571,14 @@ export default {
 
 .room-name {
 	font-size: 17px;
+	line-height: 18px;
+	color: var(--chat-header-color-name);
+}
+
+.room-info {
+	font-size: 13px;
+	line-height: 18px;
+	color: var(--chat-header-color-info);
 }
 
 .room-options {
@@ -546,7 +598,7 @@ export default {
 
 .text-started {
 	font-size: 14px;
-	color: #9ca6af;
+	color: var(--chat-message-color-started);
 	font-style: italic;
 	text-align: center;
 	margin-top: 27px;

src/locales/index.js

@@ -4,5 +4,8 @@ export default {
 	MESSAGES_EMPTY: 'No messages',
 	CONVERSATION_STARTED: 'Conversation started on:',
 	TYPE_MESSAGE: 'Type message',
-	SEARCH: 'Search'
+	SEARCH: 'Search',
+	IS_ONLINE: 'is online',
+	LAST_SEEN: 'last seen ',
+	IS_TYPING: 'is writing...'
 }