npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@bouncedinc/opentok-text-chat

v2.0.4

Published

OpenTok text chat accelerator pack

Downloads

14

Readme

OpenTok Accelerator TextChat for JavaScript

Build Status npm license MIT

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:

| Feature | Field | | ------------- | ------------- | | Set the session. | session | | Set the id and name for the user. | sender | | Set the chat container. | textChatContainer | | Sets the position of the element that displays the information for the character count within the UI. | controlsContainer | | Set the maximum message length. | limitCharacterMessage | | Set the sender alias and the sender ID of the outgoing messages. | sender | | Set the text chat container to automatically be displayed. | alwaysOpen | | Custom message to display while waiting for other users to join. | waitingMessage |

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

const textChat = new TextChatAccPack(textChatOptions);

TextChatAccPack Methods

The TextChat component defines the following methods:

| Method | Description | | ------------- | ------------- | | showTextChat() | Show the text chat view. | | hideTextChat() | Hide the text chat view. | | isDisplayed() | Determines if the text chat accelerator pack is displayed. | | isEnabled() | Determines if the text chat accelerator pack is enabled. | | deliverUnsentMessages() | Deliver all prior messages to new participants. |

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:

| Method | Description | | ------------- | ------------- | | messageReceived | A new message has been received. | | messageSent | A new message has been sent. | | errorSendingMessage | An error occurred when sending a message. |

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

Contribute

If you'd like to contribute to OpenTok Accelerator Pack development, please follow the guidelines in the contributing files.

License

This project is under the MIT License

About OpenTok

logo

The OpenTok platform, developed by TokBox, makes it easy to embed high-quality interactive video, voice, messaging, and screen sharing into web and mobile apps. For more info on how OpenTok works, check out our Core Concepts.