Handle real-time data with Twilio Sync
Twilio Sync is a powerful tool that enables you to synchronize the state of your applications across platforms, with only milliseconds of delay. It’s commonly used to establish chat services, power live dashboards for information like recent calls to a support agent, and integrates with Twilio Flex.
This guide will show how to combine Functions, Assets, and Sync into a web application that displays incoming text messages in real time. All without the need to run or maintain your own server 24/7.
A quick overview of the architecture and tools that will be used:
- Assets will host the app’s static content, namely the
index.htmlfile that users will access - One Function will serve as an API endpoint for users to generate their Sync token. This will grant them access to view the messages
- A second Function will be a webhook that accepts incoming messages, and pushes their contents to a Sync List
- Sync stores the List of messages which will appear in the app, and sends message updates to the web app
To begin, follow the instructions below to create a Service and the first Function of this app.
Create and host a Function
In order to run any of the following examples, you will first need to create a Function into which you can paste the example code. You can create a Function using the Twilio Console or the Serverless Toolkit as explained below:
If you prefer a UI-driven approach, creating and deploying a Function can be done entirely using the Twilio Console and the following steps:
- Log in to the Twilio Console and navigate to the Functions tab. If you need an account, you can sign up for a free Twilio account here!
- Functions are contained within Services. Create a Service by clicking the Create Service button and providing a name such as test-function.
- Once you've been redirected to the new Service, click the Add + button and select Add Function from the dropdown.
- This will create a new Protected Function for you with the option to rename it. The name of the file will be path it is accessed from.
- Copy any one of the example code snippets from this page that you want to experiment with, and paste the code into your newly created Function. You can quickly switch examples by using the dropdown menu of the code rail.
- Click Save to save your Function's contents.
- Click Deploy All to build and deploy the Function. After a short delay, your Function will be accesible from:
https://<service-name>-<random-characters>-<optional-domain-suffix>.twil.io/<function-path>
For example:test-function-3548.twil.io/hello-world.
The Serverless Toolkit enables you with local development, project deployment, and other functionality via the Twilio CLI. To get up and running with these examples using Serverless Toolkit, follow this process:
- From the CLI, run
twilio serverless:init <your-service-name> --emptyto bootstrap your local environment. - Navigate into your new project directory using
cd <your-service-name> - In the
/functionsdirectory, create a new JavaScript file that is named respective to the purpose of the Function. For example,sms-reply.protected.jsfor a Protected Function intended to handle incoming SMS. - Populate the file using the code example of your choice and save.
Note A Function can only export a single handler. You will want to create separate files if you want to run and/or deploy multiple examples at once.
Once your Function(s) code is written and saved, you can test it either by running it locally (and optionally tunneling requests to it via a tool like ngrok), or by deploying the Function and executing against the deployed url(s).
Run your Function in local development
Run twilio serverless:start from your CLI to start the project locally. The Function(s) in your project will be accesible from http://localhost:3000/sms-reply
- If you want to test a Function as a Twilio webhook, run:
twilio phone-numbers:update <your Twilio phone number> --sms-url "http://localhost:3000/sms-reply"
This will automatically generate an ngrok tunnel from Twilio to your locally running Function, so you can start sending texts to it. You can apply the same process but with thevoice-urlflag instead if you want to test with Twilio Voice. - If your code does not connect to Twilio Voice/Messages as a webhook, you can start your dev server and start an ngrok tunnel in the same command with the
ngrokflag. For example:twilio serverless:start --ngrok=""
Deploy your Function
To deploy your Function and have access to live url(s), run twilio serverless:deploy from your CLI. This will deploy your Function(s) to Twilio under a development environment by default, where they can be accessed from:
https://<service-name>-<random-characters>-dev.twil.io/<function-path>
For example: https://incoming-sms-examples-3421-dev.twil.io/sms-reply
Your Function is now ready to be invoked by HTTP requests, set as the webhook of a Twilio phone number, invoked by a Twilio Studio Run Function Widget, and more!
Generate Sync Tokens
When a user visits the application, their browser will make a request to this Function for a Sync Access Token and the name of the Sync List the app will listen to. Name your first new Function access, and paste in the contents of the code sample below.
This code generates a Sync Token using secured Environment Variables, and returns a stringified version of the token along with the name of the Sync List used by the application.
The examples in this app leverage Environment Variables to share common strings, such as the Service SID and Sync List name, but the samples will work if you don’t define your own.
However, you must define, at a minimum, an API Key and API Secret. Your Account SID should already be in your Environmental Variables by default, regardless of if you’re building in the Console or with the Serverless Toolkit.
Append new SMS messages to a Sync List
The next important feature of this application is being able to push the contents of incoming texts to the Sync List, so they can render in real-time in the browser. To do this, create a new Function, and name it handle-sms. Type or copy the contents of the following code sample into the handle-sms Function, and save.
This Function works by leveraging the built-in Runtime.getSync method to bootstrap a Sync Client for you. It then verifies that the Sync List is available, appends the body of the incoming message (event.Body) to the list, and returns an SMS to the sender acknowledging receipt of their text.
Host the web client
With the necessary Functions in place, it’s time to create the front-end of this web application.
If you're following this example in the Twilio Console:
- Create a file named
index.htmlon your computer. - Copy the following HTML example code into the new
index.htmlfile, and save the file. - Upload
index.htmlas a public Asset. You can do so by clicking Add+, selecting Upload File and findingindex.htmlin the upload prompt, setting the visibility as Public, and then finally clicking Upload.
If you're following this example with the Serverless Toolkit:
- Inside your project, create a new file in the
assets/folder namedindex.html. - Copy the following HTML example code into the new
index.htmlfile, and save the file. - That's it! Your file will be automatically uploaded and hosted when you run
twilio serverless:deployin the next part of the example.
The magic here is primarily concentrated in the ul element and accompanying JavaScript. Once the window finishes loading, the script requests the Sync List name and Access Token from the access Function. Once the script has that token, it uses that token with the twilio-sync library to create a local Sync Client. With that Sync Client, the script then gets the latest messages, injects them into the ul as more list items, and sets up an event handler that appends new messages as soon as they come in.
Deploy the Service
Now is a good time to save and deploy this Service. Save all file changes, and click Deploy All if you're working from the Twilio Console, or run twilio serverless:deploy from your project's CLI if you're following along with the Serverless Toolkit.
Once you have deployed your code, you could visit the web page, but, sadly, there will be no messages to show yet. We’ll address that issue in the next section.
Connect handle-sms to a Twilio Phone Number
To complete this app, you will need to connect the handle-sms Function to one of your Twilio Phone Numbers as a webhook. Follow the directions below, and configure handle-sms as the webhook for incoming messages to your Twilio Phone Number of choice.
Set a Function as a webhook
In order for your Function to react to incoming SMS and/or voice calls, it must be set as a webhook for your Twilio number. There are a variety of methods to set a Function as a webhook, as detailed below:
You can use the Twilio Console UI as a straigforward way of connecting your Function as a webhook:
- Log in to the Twilio Console's Phone Numbers page.
- Click on the phone number you'd like to have connected to your Function.
- If you want the Function to respond to incoming SMS, find the A Message Comes In option under Messaging. If you want the Function to respond to Voice, find the A Call Comes In option under Voice & Fax.
- Select Function from the A Message Comes In or A Call Comes In dropdown.
- Select the Service that you are using, then the Environment (this will default to
uiunless you have created custom domains), and finally Function Path of your Function from the respective dropdown menus.
- Alternatively, you could select Webhook instead of Function, and directly paste in the full URL of the Function.
- Alternatively, you could select Webhook instead of Function, and directly paste in the full URL of the Function.
- Click the Save button.
You can also use the Twilio CLI to assign the Function as the webhook of you phone number. You will need a few prerequisites:
- Twilio CLI installed and executable from your terminal.
- Either the E.164 formatted value of your Twilio phone number (
+1234567890), or its SID (PNXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX). - The full URL of your Function (
https://test-1337.twil.io/my-test-function)
Once you have the CLI installed and the necessary information, run the following to connect the Function to respond to incoming SMS:
twilio phone-numbers:update +1234567890 \
--sms-url https://test-1337.twil.io/my-test-functionIf you prefer to have the Function respond to incoming calls instead, run:
twilio phone-numbers:update +1234567890 \
--voice-url https://test-1337.twil.io/my-test-functionYou may also use the SID of your Twilio phone number instead of the E.164 formatted phone number:
twilio phone-numbers:update PNXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX \
--sms-url https://test-1337.twil.io/my-test-functionYou can also use any of the avilable Twilio SDKs to assign the Function as the webhook of you phone number. You will need a few prerequisites:
- A local development environment for your language of choice and the associated Twilio SDK installed.
- The SID (
PNXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX) of your Twilio phone number. - The full URL of your Function (
https://test-1337.twil.io/my-test-function).
In JavaScript for example, you could execute the following code to assign the SMS webhook of your Twilio phone number. The same logic would apply for assigining to a voice webhook, except that the modified property instead would be voiceUrl:
// Download the helper library from https://www.twilio.com/docs/node/install
// Find your Account SID and Auth Token at twilio.com/console
// and set the environment variables. See http://twil.io/secure
const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const client = require('twilio')(accountSid, authToken);
client
.incomingPhoneNumbers('PNXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX')
.update({ smsUrl: 'https://test-1337.twil.io/my-test-function' })
.then((phoneNumber) => console.log(phoneNumber.smsUrl));
Test it out
All the pieces are now in place, so now is a great time to test out this application! Open up your app’s web page by visiting its URL. This will be your service name, followed by index.html, for example:
https://sync-6475.twil.io/index.htmlIt should display no messages initially. However, if you send any text messages, they should pop into the messages list almost immediately. If you refresh the page, any previous messages should pop into view first, and new messages will continue adding to the end of the initial list.
Next steps
This app is functional, but its appearance is a little bare bone. It also doesn’t handle the inevitable occurrence when the current user’s Sync Token will expire after some time. To make this app look cleaner and more resilient to token expiration, add the following, highlighted updates to index.html.
If you want the ability for users to visit the app at the root URL instead of needing to specify /index.html at the end, such as just https://sync-6475.twil.io/, host index.html as a Root Asset and re-deploy!
Need some help?
We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.
