Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/opentok/accelerator-textchat-js
Accelerator Text Chat JS provides functionality you can add to your OpenTok applications that enables users to exchange text messages between mobile or browser-based devices.
https://github.com/opentok/accelerator-textchat-js
javascript opentok realtime-messaging tokbox webrtc
Last synced: 3 months ago
JSON representation
Accelerator Text Chat JS provides functionality you can add to your OpenTok applications that enables users to exchange text messages between mobile or browser-based devices.
- Host: GitHub
- URL: https://github.com/opentok/accelerator-textchat-js
- Owner: opentok
- License: mit
- Created: 2017-02-01T10:32:21.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2022-08-11T18:03:48.000Z (over 2 years ago)
- Last Synced: 2024-11-09T08:19:32.484Z (3 months ago)
- Topics: javascript, opentok, realtime-messaging, tokbox, webrtc
- Language: JavaScript
- Homepage: https://tokbox.com/
- Size: 280 KB
- Stars: 6
- Watchers: 28
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# OpenTok Accelerator TextChat for JavaScript
[](https://travis-ci.org/opentok/accelerator-textchat-js)
[](https://www.npmjs.com/package/opentok-text-chat)
[](./.github/LICENSE)
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:
```bash
npm install --save opentok-text-chat
```
#### Using a module bundler
If using a bundler like browserify or webpack:
```javascript
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:
```html
```
Also, as our [Sample Application](#sample-application) demonstrates, you can specify some of the requirements to be sourced from cloudfare:
```javascript
```
## Usage
The text chat module will be available in global scope as `TextChatAccPack`
_**NOTE**: Click [here](https://www.npmjs.com/search?q=opentok-acc-pack) 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` |
| Set the chat button to be added to UI or not | `appendControl` |
| 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](https://www.npmjs.com/package/opentok-text-chat), and import into your application:
```javascript
const TextChatAccPack = require('opentok-text-chat');
const textChat = new TextChatAccPack(options);
```
Otherwise, the package will need to be in `global` scope to be initialized:
```javascript
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:
| 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:
```javascript
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](https://github.com/opentok/accelerator-core-js):
```javascript
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](https://github.com/opentok/accelerator-sample-apps-js)**
## Development and Contributing
Interested in contributing? We :heart: pull requests! See the [Contribution](CONTRIBUTING.md) 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 for support options
- Tweet at us! We're [@VonageDev](https://twitter.com/VonageDev) on Twitter
- Or [join the Vonage Developer Community Slack](https://developer.nexmo.com/community/slack)
## Further Reading
- Check out the Developer Documentation at