Live Quiz Kafka WebGateway use case
Last edition of the World Cricket Cup, the OTT platform Disney+ Hotstar counted 25.3 million simultaneous viewers, a world record in terms of audience. The OTT platform uses gamification to engage with the large number of cricket fans in India, leveraging the Watch ’N Play interactive game, where viewers of a live cricket match can answer questions in real time about what happens on the next ball to win points and redeem prizes.
The demo consists of the following components alongside WebGateway and Kafka:
- UI: A real-time web application (WebGateway subscriber and publisher)
- Questions Generator: Generates live questions (Kafka producer)
- Answers Processor: Processes the answer received from a player (Kafka consumer) and publishes the new points won by that player (Kafka producer)
- Leaderboard Processor: Updates the leaderboard with the new points won by a player (Kafka consumer), gets a leaderboard request (Kafka consumer), and publises the current leaderboard following a request (Kafka producer)
The UI of the demo consists of two views: a Play view and a Leaderboard view.
The following Kafka topics, and keys are used to model the real-time interactions of the Play view:
| Topic | Key | Description |
|---|---|---|
| question | null | Used by the Questions Generator to generate live questions |
| answer | x | Used by the player with the id x to deliver the answer to a live question |
| result | x | Used by the Answers Processor to let the player with the id x, as well as the Leaderboard Processor, know how many points the player won after having answered a live question |
The real-time information flow between the components of the demo is depicted in the following diagram:
A Player x that opens the Play view connects to WebGateway Server using a persistent WebSocket connection and subscribes to the subjects /question and /result/x. As explained above, WebGateway Server is configured to subscribe to the Kafka topics question and result, Leaderboard Processor subscribes to the Kafka topic result, and Answers Processor subscribes to the Kafka topic answer. The workflow of messages is as follows:
- Questions Generator generates a live question every 20 seconds by publishing a message on the topic question ❶
- WebGateway Server is subscribed to the Kafka topic question, so it gets the live question ❷ and streams it to all players subscribed to the subject /question
- Player x is subscribed to the subject /question, so it gets the live question ❸
- Player x has up to 10 seconds to answer the live question by publishing to WebGateway Server an answer message on the subject /answer/x ❹
- WebGateway Server gets the answer message on the subject /answer/x and publishes it to Kafka on the topic answer with the key x ❺
- Answers Processor is subscribed to the topic answer, so it consumes the answer message ❻, checks if the answer provided by Player x is correct, and sends back to Kafka the points won by the Player by publishing a result message on the topic result with the key x ❼
- The result message is consumed by the Leaderboard Processor as it is subscribed to the topic result and updates its list of top players ❽. This message is also consumed by WebGateway Server as it is subscribed to the Kafka topic result ❽
- WebGateway Server delivers the result message to any player subscribed to the subject /result/x
- Finally, because Player x is subscribed to the subject /result/x, it gets the result message with the points it won ❾
The following subjects, Kafka topics, and keys are used to model the real-time interactions of the Leaderboard view:
| Topic | Key | Description |
|---|---|---|
| gettop | null | Used by any player to request the leaderboard (the id x of the player is included in the content of the message) |
| top | x | Used by Leaderboard Processor to let the player with the id x, which requested the leaderboard, know the current list of the top 10 players |
The real-time information flow between the components of the demo using these subjects, topics, and keys is depicted in the following diagram:
A Player x that opens the Leaderboard view connects to WebGateway Server using a persistent WebSocket connection and subscribes to the subject /top/x. As explained above, WebGateway Server is configured to subscribe to the Kafka topics question, result, and top, and Leaderboard Processor subscribes to the Kafka topics result and gettop. The workflow of messages is as follows:
- Player x publishes a request message to WebGateway Server containing its id x on the subject /gettop to get the updated list of the top 10 players ❶
- WebGateway Server gets the request message on the subject /gettop and sends it to Kafka on the topic gettop with a null key ❷, according to the automatic mapping between topics and subjects
- Leaderboard Processor gets the request message as it is subscribed to the topic gettop ❸
- Once the request is received, the Leaderboard Processor sends back to Kafka a response message with the current leaderboard on the topic top with the key x ❹
- WebGateway Server is subscribed to the topic top, so it gets the response message ❺, and pushes it to any player subscribed to the subject /top/x
- Player x is subscribed to the subject /top/x, so it gets the response message with the updated list of the top 10 players ❻
Example based from https://www.confluent.io/blog/real-time-gaming-infrastructure-kafka-ksqldb-websockets/.