Twilio provides a client-side SDK for browser-based development, as well as SDKs for native development on iOS and Android.
Our SDKs provide a convenient collection of objects, methods, and events to connect your client-side application to Conversations.
For the most up-to-date installation methods, version history, and documentation, please check out:
Initializing the Conversations SDKs is an important step to ensure your client is ready to use on an end user's mobile or web device.
To get started, you'll need to initialize a new Client
object. You'll need to pass a valid Access Token to the client creation method as the first parameter.
After that, you should listen for the client to inform you when it's fully initialized/synchronized.
Once you receive this confirmation, the client is ready to use!
1/* Initialization */2import {Client} from "@twilio/conversations";34const client = new Client("token");5client.on("stateChanged", (state) => {6if (state === "failed") {7// The client failed to initialize8return;9}1011if (state === "initialized") {12// Use the client13}14});
If the token expires before you renew it, the client's connection state will change to disconnected, and you'll need to initialize a new client object.
All tokens have a limited lifetime to protect you from abuse. The maximum and default lifetime is 24 hours, but you should make it as short as possible for your application. Therefore, you may need to renew the token during your SDK session. The SDK will notify you when the token is "about to expire" and when it "has expired".
To avoid needing to instantiate a new client, you should get a new token from your server and pass it to the client's updateToken
method before the old one expires. This method will update the authentication token for your client and re-register with the Conversations services.
1/* Handling token expiration/expiration warning events */23client.on("tokenAboutToExpire", (time) => {4// token is about to expire. get a new token5try {6const token = (await fetch("https://placekitten.com/getToken?username=username&password=password")).data();7} catch {8return Error("Unable to get a token");9}1011// update the client with new token12client = await client.updateToken(token);1314// use updated client15});1617client.on("tokenExpired", () => {18// get a new token19try {20const token = (await fetch("https://placekitten.com/getToken?username=username&password=password")).data();21} catch {22return Error("Unable to get a token");23}2425// token expired. create a new client26client = new Client(token);27});2829// update the token used by the client and re-register with the Conversations services30await client.updateToken("token");
There is a reconnection attempt period when the network connectivity is lost before the client switches to the disconnected state.
During use, the connection state of your SDK client may change.
These are the possible client connection states:
connecting
- the client is offline a and connection attempt is in progress
connected
- client is online and ready
disconnecting
- the client is going offline as disconnection is in progress
disconnected
- the client is offline and no connection attempt is in progress
denied
- client connection is denied because of an invalid JSON Web Token access token. The user must refresh the token in order to proceed
The above-mentioned states are also documented in our SDK reference docs.
The client state changes are due to different factors. For instance, let's take the disconnected
state as an example. This could happen due to a network disruption, expired token, or other error. You can listen to the client's connection state events to detect this and respond accordingly.
As you build out your Conversations application, you might find it helpful to check the Twilio Console debugger. This service aggregates all additional errors or warnings that may be triggered from Twilio's webhooks to your server, as well as token errors.
You can also enable debug logging by passing an option for increased log verbosity to your client when you create it. Check the auto-generated docs or Error Handling and Diagnostics for platform-specific examples.
Congratulations, you have learned how to configure your Conversations SDK client! As a following step, you can: