手順3: Syncオブジェクトの情報を更新

この手順ではクライアントアプリケーションからSyncオブジェクトを更新する処理を実装します。この処理により同じオブジェクトの購読を実施しているアプリケーションに同じ情報を送信できるようになります。

3-1. メッセージ送信の仕組みを実装

続けてsync.jsファイルを開き、alertForm.addEventListener('submit', async (event) => { });の中身を実装します。

このイベントリスナーでは、HTML要素から入力された値を取得し、Syncオブジェクトを更新します。

alertForm.addEventListener('submit', async (event) => {
    event.preventDefault();

    // 情報の種類ならびにメッセージ内容を取得
    const submitId = event.submitter.id;
    const message = messageField.value;

    // Syncクライアントを使用し、同期するデータを更新
    syncClinet.document('Message')
        .then((document) => {
            document.update({
                messageType: submitId,
                message: message
            });
        });
});

3-2. 最終デプロイを実施し、アプリケーションの動作を確認

最終デプロイを実行し、複数タブでアプリケーションを起動します。1つのクライアントアプリケーションから発行したメッセージが他のアプリケーションにも反映されていることを確認してください。

次のステップ

これで基本的なSyncの処理を実装できました。このようにSyncを利用し複数の端末で同じ情報を共有できるようになります。

実開発においては、下記のリソースも参考にしてください。

今回のハンズオンをクリーンアップ

今回のハンズオンで使用したリソースをクリアする場合は次の手順を実施してください。

Twilio Functionsのサービス一覧画面で削除したいサービスのDeleteボタンをクリックし、サーバーレス実行環境を削除します。

Functions - delete

APIキー画面で削除したいキーを選択し、詳細画面でこのAPIキーを削除するリンクをクリックし、APIキーを削除します。

API Key - Delete

Twilio Syncのサービス一覧で削除したいサービスを選択し、詳細画面でDelete this Serviceリンクをクリックし、サービスを削除します。

Sync - Delete

Default Serviceを使用している場合かつ、他で利用していない場合は、このServiceをリセットするリンクをクリックし内容をクリアできます。