AnyCable Next.js/Vercel Example

This is an example of how to use AnyCable with Next.js and Vercel to build real-time applications.

Learn more about AnyCable for serverless JavaScript apps in the documentation.

Prerequisites

You will need to deploy an AnyCable-Go server to the platform of your choice. We recommend using Fly.io and provide an example configuration in fly.toml.example for seamless deployments. However, Anycable-Go server can be deployed on any platform.

Using fly CLI, run the following command to create and launch a new AnyCable-Go application:

# Create a new Fly application
fly launch --image anycable/anycable-go:1.4 --generate-name --ha=false --internal-port 8080 --env PORT=8080 --env ANYCABLE_BROKER=memory

Answer "No" to all database-related questions and "Yes" to deployment. This will deploy your app and create a fly.toml file with the minimum configuration. See the fly.toml.example file to learn more about other available and recommended configuration options.

Deployment

• Click the Deploy button

• Fill in the required environment variables:

  CABLE_URL=wss://<YOUR_ANYCABLE_GO_HOSTNAME>/cable
  ANYCABLE_HTTP_BROADCAST_URL=https://<YOUR_ANYCABLE_GO_HOSTNAME>/_broadcast
  ANYCABLE_HTTP_BROADCAST_SECRET=<YOUR_SECRET>
  ANYCABLE_JWT_ID_KEY=<YOUR_JWT_SECRET>

  • The ANYCABLE_HTTP_BROADCAST_SECRET and ANYCABLE_JWT_ID_KEY can be any strings.
  • You can create a secure value using this CLI command openssl rand -hex 32

• Set the following environment variables on your AnyCable-Go server:

  ANYCABLE_RPC_HOST=https://<YOUR_VERCEL_APP_HOSTNAME>/api/anycable
  ANYCABLE_HTTP_BROADCAST_SECRET=<YOUR_SECRET>
  ANYCABLE_JWT_ID_KEY=<YOUR_JWT_SECRET>

When using Fly, you can keep all env vars in the .env.production file and import the secrets using the following command:

cat .env.production | fly secrets import

When deploying to Vercel you can use the Vercel CLI to pull environment variables:

vercel env pull

Authentication

We use the AnyCable JWT identification feature to issue JWT tokens to authenticate clients. The benefit of using AnyCable JWTs is the ability to verify and identify clients at the WebSocket server side without making additional requests to the backend (Vercel functions in our case).

The ANYCABLE_JWT_ID_KEY environment variable is responsible for this.

Running locally

PNPM is required to install dependencies.

First, install the dependencies:

pnpm install

Then, start AnyCable-Go:

pnpm anycable-go

And start the Next.js app:

pnpm dev

Open http://localhost:3000 with your browser to see the result.