Skip to main content
Version: 1.2.x

Notify Attendees in Realtime - Flutter

When doing livestream, you may want to broadcast message to all the viewers at once.

Let us see, how we can use PubSub to implement this functionality. If you are not familiar with the PubSub mechanism you can follow this guide.

Notifying Attendees

  1. We will be creating a button and text input to take the message input and we will publish a message to the topic NOTIFY_ATTENDEES
import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class NotifyView extends StatefulWidget {
final Room room;
...
}

class _NotifyViewState extends State<NotifyView> {

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:(){
if(!msgTextController.text.trim().isEmpty){
widget.room.pubSub
.publish(
"NOTIFY_ATTENDEES",
msgTextController.text,
const PubSubPublishOptions(
persist: true),
)
.then(
(value) => msgTextController.clear())
}
},
child: const Text("Notify Attendees"),
),
],
),
]
);
}

}
  1. Now let us show an alert to all the viewers displaying the message posted by the speaker.
import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

class ViewerView extends StatefulWidget {
final Room room;
...
}

class _ViewerViewState extends State<ViewerView> {

@override
void initState() {
...

// Subscribing 'NOTIFY_ATTENDEES' Topic
widget.meeting.pubSub
.subscribe("NOTIFY_ATTENDEES", messageHandler);
}

//Handler which will be called when new mesasge is
//These is where we will show the message
void messageHandler(PubSubMessage message) {
if(context.mounted && widget.room.localParticipant.mode == MOde.VIEWER){
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text(
message.message,
overflow: TextOverflow.fade,
),
));
}
}

@override
Widget build(BuildContext context) {
return Column(
children:[
...
]
);
}

@override
void dispose() {
// Unsubscribe
widget.room.pubSub.unsubscribe("NOTIFY_ATTENDEES", messageHandler);
super.dispose();
}
}

API Reference

The API references for all the methods and events utilized in this guide are provided below.

Got a Question? Ask us on discord