Web 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 Web app development, with many helpful methods to build the chat and video chat features.

This page provides 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.

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

React, Angular, Vue etc.

Install the package:

npm
Yarn

npm install connectycube --save

yarn add connectycube

and you’re ready to go:

import ConnectyCube from "connectycube";

Browser (plain HTML)

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
Yarn

npm install connectycube --save

yarn add connectycube

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

Install the package:

npm
Yarn

npm install connectycube --save

yarn add connectycube

and you’re ready to go:

const ConnectyCube = require("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);

Configure

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

Integrate chat and voice/video calling

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

SDK Changelog

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