How-to Add Moderation to your Live Events Application

Moderation is not the first thing on a team's mind when they code an application, but it is essential to the user experience. Sometimes, these features are necessary for release on the Google Play Store and Apple Store. Moderation allows users to contribute to ensuring a safe environment at all times on your application, helping you quickly identify inappropriate behaviour, harassment, and abuse. This protective involvement enhances users' safety and alleviates the burden on the application’s moderation team by prioritizing issues that require attention.

Coding these moderation features is easier said than done, and it is probably not the most enjoyable thing to develop. As your user base scales, scaling your application might become increasingly difficult. On the other hand, you might have more and more things you are allowing your users to report with increased complexity of how the user reports another user and how that gets received by your moderation team. However, PubNub has made it easier than ever to implement these moderation features into your application regardless of the size of your user base. You can easily integrate a solution into your application utilizing the PubNub Chat SDK and a moderation solution that can be used by just sending PubNub messages out of the box.

In this how-to, we will focus on utilizing the Chat SDK to track moderation events using a live-streaming application. With a live streaming chat, messages come quickly from people all across the world, and we will have to utilize the users of the stream and the streamer themselves to detect these messages and report them to the moderation team. At the end of the how-to, we will go over how you can moderate a chat application out of the box by just sending PubNub messages with no additional functionality added to the application itself.

Getting Started with PubNub

Before implementing moderation capabilities into our application, we must first understand how to configure your application to utilize the PubNub Chat SDK to take advantage of the moderation features. What is PubNub PubNub is a real-time communication platform that provides APIs and infrastructure for building interactive applications. It offers features like real-time messaging, presence detection, and data streaming, enabling developers to create chat apps, live updates, IoT applications, and more. PubNub is designed for high scalability and low latency, ensuring reliable performance for millions of concurrent users across various devices and networks. For more information on PubNub and how to get started, visit our docs or read our blog on what PubNub is.

What is the PubNub Chat SDK

The PubNub Chat SDK is built on top of our PubNub JavaScript SDK. It provides several out-of-the-box features, like read receipts, @mentions, moderation, and more, that can be integrated into your chat while being integrated into your UI. The Chat SDK is available for TypeScript and JavaScript applications, allowing you to quickly build a full-fledged chat application.

Please refer to our documentation and the sample chat application to get started with the chat application. Our tutorial will walk you through the basic functionality of the Chat SDK and touch on some more advanced features whilst our hosted demo will show the Chat SDK in action.

For this how-to, we will use the live events application demo made with the Chat SDK to walk through the moderation functionality.

For more content regarding the Chat SDK, please refer to our series of how-tos:

Install and Configure the PubNub Chat SDK

Note: If you don’t want to follow along step-by-step, you can check out the live events application GitHub for a mature application with all the moderation functionality.

Since we are going to ban and mute users from a chat, we will work on the application's server side. This is because we will need to initialize the PubNub instance with a secret key, which should never be put on the client side of your application. We will also need to create a JavaScript server and install the ChatSDK dependency there.

This how-to will assume you are downloading the ChatSDK into some sort of JavaScript project.

Visit the PubNub Chat SDK npm package and run the following command.

Create a free PubNub account and obtain your publish, subscribe, and secret key. You will also need to enable message persistence and app context. Message persistence will allow messages to stay in the chat depending on the retention rate set for them. Message Context will allow us to store and create user objects, which is important for reporting a specific user.
Create a JavaScript Project and initialize the PubNub instance by following the code below. The secret key should always remain private and never be put onto the application's client side. However, including it on the server side is important because it will allow us to send different moderation events through the PubNub network.

Configure the Client Side with the PubNub Chat SDK

Before we start, let’s explain what we are setting up. In this scenario, you have a user who can report messages or other users. Secondly, we need a moderator who can take action and ban or mute users from a chat. The moderator must also be able to view what messages/users have been reported and the status of all users currently on the application, whether that is unrestricted or restricted.

Follow the steps above again and install the Chat SDK dependency into the client side of your application.

On the client side, we will have to initialize a channel instance and user instance. The channel instance is going to define what chat we are sending moderation events through. Applications can have many different chats ranging from 1-1 private chats, group chats, and even public chats. So we will first start off on defining a public channel meaning anyone can join and a user.

First let’s define a chat instance. However, since we are on the client side we should not include the secret key when doing this.

Using the chat instance we can now define a channel instance. In this how-to we will define a public conversation meaning any user on your pubnub network will be able to join the channel as no restrictions are set.

Next let’s define a user instance so we have some sort of login mechanism and are able to set restrictions for that user.

Adding in Moderation Events (Ban/Mute)

Next, let’s focus on setting restrictions (banning/muting) for users in the chat. Setting up the ban and mute functionality on the server side will give us access to an API capable of banning and muting users from the client side without exposing the secret key. On the server side of our code we can define a function called setRestrictions. This function will take a channel_id and user_id you are trying to add restrictions to along with the status of the user if they have been muted or banned.

After successfully running the server we will set up an API component from the client side to call the function.

Next, we need to define the client side functions in the Next.js project to mute and ban users. Following the code below we will first check if you are the broadcaster to the live stream application if you are you should have the ability to mute a user in the chat.

Following the same logic we can also implement banning a user from the chat which will allow us to remove users not only from sending messages through the channel but not being able to read the chat as well.

In this case we assume if you have been banned from the channel you have also been muted so we can hardcode the true variable when sending a request to the server.

Listening to Moderation Events (Ban/Mute)

Now that we can send moderation events the next thing we should ask ourselves is how are we going to retrieve these moderation events as a user. The user has to know if he has been banned or muted with some sort of dialog that warns them.

In this case we need to set up event listeners that are specific to the individual user object or instance we created at the beginning of the how-to. To achieve this we will access the chat instance declared at the beginning of this how-to and pass the current user_id that is signed into that instance as the channel parameter to listen for user moderation events.

Summary

Now you should have a server component and client component with the functionality to mute/ban users from within your application. This is a good first step into implementing moderation in real-time into your application however there is so much more that can be done utilizing the Chat SDK. To implement more moderation features refer to the list below and check out our docs on all the features the Chat SDK supports.

For the full code check out the Github of the live events demo or to use the demo check out our demos page for live events.

If you need help or support, feel free to reach out to our dedicated support team or email our developer relations team at devrel@pubnub.com.