メニュー

Expand
ページを評価:

Sync in the Browser: a Quickstart Guide

In this guide, we'll get you up and running with a sample application you can build on as you learn more about Sync.

This sample application uses React and Node.js, so you will need to have Node.js installed locally to try it out.

目次

アカウント情報の収集

The first thing to do is grab all the necessary information from your Twilio account. To set up your Sync token generator, we will need the following:

構成値 概要
Account SID Your primary Twilio account identifier - find this on the main page of the Twilio console.
API Key Used to sign tokens. Generate one using the console API Keys tool.
API Secret Used to sign tokens, together with the corresponding API Key.

Download, configure, and run the web app

Follow the instructions in the README to configure and run it on your machine, using the values above.

Explore the web app

This is where the fun begins! When you visit the homepage of the web application, you should see a page which looks like this:

Sync React Quickstart Screen - Not Logged In

Fill in a username to use as the identity with your Sync service. If you want, you can change the session id to work with a different cobrowsing session. Sessions are unique to your Sync service, so you only need to change it if you want to try things out with another set of synced form data.

After pressing the Login button, you will see this screen:

Sync React Quickstart Screen - Logged In

All participants in the session will be seen in the list. Editing the form data in one tab will cause the other tabs to be updated after editing is complete.

You can use the web application with only one browser tab open, but the idea behind cobrowsing is that two (or more) people can see the same things in their web browser, without having to share their screens using a third-party application. So open another web browser or just a new tab to the quickstart application, and then login to the same session id with a different identity.

If you open this page in another browser window or tab, you should be able to change the form values, and then see them reflected in the other open tabs.

ユーザーの管理方法については、ユーザー識別子ガイドで触れており、Syncオブジェクト概要にてSyncオブジェクトで可能なことをすべて網羅しています。

ヘルプ

もう少しお手伝いが必要ですか?twilio_support@kddi-web.com までお知らせいただければ、迅速に対応させていただきます。 Syncを使った構築をお楽しみください。 そしてどんなものを構築されているのかぜひ教えてください!

次: 識別子とアクセストークン »

ページを評価:

ヘルプが必要ですか?

誰しもが一度は考える「コーディングって難しい」。そんな時は、お問い合わせフォームから質問してください。 または、Stack Overflow でTwilioタグのついた情報から欲しいものを探してみましょう。

        
        
        

        フィードバックくださりありがとうございます!

        We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

        Sending your feedback...
        🎉 Thank you for your feedback!
        Something went wrong. Please try again.

        Thanks for your feedback!

        Refer us and get $10 in 3 simple steps!

        ステップ1

        Get link

        Get a free personal referral link here

        ステップ2:

        Give $10

        Your user signs up and upgrade using link

        ステップ3

        Get $10

        1,250 free SMSes
        OR 1,000 free voice mins
        OR 12,000 chats
        OR more