Pick a fan and watch a football match with live shopping and betting on top. Chat, react with emoji, add featured products to your bag, and bet coins on what happens next. Built with the PubNub Chat SDK.
This demo shows a live shopping experience during a football match. When you press Start Demo, a Node.js simulator replays the match on a timeline. It publishes commentary, crowd chat, reactions, featured products, and bets, each on its own PubNub channel. It also publishes the playback position, so every viewer's video stays in sync and late joiners jump to the right moment. The web app is built with Next.js and the PubNub Chat SDK, which runs on the PubNub JavaScript SDK.
When you pick a fan, the app gets an Access Manager token for that user and loads their coins and shopping bag from App Context. The demo was built with Red5 Pro: the match itself is a recorded video, and the code includes hooks for a Red5 Pro WHIP/WHEP stream, which the hosted version doesn't use. The source code is open on GitHub, and the in-app tours explain how each part is built.
Send messages over the stream next to the simulated crowd. Every viewer gets them as they arrive through the Chat SDK.
The viewer count in the top bar comes from Presence. It changes as people join and leave the stream.
Tap an emoji under the stream. It is published to everyone watching and floats up on every screen.
Products appear on every screen at set moments in the match. Add them to your bag and change quantities. The bag is saved in your App Context user profile.
Answer in-play questions such as who gets the first corner, and pick your stake. Results arrive as messages, winnings are paid in coins, and your balance is saved in App Context.
Share your camera for 60 seconds in a picture-in-picture box, and other viewers can watch it. The browsers connect over WebRTC, and PubNub carries the signaling messages.
Clone the finished app, add your PubNub keys, and run the web app and the match simulator side by side.
GitHub
The complete source. Add your keys to web/.env and backend/.env, run yarn install and yarn dev in web, then npm install and npm run generator in backend (Node.js 22 or later).
git clone https://github.com/PubNubDevelopers/red5-live-shopping.gitThis live-streaming demo shows how you can create interactive experiences that engage audiences in real-time as well as tools to moderate your audience.
Building a live event app such as a sports match, a concert, or streamed media event? Easily add real-time features like chat, polls, reactions, data sync, and gamification with PubNub
Streaming data is a continuous flow of information from various sources in real time. PubNub’s live streaming APIs enable you to generate, process, and deliver streaming data to any number of subscribers.
Bring chat, live updates, and real-time interactions into your application without building the infrastructure from scratch.
