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. Do not persist it. A persisted message is delivered again to everyone who subscribes to the topic later, so a viewer who joins late would see every old notification.

import 'dart:developer';
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: () async {
                if (msgTextController.text.trim().isEmpty) return;
                try {
                  await widget.room.pubSub.publish(
                    "NOTIFY_ATTENDEES",
                    msgTextController.text,
                    const PubSubPublishOptions(persist: false),
                  );
                  msgTextController.clear();
                } on VideoSDKError catch (error) {
                  log("Could not notify attendees: ${error.code} ${error.name}");
                }
              },
              child: const Text("Notify Attendees"),
            ),
          ],
        ),
      ]
    );
  }

}

2. Now let us show an alert to all the viewers displaying the message posted by the speaker. Subscribe from the view that only viewers see, such as the ILSViewerView from Manage Roles. room.localParticipant.mode also tells you whether you are still a viewer, because it follows every mode change.

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:videosdk/videosdk.dart';

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

class _ViewerViewState extends State<ViewerView> {
  // Keep the listener: unsubscribe() takes the same object
  late final PubSubMessageListener listener =
      PubSubMessageListener(onMessageReceived: messageHandler);

  @override
  void initState() {
    ...

    // Subscribing 'NOTIFY_ATTENDEES' Topic
    subscribeToNotifications();
  }

  Future<void> subscribeToNotifications() async {
    try {
      await widget.room.pubSub.subscribe("NOTIFY_ATTENDEES", listener);
    } on VideoSDKError catch (error) {
      log("Could not subscribe: ${error.code} ${error.name}");
    }
  }

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

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

  @override
  void dispose() {
    // Unsubscribe. The listener stops at once, even when this call fails
    // because the room has already left.
    widget.room.pubSub
        .unsubscribe("NOTIFY_ATTENDEES", listener)
        .catchError((Object error) {});
    super.dispose();
  }
}

API Reference

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

• PubSub