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.

firestore-realtime-chat-screenshot

iOS and Android mobile apps are also delivered. The apps are developed with React Native, anyone who is interested can test the development builds with iOS Simulator Build and Android Internal Distribution Build. If the build storage link has expired, please go to https://projects-jglchen.vercel.app/en/contact to request build files.

View the App

App GitHub

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

iOS Simulator Build

Android Internal Distribution Build

React Native GitHub

back To Series Home