John Chen

Build Applications from Website to Mobile

Chat Applications with Cloud Firestore

A real-time chat application with Next.js using Firebase Cloud FireStore

View the Site | GitHub | Expo Publish | GitHub(Mobile)

We can successfully build a real-time chat application with Next.js using Socket.IO. The real-time communication however was found not to function well once the package is deployed to Vercel, which is a serverless platform. It is suggested by Vercel two main approaches to applying a real-time model to stateless serverless functions.

  1. Serverless Functions have maximum execution limits and should respond as quickly as possible. They should not subscribe to data events. Instead, we need a client that subscribes to data events (such as Alby, Pusher, etc.) and a serverless function that publishes new data.
  2. Rather than pushing data, we can fetch real-time data on-demand. For example, the Vercel dashboard delivers realtime updates using SWR.

In this demonstration, we build a real-time chat application with Firebase Cloud FireStore.

iOS and Android mobile apps are also delivered. The apps are developed with React Native, anyone who is interested can test the apps through the Expo Publish Link with Expo Go app.

Docker: docker run -p 3000:3000 jglchen/firestore-realtime-chat

Screenshot of the Website AppScreenshot of the Mobile App