Search⌘ K
AI Features
Home
Courses
Building a WhatsApp Clone with Vue.js and AWS Amplify

Adding Last Seen and User Typing Features to the Application

Explore how to implement real-time user activity features including last seen and typing indicators in a WhatsApp clone built with Vue.js and AWS Amplify. This lesson guides you through using subscriptions, intervals, and schema fields to manage timely updates that enhance user interaction and engagement within individual conversations.

We'll cover the following...

Introduction

In this lesson, we will use subscriptions to implement the last seen and user typing features. Both features require real-time response, although we will delay the responses. To prevent sending requests continuously, we use intervals. When we designed our schema in the user table, we provisioned for lastSeen and userTyping. We will use these fields to implement the user typing and last seen functionalities.

Javascript (babel-node)
type User @model {
  id: ID!
  email: String!
  phone: String!
  image: String
  username: String
  lastSeen: String
  userTyping: String
  updatedAt: String
  createdAt: String 
  contact: [Contact] @hasMany
  conversation: [Conversation] @hasMany
  message: [Message] @hasMany
}

Adding the

...