Chat using PubSub - Flutter
For the communication or any kind of messaging in between the participants, VideoSDK provides pubSub which use Publish-Subsciribe mechanism and can be used to develope wide varitey of functionalities. For example, participants could use it to send chat messages to each other, share files or other media, or even trigger actions like muting or unmuting audio or video.
Now we will see, how we can use PubSub to implement Chat functionality. If you are not familiar with the PubSub mechanism, you can follow this guide.
PubSub calls need a joined room, so show the chat, and subscribe, after Events.roomJoined. publish(), subscribe() and unsubscribe() return a Future that throws a VideoSDKError when the SDK refuses the call, for example 3035 when the room is not joined. Every call site needs a catch or a .catchError — an unhandled one becomes a runtime async error. See the Migration Guide.
Implementing Chat
Group Chat
- First step in creating a group chat is choosing the topic which all the participants will publish and subscribe to send and receive the messages. We will be using
CHATas the topic for this one. So let us lets create a message input and send button to publish the messages using thepubSubfrom theRoomobject.
import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';
class ChatView extends StatefulWidget {
final Room room;
...
}
class _ChatViewState extends State<ChatView> {
final msgTextController = TextEditingController();
@override
void initState() {
...
}
@override
Widget build(BuildContext context) {
return Column(
children:[
Row(
children: [
Expanded(
child: TextField(
style: TextStyle(
fontSize:16,
fontWeight: FontWeight.w500,
),
controller: msgTextController,
onChanged: (value) => setState(() {
msgTextController.text;
}),
decoration: const InputDecoration(
hintText: "Write your message",
border: InputBorder.none,
),
),
),
ElevatedButton(
onPressed:() async {
if(!msgTextController.text.trim().isEmpty){
try {
await widget.room.pubSub.publish(
"CHAT",
msgTextController.text,
const PubSubPublishOptions(persist: true),
);
msgTextController.clear();
} on VideoSDKError catch (e) {
// Not sent — leave the text in place so it can be retried.
debugPrint("Publish failed: ${e.code} ${e.name}");
} catch (e) {
// Anything else that went wrong.
debugPrint("Publish failed: $e");
}
}
},
child: const Text("Send Message"),
),
],
),
]
);
}
}
- Final step in the group chat would be to display the messages others send. For this we will subscribe to the topic
CHATwith aPubSubMessageListener. New messages arrive ononMessageReceived. Messages published withpersist: truebefore you subscribed arrive ononOldMessagesReceived, so the list starts with the chat history.
import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';
class ChatView extends StatefulWidget {
final Room room;
...
}
class _ChatViewState extends State<ChatView> {
// Messages on the 'CHAT' topic
final List<PubSubMessage> messages = [];
// One listener object, passed to both subscribe() and unsubscribe()
late final PubSubMessageListener chatListener = PubSubMessageListener(
onMessageReceived: messageHandler,
onOldMessagesReceived: (oldMessages, info) {
if (mounted) {
setState(() => messages.insertAll(0, oldMessages));
}
},
);
@override
void initState() {
...
// Subscribing 'CHAT' Topic
subscribeToChat();
}
Future<void> subscribeToChat() async {
try {
await widget.room.pubSub.subscribe("CHAT", chatListener);
} catch (e) {
// Called from initState(), which cannot await, so failures are caught here.
debugPrint("Subscribe failed: $e");
}
}
//Handler which will be called for every new message on the topic
void messageHandler(PubSubMessage message) {
if (mounted) {
setState(() => messages.add(message));
}
}
@override
Widget build(BuildContext context) {
return Column(
children:[
Expanded(
child: SingleChildScrollView(
reverse: true,
child: Column(
children: messages
.map(
(message) => Text(
message.message
),
)
.toList(),
),
),
),
...
//Send Message code Here
]
);
}
@override
void dispose() {
// Unsubscribe. dispose() cannot await, so the failure is logged instead.
// The listener is removed even when this call fails.
widget.room.pubSub
.unsubscribe("CHAT", chatListener)
.catchError((Object e) => debugPrint("Unsubscribe failed: $e"));
super.dispose();
}
}
Private Chat
In the above example, if you want to convert into the private chat between two participants, then all you have to do is pass sendOnly parameter in PubSubPublishOptions. A participant listed in sendOnly receives the message only if they are subscribed to the topic.
import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';
class ChatView extends StatefulWidget {
final Room room;
...
}
class _ChatViewState extends State<ChatView> {
//...
@override
Widget build(BuildContext context) {
return Column(
children:[
Row(
children: [
Expanded(
child: TextField(
style: TextStyle(
fontSize:16,
fontWeight: FontWeight.w500,
),
controller: msgTextController,
onChanged: (value) => setState(() {
msgTextController.text;
}),
decoration: const InputDecoration(
hintText: "Write your message",
border: InputBorder.none,
),
),
),
ElevatedButton(
onPressed:() async {
if(!msgTextController.text.trim().isEmpty){
// Pass the participantId of the participant to whom you want to send the message.
try {
await widget.room.pubSub.publish(
"CHAT",
msgTextController.text,
const PubSubPublishOptions(
persist: true, sendOnly: ["xyz"]),
);
msgTextController.clear();
} on VideoSDKError catch (e) {
// Not sent — leave the text in place so it can be retried.
debugPrint("Publish failed: ${e.code} ${e.name}");
} catch (e) {
// Anything else that went wrong.
debugPrint("Publish failed: $e");
}
}
},
child: const Text("Send Message"),
),
],
),
]
);
}
}
Displaying Latest Message Notification
You may want to show the notification to the user when new message arrives. So lets continue our example and add alert for the new messages. Stored messages arrive on onOldMessagesReceived, so onMessageReceived only sees new ones.
import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';
class ChatView extends StatefulWidget {
final Room room;
...
}
class _ChatViewState extends State<ChatView> {
@override
void initState() {
...
}
//Handler which will be called for every new message on the topic
void messageHandler(PubSubMessage message) {
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text(
message.message,
overflow: TextOverflow.fade,
),
));
setState(() => messages.add(message));
}
@override
Widget build(BuildContext context) {
return Column(
children:[
...
]
);
}
@override
void dispose() {
...
}
}
Downloading Chat Messages
All the messages from the PubSub which where published with persist : true and can be downloaded as an .csv file. This file will be available in the VideoSDK dashboard as well as throught the Sessions API.
API Reference
The API references for all the methods and events utilised in this guide are provided below.
Got a Question? 
Ask us on discord
