Realtime Cloud Messaging is a highly-scalable pub/sub message broker, allowing you to broadcast messages to millions of users, reliably and securely. It's all in the cloud so you don't need to manage servers.
React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React.
More information can be found on the Realtime native Android SDK reference documentation.
Create a new react-native project. Check react-native getting started
Execute
npm install --save react-native-realtimemessaging-android
In android/settings.gradle
...
include ':react-native-realtime-messaging-android'
project(':react-native-realtime-messaging-android').projectDir = new File(settingsDir,'../node_modules/react-native-realtimemessaging-android/reactnativemessagingandroid')
In android/app/build.gradle
...
dependencies {
...
compile project(':react-native-realtime-messaging-android')
}
Add new RealtimeMessagingPackage()
to the getPackages()
method return list in MainApplication.java
.
import co.realtime.reactnativemessagingandroid.RealtimeMessagingPackage; //<-- import
public class MainApplication extends Application implements ReactApplication {
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RealtimeMessagingPackage() // <-- add RealtimeMessagingPackage object
);
}
...
Drag PROJECT_DIR/node_modules/react-native-realtimemessaging-android/RCTRealtimeMessagingAndroid.js
to the root of your project.
If you want to use push notifications, set MainActivity
extending RealtimePushNotificationActivity
.
import co.realtime.reactnativemessagingandroid.RealtimePushNotificationActivity;
public class MainActivity extends RealtimePushNotificationActivity {
...
}
You are ready to go.
import realtime from './RCTRealtimeMessagingAndroid';
var RCTRealtimeMessaging = new realtime();
In order to get event notifications from the native SDK, the JavaScript interface has two methods for adding and removing event registration.
RTEventListener(notification, callBack: Function)
RTEventListener registers a given event name on the notification field and a given callback function to be fired when the event occurs.
Example:
import realtime from './RCTRealtimeMessagingAndroid';
var RCTRealtimeMessaging = new realtime();
RCTRealtimeMessaging.RTEventListener("onConnected",this._onConnected),
RTRemoveEventListener(notification)
RTRemoveEventListener removes an event registration. After this method when the event occurs the callback will not be fired.
Example:
import realtime from './RCTRealtimeMessagingAndroid';
var RCTRealtimeMessaging = new realtime();
RCTRealtimeMessaging.RTEventListener("onConnected",this._onConnected),
RCTRealtimeMessaging.RTRemoveEventListener("onConnected"),
Complete event list:
onConnected - Occurs when the client connects
onDisconnect - Occurs when the client disconnects
onReconnect - Occurs when the client reconnects
onReconnecting - Occurs when the client is attempting to reconnect
onSubscribed - Occurs when the client has successfully subscribed a channel. The event notification data is {"channel":channel}
onUnSubscribed - Occurs when the client has successfully unsubscribed a channel. The event notification data is {"channel":channel}
onException - Occurs when there is an exception. The event notification data is {"error":error.localizedDescription}
onMessage - Occurs when a message is received. The event notification data is {"message": message,"channel": channel}
onMessageWithFilter - Occurs when a message is received using RTSubscribeWithFilter
. The event notification data is {"message": message,"channel": channel, "filtered":true}
, where the filtered property indicates wheter the server was able to successfully filter the message.
onMessageWithBuffer - Fired when a message was received in the specified channel subscribed with the RTSubscribeWithBuffer
.
onMessageWithOptions - Fired when a message was received in the specified channel subscribed with the RTSubscribeWithOptions
msgOptions - Dictionary where the message data was received
msgOptions = { channel, // Channel where the message was received seqId, // The message sequence id property filtered, // Indicates if server has filtered the message message // Content of the received message }
onPresence - Gets the subscriptions in the specified channel and if active the first 100 unique connection metadata:
{"result": result}
{"error": error}
onEnablePresence - Enables presence for the specified channel with the first 100 unique connection metadata:
{"result": result}
{"error": error}
onDisablePresence - Disables presence for the specified channel:
{"result": result}
{"error": error}
To configure your react-native project to receive push notifications you must follow this guide for the Android platform.
For handling push notifications ( sent using the Realtime mobile push notifications REST API) we added the following event listener:
Example:
componentDidMount: function(){
RCTRealtimeMessaging.RTCPushNotificationListener(this._onNotification);
},
_onNotification: function(data)
{
this._log("Received notification: " + JSON.stringify(data));
},
Connects the client to Realtime server with the given configuration.
Parameters
Example:
RCTRealtimeMessaging.RTEventListener("onConnected",function(){
console.log('Connected to Realtime Messaging');
}),
RCTRealtimeMessaging.RTConnect(
{
appKey:this.state.appKey,
token:this.state.token,
connectionMetadata:this.state.connectionMetadata,
clusterUrl:this.state.clusterUrl
});
Disconnects the client from the Realtime server.
Example:
RCTRealtimeMessaging.RTEventListener("onDisconnect", function(){
console.log('Disconnected from Realtime Messaging');
}),
RCTRealtimeMessaging.RTDisconnect();
Subscribes a pub/sub channel to receive messages.
Parameters
channel - Channel name
subscribeOnReconnected - Indicates whether the client should subscribe the channel when reconnected (if it was previously subscribed when connected).
Example:
RCTRealtimeMessaging.RTEventListener("onSubscribed", function(subscribedEvent){
console.log('Subscribed channel: ' + subscribedEvent.channel);
}),
RCTRealtimeMessaging.RTSubscribe("MyChannel", true);
Subscribes a channel using a filter, to receive only messages that validate the filter.
Parameters
channel - Channel name
subscribeOnReconnected - Indicates whether the client should subscribe to the channel when reconnected (if it was previously subscribed when connected).
filter - Filter to apply to messages
Example:
RCTRealtimeMessaging.RTSubscribeWithFilter("MyChannel", true, "message.a = 1");
Subscribes to a channel to receive messages sent to it with given options.
Parameters
Example:
var options = {
"channel":"YOUR_CHANNEL_NAME",
"subscriberId":"CLIENT_SUBSCRIBER_ID",
"filter":"MESSAGE_FILTER"
}
RCTRealtimeMessaging.RTSubscribeWithOptions(options);
Subscribes to a channel to receive messages published to it.
Parameters
Example:
RCTRealtimeMessaging.RTSubscribeWithBuffer("MyChannel", "CLIENT_SUBSCRIBER_ID");
Subscribes a pub/sub channel with Push Notifications Service, to receive messages even if the app is not running.
Parameters
channel - Channel name
subscribeOnReconnected - Indicates whether the client should subscribe to the channel when reconnected (if it was previously subscribed when connected).
Example:
RCTRealtimeMessaging.RTSubscribeWithNotifications("MyChannel", true);
Unsubscribes a channel.
Parameters
Example:
RCTRealtimeMessaging.RTUnsubscribe("MyChannel");
Sends a message to a pub/sub channel.
Parameters
channel - Channel name
message - The message to send (a string/stringified JSON object)
Example:
RCTRealtimeMessaging.RTSendMessage("Hello World","MyChannel");
Publish a message to a channel.
Parameters
Example:
RCTRealtimeMessaging.RTPublishMessage("MyChannel", "Hello World", ttl, function(error, seqId){
});
Enables presence for the specified channel with first 100 unique connection metadata.
Parameters
privateKey - The Realtime application private key
channel - Channel to enable presence
metadata - Sets to return metadata info
Example:
RCTRealtimeMessaging.RTEventListener("onEnablePresence", function(event){
if(event.result){
console.log('Realtime enablePresence result: ' + event.result);
}else{
console.log('Realtime enablePresence error: ' + event.error);
}
}),
RCTRealtimeMessaging.RTEnablePresence(aPrivateKey, channel, aMetadata);
Disables presence for the specified channel.
Parameters
privateKey - The Realtime application private key
channel - Channel to disable presence
Example:
RCTRealtimeMessaging.RTEventListener("onDisablePresence", function(event){
if(event.result){
console.log('Realtime disablePresence result: ' + event.result);
}else{
console.log('Realtime disablePresence error: ' + event.error);
}
}),
RCTRealtimeMessaging.RTDisablePresence(aPrivateKey, channel);
Gets a dictionary with the total number of subscriptions in the specified channel and if active the first 100 unique connection metadata of the subscribers.
Parameters
Example:
RCTRealtimeMessaging.RTEventListener("onPresence", function(event){
if(event.result){
console.log('Realtime presence result: ' + JSON.stringify(event.result));
}else{
console.log('Realtime presence error: ' + event.error);
}
}),
RCTRealtimeMessaging.RTPresence(channel);
Indicates whether a given channel is currently subscribed.
Parameters
channel - Channel name.
callback - Callback function to be called with the result (true or false).
Example:
RCTRealtimeMessaging.RTIsSubscribed("MyChannel", function(result){
if(result == true){
console.log('channel is subscribed');
}else{
console.log('channel is not subscribed');
}
});
Get the client heartbeat interval.
Parameters
Example:
RCTRealtimeMessaging.RTGetHeartbeatTime(function(result){
console.log('HeartbeatTime for this client is: ' + result);
});
Sets the client heartbeat interval.
Parameters
Example:
RCTRealtimeMessaging.RTSetHeartbeatTime(10);
Number of times the heartbeat can fail before the connection is reconnected
Parameters
Example:
RCTRealtimeMessaging.RTGetHeartbeatFails(function(result){
console.log('HeartbeatFails Time for this client is: ' + result);
});
Sets the number of times the heartbeat can fail before the connection is reconnected
Parameters
Example:
RCTRealtimeMessaging.RTSetHeartbeatFails(3);
Indicates whether the client heartbeat is active or not.
Parameters
Example:
RCTRealtimeMessaging.RTIsHeartbeatActive(function(result){
if(result == true){
console.log('heartbeat active');
}else{
console.log('heartbeat inactive');
}
});
Enables the client heartbeat.
Example:
RCTRealtimeMessaging.RTEnableHeartbeat()
Disables the client heartbeat.
Example:
RCTRealtimeMessaging.RTDisableHeartbeat()
'use strict';
import React, { Component } from 'react';
import realtime from './RCTRealtimeMessagingAndroid';
var RCTRealtimeMessaging = new realtime();
var messages = [];
import {
AppRegistry,
Image,
StyleSheet,
Text,
Navigator,
TextInput,
ScrollView,
TouchableHighlight,
ListView,
View
} from 'react-native';
var RealtimeRCT = React.createClass({
doConnect: function(){
this._log('Trying to connect!');
RCTRealtimeMessaging.RTEventListener("onConnected",this._onConnected),
RCTRealtimeMessaging.RTEventListener("onDisconnected",this._onDisconnected),
RCTRealtimeMessaging.RTEventListener("onSubscribed",this._onSubscribed),
RCTRealtimeMessaging.RTEventListener("onUnSubscribed",this._onUnSubscribed),
RCTRealtimeMessaging.RTEventListener("onException",this._onException),
RCTRealtimeMessaging.RTEventListener("onMessage",this._onMessage),
RCTRealtimeMessaging.RTEventListener("onPresence",this._onPresence);
RCTRealtimeMessaging.RTConnect(
{
appKey:this.state.appKey,
token:this.state.token,
connectionMetadata:this.state.connectionMetadata,
clusterUrl:this.state.clusterUrl,
projectId:'<YOUR_GOOGLE_PROJECT_NUMBER>'
});
},
componentDidMount: function(){
RCTRealtimeMessaging.RTPushNotificationListener(this._onNotification);
},
_onNotification: function(data) {
this._log("Received push notification: " + JSON.stringify(data));
},
componentWillUnmount: function() {
RCTRealtimeMessaging.RTDisconnect();
},
doDisconnect:function(){
RCTRealtimeMessaging.RTDisconnect();
},
doSubscribe: function(){
RCTRealtimeMessaging.RTSubscribe(this.state.channel, true);
// To subscribe using push notifications use the RTSubscribeWithNotifications method
},
doUnSubscribe: function(){
RCTRealtimeMessaging.RTUnsubscribe(this.state.channel);
},
doSendMessage: function(){
RCTRealtimeMessaging.RTSendMessage(this.state.message, this.state.channel);
},
doPresence: function(){
RCTRealtimeMessaging.RTPresence(
this.state.channel
);
},
_onException: function(exceptionEvent){
this._log("Exception:" + exceptionEvent.error);
},
_onConnected: function()
{
this._log("connected");
},
_onDisconnected: function(){
this._log("disconnected");
},
_onSubscribed: function(subscribedEvent)
{
this._log("subscribed channel " + subscribedEvent.channel);
},
_onUnSubscribed: function(unSubscribedEvent)
{
this._log("unsubscribed channel " + unSubscribedEvent.channel);
},
_onMessage: function(messageEvent)
{
this._log("received message: ["+messageEvent.message+"] on channel [" + messageEvent.channel+"]");
},
_onPresence: function(presenceEvent){
if (presenceEvent.error) {
this._log("Error getting presence: " + presenceEvent.error);
}else
{
this._log("Presence data: " + JSON.stringify(presenceEvent.result));
};
},
getInitialState: function() {
return {
clusterUrl: "http://ortc-developers.realtime.co/server/2.1/",
token: "SomeAuthenticatedToken",
appKey: "YOUR_APP_KEY",
channel: "yellow",
connectionMetadata: "clientConnMeta",
message: "some message",
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
};
},
_renderRow: function(rowData: string, sectionID: number, rowID: number) {
return (
<TouchableHighlight>
<View>
<View style={styles.row}>
<Text style={styles.text}>
{rowData}
</Text>
</View>
<View style={styles.separator} />
</View>
</TouchableHighlight>
);
},
_log: function(message: string)
{
var time = this.getFormattedDate();
time += " - " + message
var temp = [];
temp[0] = time;
for (var i = 0; i < messages.length; i++) {
temp[i+1] = messages[i];
};
messages = temp;
this.setState({
dataSource: this.getDataSource(messages)
});
},
getFormattedDate: function() {
var date = new Date();
var str = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
return str;
},
getDataSource: function(messages: Array<any>): ListView.DataSource {
return this.state.dataSource.cloneWithRows(messages);
},
render: function() {
return (
<ScrollView style={styles.container}>
<Text clusterUrl = {this.state.clusterUrl} >
clusterUrl:
</Text>
<TextInput
style={styles.textInput}
placeholder={this.state.clusterUrl}
onChangeText={(text) => this.setState({server: text})}
/>
<View style={styles.custom}>
<View style={styles.margin}>
<Text server = {this.state.server} >
Authentication Token:
</Text>
<TextInput
style={styles.halfTextInput}
placeholder={this.state.token}
onChangeText={(text) => this.setState({token: text})}
/>
<Text server = {this.state.server} >
Application Key:
</Text>
<TextInput
style={styles.halfTextInput}
placeholder={this.state.appKey}
onChangeText={(text) => this.setState({appKey: text})}
/>
</View>
<View style={styles.margin}>
<Text server = {this.state.server} >
Channel:
</Text>
<TextInput
style={styles.halfTextInput}
placeholder={this.state.channel}
onChangeText={(text) => this.setState({channel: text})}
/>
<Text server = {this.state.server} >
Connection Metadata:
</Text>
<TextInput
style={styles.halfTextInput}
placeholder={this.state.connectionMetadata}
onChangeText={(text) => this.setState({connectionMetadata: text})}
/>
</View>
</View>
<Text server = {this.state.server} >
Message:
</Text>
<TextInput
style={styles.textInput}
placeholder={this.state.message}
onChangeText={(text) => this.setState({message: text})}
/>
<View style={styles.rowView}>
<TouchableHighlight style={styles.button} onPress={this.doConnect}>
<View style={styles.tryAgain}>
<Text style={styles.tryAgainText}>Connect</Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={styles.button} onPress={this.doDisconnect}>
<View style={styles.tryAgain}>
<Text style={styles.tryAgainText}>Disconnect</Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={styles.button} onPress={this.doSubscribe}>
<View style={styles.tryAgain}>
<Text style={styles.tryAgainText}>Subscribe</Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={styles.button} onPress={this.doUnSubscribe}>
<View style={styles.tryAgain}>
<Text style={styles.tryAgainText}>Unsubscribe</Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={styles.button} onPress={this.doSendMessage}>
<View style={styles.tryAgain}>
<Text style={styles.tryAgainText}>Send</Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={styles.button} onPress={this.doPresence}>
<View style={styles.tryAgain}>
<Text style={styles.tryAgainText}>Presence</Text>
</View>
</TouchableHighlight>
</View>
<ListView
style={styles.list}
dataSource={this.state.dataSource}
renderRow={this._renderRow}
/>
</ScrollView>
)}
});
var styles = StyleSheet.create({
container: {
marginTop: 30,
margin: 5,
backgroundColor: '#FFFFFF',
},
list: {
flexDirection: 'column',
backgroundColor: '#F6F6F6',
height:150,
},
rowView:{
alignItems: 'stretch',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent:'center',
},
button:{
margin: 5,
},
margin:{
},
custom:{
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent:'space-between',
},
textInput:{
height: 30,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 4,
padding: 5,
fontSize: 15,
},
halfTextInput:{
height: 30,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 4,
padding: 5,
fontSize: 15,
width: 153,
},
tryAgain: {
backgroundColor: '#336699',
padding: 13,
borderRadius: 5,
},
tryAgainText: {
color: '#ffffff',
fontSize: 14,
fontWeight: '500',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
},
row: {
flexDirection: 'row',
justifyContent: 'center',
padding: 10,
backgroundColor: '#F6F6F6',
},
separator: {
height: 1,
backgroundColor: '#CCCCCC',
},
thumb: {
width: 64,
height: 64,
},
text: {
flex: 1,
fontSize: 13,
},
});
AppRegistry.registerComponent('RealtimeRCT', () => RealtimeRCT);
Checkout the example at https://github.com/realtime-framework/RealtimeMessaging-ReactNativeAndroidExample
Realtime.co