Code for the PubNub tutorial Build a JavaScript chat app with PubNub: a browser chat in plain HTML and JavaScript, with no build step and no server.
Tested with the PubNub JavaScript SDK 13.1.3 (October 2026).
| Folder | Adds |
|---|---|
Step 1 - Chat Layout |
Page layout, no chat logic |
Step 2 - Basic Chat |
PubNub client, channel subscription, publish and receive messages |
Step 3 - Add User Presence |
Live count of online users (Presence) |
Step 4 - Add Message Persistence |
Last 10 messages on load (Message Persistence) |
Step 5 - Add Usernames |
Display names sent with each message (saved in localStorage) |
Step 6 - Message Timestamps |
Send time on every message |
The root index.html is the finished app (Step 6).
The code uses PubNub's public demo keys, so it runs as is. Anyone with the same keys can read and write the same channels, so for your own app replace 'demo' in publishKey and subscribeKey in index.html with keys from your own keyset. It needs:
- Presence tracking events on all channels, or a Presence Management rule for
chat-channel(step 3). New keysets track presence on selected channels only. - Message Persistence on (step 4). It's on by default.
Open index.html in two browser tabs, or serve the folder: python3 -m http.server 8000 and go to http://localhost:8000/.