![Create React App Officially Deprecated Amid React 19 Compatibility Issues](https://cdn.sanity.io/images/cgdhsj6q/production/04fa08cf844d798abc0e1a6391c129363cc7e2ab-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
opentok-text-chat
Advanced tools
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.
This section shows you how to use the accelerator pack.
The dependencies for this library are listed in the package.json
:
Start by installing the dependencies:
npm install --save opentok-text-chat
If using a bundler like browserify or webpack:
const textChat = require('opentok-text-chat');
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>
The text chat module will be available in global scope as TextChatAccPack
NOTE: Click here for a list of all OpenTok accelerator packs.
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.
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, 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);
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();
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 => . . .)
Interested in contributing? We :heart: pull requests! See the Contribution guidelines.
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:
FAQs
OpenTok text chat accelerator pack
The npm package opentok-text-chat receives a total of 510 weekly downloads. As such, opentok-text-chat popularity was classified as not popular.
We found that opentok-text-chat demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.