Skip to main content
Version: 0.x.x

Chat during Live Stream - React Native

Enhance your live stream experience by enabling real-time audience chat using VideoSDK's usePubSub hook. Whether you're streaming a webinar, online event, or an interactive session, integrating a chat system lets your viewers engage, ask questions, and react instantly. This guide shows how to build a group or private chat interface for a live stream using the Publish-Subscribe (PubSub) mechanism.

This guide focuses on using PubSub to implement Chat functionality. If you are not familiar with the PubSub mechanism and usePubSub hook, you can follow this guide.

Implementing Chat​

Group Chat(Public Chat for All Viewers)​

To allow your entire audience to chat during the stream:

  1. Choose a topic name (e.g. "CHAT") that everyone will publish and subscribe to. Retrieve the publish() method and messages array using usePubSub.
// importing usePubSub hook from react-native-sdk
import { usePubSub } from "@videosdk.live/react-native-sdk";

function ChatView() {
// destructure publish method from usePubSub hook
const { publish, messages } = usePubSub("CHAT");

return null;
}
  1. Next create a message input and a send button to publish the messages.
import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';

function ChatView() {
// destructure publish method from usePubSub hook
const { publish, messages } = usePubSub("CHAT");

// State to store the user typed message
const [message, setMessage] = useState("");

const handleSendMessage = () => {
// Sending the Message using the publish method
publish(message, { persist: true });
// Clearing the message input
setMessage("");
};

return (
<View style={styles.container}>
<TextInput
style={styles.input}
value={message}
onChangeText={setMessage}
placeholder="Type your message..."
/>
<TouchableOpacity
style={styles.button}
onPress={handleSendMessage}
>
<Text style={styles.buttonText}>Send Message</Text>
</TouchableOpacity>
</View>
);
}
  1. Display incoming chat messages from all users, creating a real-time chat feed during the stream.
import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text, StyleSheet, ScrollView } from 'react-native';

function ChatView() {
const { publish, messages } = usePubSub("CHAT");
const [message, setMessage] = useState("");

const handleSendMessage = () => {
publish(message, { persist: true });
setMessage("");
};

return (
<View style={styles.container}>
<ScrollView style={styles.messagesContainer}>
<Text style={styles.heading}>Messages:</Text>
{messages.map((msg, index) => (
<View key={index} style={styles.messageBox}>
<Text style={styles.senderName}>{msg.senderName}</Text>
<Text style={styles.messageText}>{msg.message}</Text>
</View>
))}
</ScrollView>

<View style={styles.inputContainer}>
<TextInput
style={styles.input}
value={message}
onChangeText={setMessage}
placeholder="Type your message..."
/>
<TouchableOpacity
style={styles.button}
onPress={handleSendMessage}
>
<Text style={styles.buttonText}>Send</Text>
</TouchableOpacity>
</View>
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
},
messagesContainer: {
flex: 1,
marginBottom: 16,
},
heading: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 12,
},
messageBox: {
backgroundColor: '#f0f0f0',
padding: 12,
borderRadius: 8,
marginBottom: 8,
},
senderName: {
fontWeight: 'bold',
marginBottom: 4,
},
messageText: {
fontSize: 16,
},
inputContainer: {
flexDirection: 'row',
alignItems: 'center',
},
input: {
flex: 1,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 8,
padding: 12,
marginRight: 8,
},
button: {
backgroundColor: '#007AFF',
padding: 12,
borderRadius: 8,
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
});

Private Chat (1:1 between Host and Viewer)​

Private messaging is ideal when a host or moderator needs to directly respond to a viewer's question. This can be achieved using the sendOnly property.

function ChatView() {
const { publish, messages } = usePubSub("CHAT");
const [message, setMessage] = useState("");

const handleSendMessage = () => {
// Pass the participantId of the participant to whom you want to send the message
publish(message, { persist: true, sendOnly: ['XYZ'] });
setMessage("");
};

// ... rest of the component
}

Display Latest Message Notification​

To alert hosts/moderators about new incoming chat messages in real-time:

import { Alert } from 'react-native';

function ChatView() {
const { publish, messages } = usePubSub("CHAT", {
onMessageReceived: (message) => {
Alert.alert(
"New Message",
`${message.senderName} says: ${message.message}`
);
}
});

// ... rest of the component
}

Downloading Chat Messages​

All the messages from PubSub published with persist : true can be downloaded as an .csv file. This file will be accessible in the VideoSDK dashboard and through the Sessions API.

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