Pusher Channels is a service that enables you to add real-time data and functionality to web and mobile apps by using WebSockets.
This guide demonstrates how to get started creating and deploying real-time apps with Channels and Vercel.
Note: This guide is an overview. For the full code, see the linked example at the bottom of this page.
Step 1: Pusher Account Setup
Start by making an account on Pusher and creating a new app by clicking the Create new app button.

Next, give your app a name and select a region. Choose a region closest to the majority of your customers to minimize latency.

From your dashboard, find and click on the Channels app you just created.

Next, click the App Keys tab. Copy these values so that you can save them as Secrets.

Step 2: Set Up Your Project
With your Pusher Channels account and app set up, the next step is to create your project to deploy, with only a root directory for static files, and an /api
directory for Serverless Functions.
1mkdir -p pusher-channels/api && cd pusher-channels
Create an index.html
file in your project with the code below.
1<!DOCTYPE html>2<html lang="en">3 <head>4 <link rel="stylesheet" href="style.css" />5 </head>6 <body>7 <script src="https://js.pusher.com/5.0/pusher.min.js"></script>8 <script src="main.js"></script>9 </body>10</html>
Create an instance of a Pusher Channels client that subscribes and reacts to events on the appropriate channel. Additionally, send data to your Serverless Function that will trigger a push event.
Create a main.js
file where you will initialize a Channels object with your app-key
, subscribe to the appropriate channel and bind a callback function to react to events within that channel.
1// Initialize Channels client2let channels = new Pusher('app-key', {3 cluster: 'cluster-region',4});5
6// Subscribe to the appropriate channel7let channel = channels.subscribe('channel-name');8
9// Bind a callback function to an event within the subscribed channel10channel.bind('event-name', function (data) {11 // Do what you wish with the data from the event12});
All that's remaining on the client is to create a way to send data to your Serverless Function to trigger push events. To achieve this, add the snippet below to your main.js
file.
1async function pushData(data) {2 const res = await fetch('/api/channels-event', {3 method: 'POST',4 headers: {5 'Content-Type': 'application/json',6 },7 body: JSON.stringify(data),8 });9 if (!res.ok) {10 console.error('failed to push data');11 }12}
Using Vercel CLI, add the following Secrets to your account and expose them as environment variables.
1vercel secrets add channels-app-id [Your Channel's app ID]
1vercel secrets add channels-app-secret [Your Channel's app Secret]
Note: Since the app-key
and cluster
are already exposed on the client and are not sensitive, you do not need to add them as secrets.
Next, create a minimal vercel.json
file to expose your secrets as environment variables, replacing app-key
and cluster-region
with the values provided by Channels.
1{2 "version": 2,3 "env": {4 "APP_ID": "@channels-app-id",5 "KEY": "app-key",6 "SECRET": "@channels-app-secret",7 "CLUSTER": "cluster-region"8 }9}
Add the dependencies for the Serverless Function from inside the /api
directory.
1cd api && npm init -y && npm i pusher
Create a channels-event.js
file inside the /api
directory that initializes a new Channels object and receives data from the req.body
helper method, before invoking channels.trigger
to register the event.
1const Channels = require('pusher');2
3const {4 APP_ID: appId,5 KEY: key,6 SECRET: secret,7 CLUSTER: cluster,8} = process.env;9
10const channels = new Channels({11 appId,12 key,13 secret,14 cluster,15});16
17module.exports = (req, res) => {18 const data = req.body;19 channels.trigger('event-channel', 'event-name', data, () => {20 res.status(200).end('sent event successfully');21 });22};
When channels.trigger
is called, an event will be broadcast to all subscribed clients.
Step 3: Deploying with Vercel
To deploy your Channels app with Vercel for Git, make sure it has been pushed to a Git repository.
Import the project into Vercel using your Git provider of choice.
After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.
You can find a full code example of an app made with this guide in the Vercel repository on GitHub, along with the live example deployed with Vercel.