Type a message, press Enter, and watch it come back through PubNub. Open a second tab to chat between the two. The whole chat is one publish, one subscribe, and one listener in plain JavaScript.
This demo is a single HTML page. It loads the PubNub JavaScript SDK from the CDN and uses three calls: it adds a listener, subscribes to the 10chat channel, and publishes what you type when you press Enter. Every message, including your own, reaches the page through that subscription. The code panel next to the chat shows the same lines.
It's kept small on purpose. There are no user names, no message history, and no rooms. A new tab starts empty and only shows messages sent while it's open. The demo runs on PubNub's public demo keys, so anyone else on the demo channel can see what you send. To go further, follow the chat tutorial, which adds channel lists, typing indicators, and more.
Type in the box and press Enter. The page calls pubnub.publish() with your text on the 10chat channel and clears the box.
The page doesn't draw your message when you send it. It waits for it to arrive through the subscription, like everyone else's, and marks it "(You)" when the publisher matches your user ID.
Open the demo in another tab or on another device. Each copy gets its own random user ID and subscribes to the same channel, so messages from one show up in the other.
On wider screens, a panel next to the chat shows the PubNub code that runs it: the setup, the listener, the subscribe call, and the publish on Enter.
The demo uses the shared demo keys. Create a free account, copy your publish and subscribe keys from the Admin Portal, and paste them into index.html to get a private channel.
Clone the repository, add your own keys, and open the page in two tabs. It has no build step and no dependencies to install.
GitHub
Clone the repository and replace the 'demo' publish and subscribe keys in index.html with the keys from your PubNub account. Then open index.html in your browser.
git clone https://github.com/PubNubDevelopers/JavaScript-Simple-Chat.gitLog in as a support agent or as a customer and see how support chat, bot-to-agent handoff, and case management work in real time. Built with React and the PubNub Chat SDK.
Log in as two users on two simulated phones, send and request money, and chat about it in the same conversation. Built with Next.js and the PubNub Chat SDK.
Sketch on a shared canvas with anyone who opens the demo. Strokes, cursors, and names sync live, built with plain JavaScript and the PubNub JavaScript SDK.
Bring chat, live updates, and real-time interactions into your application without building the infrastructure from scratch.
