Room Connection

The React Native SDK provides the following methods for room connection:

Initiate a Room

To establish a session, a client endpoint application needs to use the React Native toolkit to connect to a virtual room hosted on the EnableX platform. The process starts with initializing a room object using the EnxRoom class. The Enx.initRoom() method is used to initiate a room.

Method: initRoom()

Sample Code

async componentWillMount() {

Join a Room with a Stream

Connecting to a room and joining it is a complex chain of events. You must ensure that the previous event has succeeded to proceed to the next event. Once connected to a room, a bidirectional communication channel is established between the endpoint and the EnableX server over a web socket. The socket events are leveraged for communication. The communication fails if a network issue disconnects the web socket.

Joining a room involves the following steps:

  1. Initiate a room and connect to the room.
  2. Initiate a stream.
  3. Publish a stream.

The Enx.joinRoom() method handles all the complexities of connecting and joining a room. If a connected web socket is disconnected due to network issues, EnableX supports automatic reconnection to the session for disconnected endpoints, ensuring a better user experience.

Method: joinRoom()

Tag: <EnxRoom token=TokenProps eventHandlers=EventProps localInfo=publishStreamProp roomInfo=roomInfo advanceOptionsInfo=advanceOptions>

Properties Keys Data Type Description
token Not Applicable String A JWT token received through the Server API call.
eventHandlers eventHandlers.roomConnected JSON Object To the endpoint when it connected to a room.
eventHandlers.roomError JSON Object To the endpoint when it fails to connect to a room.
eventHandlers.userConnected JSON Object To notify all connected users that a new user is connected to the room.
eventHandlers.activeTalkerList JSON Object To the endpoint with the Active Talkers list after a few seconds of receiving the roomConnected event. For more information, see .
localInfo Not Applicable String Optional. Meta information of stream initialization.
roomInfo roomInfo.allow_reconnect Boolean

By default, it is set to true. This setting automatically reconnects a client endpoint with EnableX after disconnection. Set it to false if you do not want the client endpoint to try reconnecting to EnableX.

roomInfo.number_of_attempts String

The maximum number of times a client endpoint can try to reconnect to EnableX. The maximum value is not specified. You can use any number. The minimum value is 1.

roomInfo.timeout_interval String

The timeout interval in milliseconds to wait before attempting to reconnect.

advanceOptions advanceOptions.battery_updates Boolean Pass true to receive battery updates/information.
advanceOptions.notify_video_resolution_change Boolean Pass true to receive the video resolution change information.

Sample Code

publishStreamProp: {
audio: true,
video: true,
data: true
enxRoomInfo: {
allow_reconnect: true,
number_of_attempts: "3",
timeout_interval: "15"
advanceOptions: {
battery_updates: true,
notify_video_resolution_change: true
roomConnected:event=> {
// Connected. Event receives Room Meta JSON
// Connection failed. Find error
// A new user connected. user JSON has user information
// List of talkers in the Room
// Received after room-connected

Disconnect from a Room

A client endpoint can disconnect itself from a room to close its session. The disconnected endpoint immediately loses media and signaling socket. Once the endpoint is disconnected, the toolkit receives the roomDisconnected callback for you to handle the UI. Also, the userDisconnected callback is sent to all the users of the connected session to update the status of their UI.

Method: Enx.disconnect()


roomDisconnectedTo the disconnected user.
userDisconnectedTo all other connected users.

Sample Code

// You are disconnected
userDisconnected: event=>{
// Notifies all about one disconnected user
// event - Information of disconnected user

Handle Disconnection, Interruption, and Re-Connection

A client endpoint is connected to EnableX over a secured web socket. A connected endpoint might get disconnected from EnableX due to network issues. When this occurs, the endpoint is notified with connectionLost and connectionInterrupted events.


connectionLostWhen the network connection is lost.
connectedInterruptedWhen the network connection is interrupted. For example, when the connection is switched from 4G to WiFi or vice versa.

Sample Code

connectionLost: event => {
// event - connection disconnected
// lost connectivity
connectionInterrupted: event => {
// event - connetion is interrupted
// network changed. e.g. switched between WiFi, 4G

If an endpoint is disconnected from a session, EnableX supports automatic reconnection to the session ensuring a better user experience. To use the automatic reconnection feature, you must join the room with Re-Connection options.

Note: Automatic reconnection is not applicable when:

  • The last participant has disconnected from the adhoc room.
  • The moderator has dropped the participant from the room.
  • The participant has explicitly disconnected from the room.


userReconnectWhen an endpoint is successfully reconnected with EnableX.
reconnectWhen an endpoint attempts to reconnect to EnableX.

Sample Code

reconnect: event => {
// event - reconnecting...
userReconnect: event => {
// event - reconnected

Handle Network Bandwidth Issues

A client endpoint experiencing bandwidth throttling issues can affect publishing and receiving of remote streams and their quality. EnableX provides callbacks to notify endpoints of such events so that end users can be appropriately notified.


bandWidthUpdatedTo notify a significant change in available bandwidth affecting the publishing and receiving of remote streams.
shareStateEventTo notify a significant change in available bandwidth affecting the publishing and receiving of screen sharing.
canvasStateEventTo notify a significant change in available bandwidth affecting the publishing and receiving of canvas streaming.

Sample Code

// Bandwidth Change affecting Streaming
bandWidthUpdated: event => {
/* event =
[{ "reason" : "receive bandwidth low",
"streamId" : streamId
}] */
// Bandwidth Change affecting Screen Share
shareStateEvent: event => {
/* event =
{ reason = bw;
streamId = 11;
videomuted = 1;
} */
// Bandwidth Change affecting Canvas Streaming
canvasStateEvent: event => {
/* event =
{ reason = bw;
streamId = 21;
videomuted = 1;
} */