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"),
            ),
          ],
        ),
      ]
    );
  }

}

2. 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.

• PubSub