The Realtime Framework Cloud Messaging Pub/Sub client for React-Native
npm install react-native-realtimemessaging-ios#Realtime Messaging SDK for React-Native
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 iOS SDK reference documentation.
##Installation
* Create a new react-native project. Check react-native getting started
* On the terminal, go to PROJECT_DIR.
* Execute
npm install --save react-native-realtimemessaging-ios
* Drag RCTRealtimeMessaging.xcodeproj from the node_modules/react-native-realtimemessaging-ios folder into your XCode project. Click on the project in XCode, goto Build Phases then Link Binary With Libraries and add libRCTRealtimeMessaging.a
* Drag PROJECT_DIR/node_modules/react-native-realtimemessaging-ios/RCTRealtimeMessaging.js to the root of your project.
You are ready to go.
---
##ReatimeMessagingIOS class reference
###Import ReatimeMessaging to your project
import realtime from './RCTRealtimeMessagingIOS';
var RCTRealtimeMessaging = new realtime();
###Event handling
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 './RCTRealtimeMessagingIOS';
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 './RCTRealtimeMessagingIOS';
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.
- sender - Ortc client instance that fired the event
- channel - The channel where the message was received
- seqId - The message sequence id
message - The message received
* onMessageWithOptions - Fired when a message was received in the specified channel subscribed with the RTSubscribeWithOptions
- sender - Ortc client instance that fired the event
- msgOptions - Dictionary where the message data was received
-
msgOptions = {
channel,
seqId, // the {MESSAGE-SEQUENCE-ID} frame property
filtered, // the {FILTERED-MSG} frame property
message
}
* OnPublishResult - Fired when a message seId arrives from the server or publish timeout expires
- error - Message not publish, error description
- seqId - The message sequence identifier
* onPresence - Gets the subscriptions in the specified channel and if active the first 100 unique connection metadata:
- On success -> {"result": result}
- On error -> {"error": error}
* onEnablePresence - Enables presence for the specified channel with the first 100 unique connection metadata:
- On success -> {"result": result}
- On error -> {"error": error}
* onDisablePresence - Disables presence for the specified channel:
- On success -> {"result": result}
- On error -> {"error": error}
###Push notification handling
####Configure your project for push notifications handling
To configure your react-native project to receive push notifications you must follow this guide for the iOS platform.
After this process you must drag AppDelegate+RealtimeRCTPushNotifications(.m, .h) category from RCTRealtimeMessaging plugin folder to your project, where AppDelegate class is, and you are ready to go.
####Handling push notifications through javascript
For handling push notifications ( sent using the Realtime mobile push notifications REST API) we added the following event listener:
* RTPushNotificationListener(callBack: Function)
Example:
componentDidMount: function(){
RCTRealtimeMessaging.RTPushNotificationListener(this._onNotification);
},
_onNotification: function(data)
{
this._log("Received notification: " + JSON.stringify(data));
},
----------
###Methods
#####RTConnect(config)
Connects the client to Realtime server with the given configuration.
Parameters
* appkey - Realtime application key
* token - Authentication token
* connectionMetadata - Connection metadata string
* clusterUrl or url - The Realtime Messaging cluster or server URL
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
});
----------
#####RTDisconnect()
Disconnects the client from the Realtime server.
Example:
RCTRealtimeMessaging.RTEventListener("onDisconnect", function(){
console.log('Disconnected from Realtime Messaging');
}),
RCTRealtimeMessaging.RTDisconnect();
----------
#####RTSubscribe(channel, subscribeOnReconnect: boolean)
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);
----------
#####RTSubscribeWithFilter(channel, subscribeOnReconnect: boolean, filter)
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");
----------
#####RTSubscribeWithOptions(options)
Subscribes to a channel to receive messages sent to it with given options.
Parameters
* options - The subscription options dictionary, EX:
options = {
channel,
subscribeOnReconnected, // optional, default = true,
withNotifications (Bool), // optional, default = false, use push notifications as in subscribeWithNotifications
filter, // optional, default = "", the subscription filter as in subscribeWithFilter
subscriberId // optional, default = "", the subscriberId as in subscribeWithBuffer
}
Example:
var options = {
"channel":"YOUR_CHANNEL_NAME",
"subscriberId":"CLIENT_SUBSCRIBER_ID",
"filter":"MESSAGE_FILTER"
}
RCTRealtimeMessaging.RTSubscribeWithOptions(options);
----------
#####RTSubscribeWithBuffer(channel, subscriberId)
Subscribes to a channel to receive messages published to it.
Parameters
* channel - The channel name.
* subscriberId - The subscriberId associated to the channel.
Example:
RCTRealtimeMessaging.RTSubscribeWithBuffer("MyChannel", "CLIENT_SUBSCRIBER_ID");
----------
#####RTSubscribeWithNotifications(channel, subscribeOnReconnect: boolean)
Subscribes a pub/sub channel with Push Notifications Service, to receive messages even if the app is not in foreground.
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);
----------
#####RTUnsubscribe(channel)
Unsubscribes a channel.
Parameters
* channel - Channel name.
Example:
RCTRealtimeMessaging.RTUnsubscribe("MyChannel");
----------
#####RTSendMessage(message, channel)
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");
----------
#####RTPublishMessage(channel, message, ttl, onPublishResultCallback)
Publish a message to a channel.
Parameters
* channel - The channel name.
* message - The message to publish.
* ttl - The message expiration time in seconds (0 for maximum allowed ttl).
* onPublishResultCallback - callback returns error if message publish was not successful or published message unique id (seqId) if sucessfully published
Example:
RCTRealtimeMessaging.RTPublishMessage("MyChannel", "Hello World", ttl, function(error, seqId){
});
----------
#####RTEnablePresence(aUrl, aIsCluster:boolean, aApplicationKey, aPrivateKey, channel, aMetadata)
Enables presence for the specified channel with first 100 unique connection metadata.
Parameters
* channel - Channel to enable presence
* applicationKey - Realtime application key
* isCluster - Specifies if url is a Realtime cluster
* metadata - Collect the first 100 unique connection metadata of subscribers
* privateKey - The Realtime application private key
* url - Realtime server or cluster URL
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(aUrl, aIsCluster, aApplicationKey, aPrivateKey, channel, aMetadata);
----------
#####RTDisablePresence(aUrl, aIsCluster:boolean, aApplicationKey, aPrivateKey, channel, aMetadata)
Disables presence for the specified channel.
Parameters
* channel - Channel to disable presence
* applicationKey - Realtime application key
* url - Realtime server or cluster URL
* isCluster - Specifies if url is a Realtime cluster
*
* privateKey - The Realtime application private key
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(aUrl, aIsCluster, aApplicationKey, aPrivateKey, channel, aMetadata);
----------
#####RTPresence(aUrl, aIsCluster:boolean, aApplicationKey, aAuthenticationToken, 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
* channel - Channel with presence data active
* applicationKey - Realtime application key
* url - Realtime server or cluster URL
* isCluster - Specifies if url is a Realtime cluster
* authenticationToken - Authentication token with permissions to the presence service
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(aUrl, aIsCluster, aApplicationKey, aAuthenticationToken, channel);
----------
#####RTIsSubscribed(channel, callBack: function)
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');
}
});
----------
#####RTSaveAuthentication(url, isCluster, authenticationToken, authenticationTokenIsPrivate, applicationKey, timeToLive, privateKey, permissions, callBack: function)
Authenticates a token with the given channel permissions.
Parameters
* url - Realtime server or cluster URL
* isCluster - Specifies if url is a Realtime cluster
* authenticationToken - The token to authenticate
* authenticationTokenIsPrivate -
Indicates whether the authentication token is private (1) or not (0). Private tokens can only be used by one client
* applicationKey -
Realtime application key
* timeToLive -
The allowed inactivity time (in seconds) for the authenticated token
* privateKey - The Realtime application private key
* permissions -
The channels and their permissions (w: write, r: read, p: presence)
* callback -
Callback function with the result (true or false).
Example:
RCTRealtimeMessaging.RTSaveAuthentication(url, isCluster, authenticationToken, authenticationTokenIsPrivate, applicationKey, timeToLive, privateKey, permissions, function(result){
if(result == true){
console.log('Authentication saved successfully');
}else{
console.log('Error saving authentication');
}
});
----------
#####RTGetHeartbeatTime(callBack: function)
Get the client heartbeat interval.
Parameters
* callback -
Callback function with the heartbeat interval value
Example:
RCTRealtimeMessaging.RTGetHeartbeatTime(function(result){
console.log('HeartbeatTime for this client is: ' + result);
});
----------
#####RTSetHeartbeatTime(newHeartbeatTime)
Sets the client heartbeat interval.
Parameters
* newHeartbeatTime - The new heartbeat interval
Example:
RCTRealtimeMessaging.RTSetHeartbeatTime(10);
----------
#####RTGetHeartbeatFails(callBack: function)
Number of times the heartbeat can fail before the connection is reconnected
Parameters
* callBack - The callback function to get the HeartbeatFails value
Example:
RCTRealtimeMessaging.RTGetHeartbeatFails(function(result){
console.log('HeartbeatFails Time for this client is: ' + result);
});
----------
#####RTSetHeartbeatFails(newHeartbeatFails)
Sets the number of times the heartbeat can fail before the connection is reconnected
Parameters
* newHeartbeatFails - The new heartbeat fails value
Example:
RCTRealtimeMessaging.RTSetHeartbeatFails(3);
----------
#####RTIsHeartbeatActive(callBack: function)
Indicates whether the client heartbeat is active or not.
Parameters
* callBack - The callback function with the result
Example:
RCTRealtimeMessaging.RTIsHeartbeatActive(function(result){
if(result == true){
console.log('heartbeat active');
}else{
console.log('heartbeat inactive');
}
});
----------
#####RTEnableHeartbeat()
Enables the client heartbeat.
Example:
RCTRealtimeMessaging.RTEnableHeartbeat()
----------
#####RTDisableHeartbeat()
Disables the client heartbeat.
Example:
RCTRealtimeMessaging.RTDisableHeartbeat()
'use strict';
import React, { Component } from 'react';
import realtime from './RCTRealtimeMessagingIOS';
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
});
},
componentWillUnmount: function() {
RCTRealtimeMessaging.RTDisconnect();
},
doDisconnect:function(){
RCTRealtimeMessaging.RTDisconnect();
},
doSubscribe: function(){
RCTRealtimeMessaging.RTSubscribe(this.state.channel, true);
},
doUnSubscribe: function(){
RCTRealtimeMessaging.RTUnsubscribe(this.state.channel);
},
doSendMessage: function(){
RCTRealtimeMessaging.RTSendMessage(this.state.message, this.state.channel);
},
doPresence: function(){
RCTRealtimeMessaging.RTPresence(
this.state.clusterUrl,
true,
this.state.appKey,
this.state.token,
this.state.channel
);
},
doSegue: function(){
this.props.navigator.push({
title: NavigatorIOSExample.title,
component: EmptyPage,
rightButtonTitle: 'Cancel',
onRightButtonPress: () => this.props.navigator.pop(),
passProps: {
text: 'This page has a right button in the nav bar',
}
});
},
_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 (
{rowData}
);
},
_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
return this.state.dataSource.cloneWithRows(messages);
},
render: function() {
return (
clusterUrl:
placeholder={this.state.clusterUrl}
onChangeText={(text) => this.setState({server: text})}
/>
Authentication Token:
placeholder={this.state.token}
onChangeText={(text) => this.setState({token: text})}
/>
Application Key:
placeholder={this.state.appKey}
onChangeText={(text) => this.setState({appKey: text})}
/>
Channel:
placeholder={this.state.channel}
onChangeText={(text) => this.setState({channel: text})}
/>
Connection Metadata:
placeholder={this.state.connectionMetadata}
onChangeText={(text) => this.setState({connectionMetadata: text})}
/>
Message:
placeholder={this.state.message}
onChangeText={(text) => this.setState({message: text})}
/>
dataSource={this.state.dataSource}
renderRow={this._renderRow}
/>
)}
});
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);