opentok-text-chat v1.0.36

OpenTok Accelerator TextChat for JavaScript

The OpenTok Text Chat Accelerator Pack for JavaScript provides functionality you can add to your OpenTok applications that enables users to exchange text messages between mobile or browser-based devices.

Quick start

This section shows you how to use the accelerator pack.

Prerequisites

The dependencies for this library are listed in the package.json:

• jquery.
• kuende-livestamp.
• moment.
• opentok-solutions-logging.
• underscore.

Installation

Start by installing the dependencies:

npm install --save opentok-text-chat

Using a module bundler

If using a bundler like browserify or webpack:

const textChat = require('opentok-text-chat');

Without a module bundler

If you are not using a module bundler, include the accelerator pack in your html as well as the installed dependencies:

<script src="node_modules/opentok-text-chat/dist/opentok-text-chat.js"></script>
<script src="node_modules/opentok-solutions-logging/dist/opentok-solutions-logging.js"></script>
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
<script src="your/path/to/underscore-min.js"></script>
<script src="your/path/to/jquery.min.js"></script>
<script src="your/path/to/moment.min.js"></script>
<script src="your/path/to/livestamp.min.js"></script>

Also, as our Sample Application demonstrates, you can specify some of the requirements to be sourced from cloudfare:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/livestamp/1.1.2/livestamp.min.js"></script>

Usage

The text chat module will be available in global scope as TextChatAccPack

NOTE: Click here for a list of all OpenTok accelerator packs.

Exploring the code

The TextChatAccPack class in opentok-text-chat.js is the backbone of the text chat communication features for the app.

This class sets up the text chat UI views and events, and provides functions for sending, receiving, and rendering individual chat messages.

Initialization

The following options fields are used in the TextChatAccPack constructor:

If you're using a bundler like webpack or Browserify, you can install the the text chat component with npm, and import into your application:

const TextChatAccPack = require('opentok-text-chat');
const textChat = new TextChatAccPack(options);

Otherwise, the package will need to be in global scope to be initialized:

const textChatOptions = {
 session: session,
 sender: {
   id: 'myCustomIdentifier',
   alias: 'David',
 },
 limitCharacterMessage: 160,
 controlsContainer: '#feedControls',
 textChatContainer: '#chatContainer',
 alwaysOpen: true,
 appendControl: true
};

const textChat = new TextChatAccPack(textChatOptions);

TextChatAccPack Methods

The TextChat component defines the following methods:

For example, this line determines whether the text chat accelerator pack is displayed:

const displayed = textChat.isDisplayed();

Events

The TextChat component emits the following events:

The following code shows how to subscribe to these events using opentok-accelerator-core:

otCore.on('messageReceived', event =>  . . .)
otCore.on('messageSent', event =>  . . .)
otCore.on('errorSendingMessage', error =>  . . .)

Sample Application

• Multiparty video communication sample app using the Accelerator TextChat with best-practices for Javascript

Development and Contributing

Interested in contributing? We :heart: pull requests! See the Contribution guidelines.

Getting Help

We love to hear from you so if you have questions, comments or find a bug in the project, let us know! You can either:

• Open an issue on this repository
• See https://support.tokbox.com/ for support options
• Tweet at us! We're @VonageDev on Twitter
• Or join the Vonage Developer Community Slack

Further Reading

• Check out the Developer Documentation at https://tokbox.com/developer/