Home

Awesome

#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

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) <br>

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:

###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:

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

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

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

Example:

RCTRealtimeMessaging.RTSubscribeWithFilter("MyChannel", true, "message.a = 1");

#####RTSubscribeWithOptions(options)

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);

#####RTSubscribeWithBuffer(channel, subscriberId)

Subscribes to a channel to receive messages published to it.

Parameters

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

Example:

RCTRealtimeMessaging.RTSubscribeWithNotifications("MyChannel", true);

#####RTUnsubscribe(channel)

Unsubscribes a channel.

Parameters

Example:

RCTRealtimeMessaging.RTUnsubscribe("MyChannel");

#####RTSendMessage(message, channel)

Sends a message to a pub/sub channel.

Parameters

Example:

RCTRealtimeMessaging.RTSendMessage("Hello World","MyChannel");

#####RTPublishMessage(channel, message, ttl, onPublishResultCallback)

Publish a message to a channel.

Parameters

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

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

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

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

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

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

Example:

RCTRealtimeMessaging.RTGetHeartbeatTime(function(result){
	console.log('HeartbeatTime for this client is: ' + result);
});

#####RTSetHeartbeatTime(newHeartbeatTime)

Sets the client heartbeat interval.

Parameters

Example:

RCTRealtimeMessaging.RTSetHeartbeatTime(10);

#####RTGetHeartbeatFails(callBack: function)

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);
});

#####RTSetHeartbeatFails(newHeartbeatFails)

Sets the number of times the heartbeat can fail before the connection is reconnected

Parameters

Example:

RCTRealtimeMessaging.RTSetHeartbeatFails(3);

#####RTIsHeartbeatActive(callBack: function)

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');
	}		
});

#####RTEnableHeartbeat()

Enables the client heartbeat.

Example:

RCTRealtimeMessaging.RTEnableHeartbeat()

#####RTDisableHeartbeat()

Disables the client heartbeat.

Example:

RCTRealtimeMessaging.RTDisableHeartbeat()

Full example ( index.ios.js )

'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 (
      <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);

Authors

Realtime.co