undefined

Javascript Getting Started

ConnectyCube helps you implement real-time chat, video chat, push notifications and user authorization to any app with ease - no server side implementation required. You can concentrate fully on your mobile app development. Our JS SDK provides you with many helpful methods to build the chat and video chat from the client side.

This page presents a quick overview of the SDK’s functionalities and logic, then let you go through the easy steps of implementing ConnectyCube in your own app.

ConnectyCube Javascript SDK can be used on the following environments:

  • Browser
  • Node.js
  • React Native
  • NativeScript
  • Cordova/Ionic
  • Electron

Create ConnectyCube app

Register a FREE ConnectyCube account at https://connectycube.com/signup, then create your 1st app and obtain an app credentials. These credentials will be used to identify your app.

All users within the same ConnectyCube app can communicate by chat or video chat with each other, across all platforms - iOS, Android, Web, etc.

When building a new app

If you are just starting your app and developing it from scratch, we recommend to use our Code Samples projects.

Download Code Samples

These code samples are ready-to-go apps with an appropriate functionality and simple enough that even novice developers will be able to understand them.

When integrating SDK into existing app

If you already have an app, do the following for integration.

Connect SDK

Browser

Simply connect the JS file as a normal script:

<script src="https://cdn.jsdelivr.net/npm/connectycube@x.x.x/dist/connectycube.min.js"></script>

where x.x.x is the desired JS SDK version (check for Releases page for all available versions).

Then a window scoped variable called ConnectyCube is created.

Or install the package as NPM module:

npm install connectycube --save

And add script to HTML file from the 'node_modules' folder (as a relative path):

<script src="~/node_modules/connectycube/dist/connectycube.min.js"></script>

See an example of simple application based on Webpack build

Node.js/NPM, NativeScript

Simply install the package in a normal way:

npm install connectycube --save

and you're ready to go:

const ConnectyCube = require("connectycube");

React Native

Simply install the package in a normal way:

npm install react-native-connectycube --save

and you're ready to go:

import ConnectyCube from "react-native-connectycube";

Initialize

Initialize framework with your ConnectyCube application credentials. You can access your application credentials in ConnectyCube Dashboard:

const CREDENTIALS = {
  appId: 21,
  authKey: "hhf87hfushuiwef",
  authSecret: "jjsdf898hfsdfk",
};

ConnectyCube.init(CREDENTIALS);

Initialize with existing token

It can be a scenario when you might want to create a ConnectyCube session token outside of the app code, e.g. to incorporate this logic at your custom backend server.

In this case, there is a way to initialize SDK by existing ConnectyCube session token:

const CREDENTIALS = {
  appId: 21,
  token: "5a7bc95d85c0eb2bf052be3d29d3df523081e80y",
};

ConnectyCube.init(CREDENTIALS);

Also, there can be another use case when a developer wants to preserve the session between browser page refreshes.

In this case, a session can be stored to e.g. local storage and then can be restored and passed to SDK, so you do not need to re-create a new one if the session is still valid:

const storedSession = localStorage.getItem("ConnectyCube:session");
const session = JSON.parse(storedSession);

ConnectyCube.setSession(session);

Configuration

An additional set of configs can be passed as a 2nd argument in init function:

const CONFIG = {
  debug: { mode: 1 }, // enable DEBUG mode (mode 0 is logs off, mode 1 -> console.log())
};
ConnectyCube.init(CREDENTIALS, CONFIG);

Default configuration

const DEFAULT_CONFIG = {
  endpoints: {
    api: 'api.connectycube.com',
    chat: 'chat.connectycube.com'
  },
  hash: 'sha1', // 'sha1' or 'sha256'
  chatProtocol: {
    bosh: 'https://chat.connectycube.com:5281',
    websocket: 'wss://chat.connectycube.com:5291',
    active: 2 // 1 - BOSH, 2 - WEBSOCKET
  },
  webSession: {
    getSessionTimeInterval: 3,
    getSessionTimeout: 120
  },
  chat: {
    contactList: {
      subscriptionMode: {
        mutual: true
      }
    },
    reconnectionTimeInterval: 5,
    streamManagement: {
      enable: false
    },
    ping: {
      enable: false,
      timeInterval: 60
    }
  },
  videochat: {
    alwaysRelayCalls: false,
    answerTimeInterval: 60,
    dialingTimeInterval: 5,
    disconnectTimeInterval: 30,
    statsReportTimeInterval: false,
    iceServers: [
      {
        urls: 'stun:stun.l.google.com:19302'
      },
      {
        urls: 'stun:turn.connectycube.com'
      },
      {
        urls: 'turn:turn.connectycube.com:5349?transport=udp',
        username: 'connectycube',
        credential: '4c29501ca9207b7fb9c4b4b6b04faeb1'
      },
      {
        urls: 'turn:turn.connectycube.com:5349?transport=tcp',
        username: 'connectycube',
        credential: '4c29501ca9207b7fb9c4b4b6b04faeb1'
      }
    ]
  },
  conference: { server: 'wss://janus.connectycube.com:8989' },
  on: {
    sessionExpired: null, // (size) => { count(size) }
    xmppDataWrite: null, // (size) => { count(size) }
    xmppDataRead: null // (size) => { count(size) }
  },
  timeout: null, // request's timeout
  debug: { mode: 0 }
}

Now integrate messaging & calling capabilities

Follow the API guides on how to integrate chat and calling features into your app:

React

We have a React bootstrap project for a faster start of using ConnectyCube SDK in React apps https://github.com/ConnectyCube/sample-init-react-js-app

Webpack integration

We have an example app of how to integarte Webpack and ConnectyCube SDK https://github.com/ConnectyCube/sample-webpack-build-app

SDK Changelog

The complete SDK changelog is available on ConnectyCube Javascript Releases GitHub page