For AI agents: this page in Markdown: https://www.pubnub.com/docs/sdks/javascript/quickstart-web.md. Documentation index: https://www.pubnub.com/llms-full.txt.

Quickstart: PubNub JavaScript SDK in the browser

This quickstart walks you through a "Hello, World" web page that connects to PubNub, subscribes to a channel, and publishes a message that arrives in the same page. You need one HTML file and a browser.

Building for Node.js, React, or React Native instead? Refer to Choose your runtime.

Before you begin​

You need a modern web browser and a PubNub account.

Get your PubNub keys​

First, get your PubNub keys:

  • Sign in or create an account on the PubNub Admin Portal
  • Create an app (or use an existing one)
  • Find your publish and subscribe keys in the app dashboard

When you create an app, PubNub automatically generates a keyset. You can use the same keyset for development and production, but we recommend separate keysets for each environment to improve security and management.

Install​

SDK version

Always use the latest SDK version to have access to the newest features and avoid security vulnerabilities, bugs, and performance issues.

To integrate PubNub into your web project, add the JavaScript SDK to your HTML page using the CDN:

1<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.13.1.3.js"></script>

You can also use the minified version for production by changing the file name to pubnub.13.1.3.min.js.

Using a bundler?

If your project uses a bundler such as Vite or webpack, install the pubnub package from npm instead. For package managers and TypeScript, refer to Set up your JavaScript environment.

Initialize​

Create an instance of the PubNub class with your keys and a unique user ID. Replace the placeholders with the publish and subscribe keys from the Admin Portal.

1

Always set the userId to uniquely identify the user or device that connects to PubNub. Keep it unchanged for the lifetime of the user or the device. If you don't set the userId, you won't be able to connect to PubNub.

For more information, refer to the Configuration section of the SDK documentation.

Subscribe​

Listeners help the application react to events and messages. This listener adds each incoming message to the list on the page and logs when the client connects.

1

To receive messages on a channel, you need to subscribe to it. PubNub offers an entity-based subscription approach that gives you more control and flexibility.

1

For complete details on subscribing and handling events, refer to the Subscribe section of the SDK documentation.

Publish​

When you publish a message to a channel, PubNub delivers that message to everyone who is subscribed to that channel. A message can be any JSON-serializable data (such as objects, arrays, integers, strings) that is smaller than 32 KiB.

This code publishes the text from the input box when you click Send.

1

For more information, refer to the Publish section of the SDK documentation.

Run​

The page below combines the CDN script tag and all the code from the previous steps. Save it as index.html, replace the three placeholders, and open the file in your browser.

1

Verify that it works:

  1. Open the browser console. You should see Connected to PubNub.
  2. Type Hello, world! in the input box and click Send.
  3. The message appears in the list on the page as YOUR_USER_ID: Hello, world!, and the console logs the timetoken of the published message.
  4. To see real-time communication between two clients, open the same file in a second browser tab, and send a message from either tab. It appears in both lists.

If the message does not arrive, refer to Troubleshooting. If the console shows a 403 (Access Denied) error, your keyset may have Access Manager enabled. Verify that your token has read permissions for the subscribed channel. Refer to Configure access control.

Next steps​

You created your first PubNub JavaScript application. Here is what to explore next:

Was this page useful?

Last updated on