リアルタイムデータベース

11 分

parse server live queryの使い方はじめにライブクエリは、リアルタイム反応型アプリケーションで使用されることを目的としており、従来のクエリパラダイムを使用するだけでは、応答時間の増加や高いネットワークおよびサーバー使用量など、いくつかの問題を引き起こす可能性があります。ライブクエリは、データベースから新しいデータが継続的にページを更新する必要がある場合に使用されるべきであり、これはオンラインゲーム、メッセージングクライアント、共有のto doリストなどでよく発生しますが、これに限りません。このセクションでは、back4appを通じてjavascript環境でback4appのライブクエリを使用する方法を説明します。このチュートリアルでは、例として、ライブクエリを使用して todo online list を構築します。以下に示します完全な todo online list プロジェクトはライブクエリtodoリストプロジェクト https //github com/igor ribeiiro/onlinetodolist をご覧ください。 parse sdkの詳細は javascript sdk apiリファレンス https //parseplatform org/parse sdk js/api/4 3 1/ と javascript sdkのためのparseオープンソースドキュメント https //docs parseplatform org/js/guide/#live queries をご覧ください。前提条件このチュートリアルを完了するには、次のものが必要です： back4appに接続された基本的なjavascriptアプリまたはライブクエリtodoリストプロジェクト https //github com/igor ribeiiro/onlinetodolist が必要です。注：私たちの javascriptインストールparse sdk https //www back4app com/docs/javascript/parse javascript sdk チュートリアルで作成したアプリを使用するか、ライブクエリtodoリストプロジェクト https //github com/igor ribeiiro/onlinetodolist を使用できます。十分な知識が必要です javascript parseクエリ https //docs parseplatform org/js/guide/#queries （必須ではありません）。 1 ライブクエリを有効にするコーディングを始める前に、live queryを有効にするためにデータベースにクラスを持っている必要があります。そのためには、単にあなたのアプリを見つけて、 back4appのウェブサイト https //www back4app com/ をクリックし、 \ダッシュボード\ > \クラスを作成\ をクリックします。以下のようになります注意ここで、このクラスは \メッセージ\ と呼ばれます。さて、live query機能を有効にするために、 back4appのウェブサイト https //www back4app com/ にログインし、アプリを見つけて、 \アプリ設定\ > \サーバー設定\ をクリックします。「サーバーurlとlive query」ブロックを探し、「 \設定\ をクリックします。「サーバーurlとlive query」ブロックはこのようになります次に、以下のようなページに到着します。このページでは、 \back4appサブドメインを有効にする\ オプション、 \ライブクエリを有効にする\ オプション、およびライブクエリを有効にしたいすべてのクラスをチェックする必要があります。以下のようにライブクエリを使用するには、サブドメインを有効にする必要があります。これはライブサーバーとして機能します。 2 クエリに登録するライブクエリを使用するには、まず \livequeryclient\ を作成する必要があります。これがwebsocket接続を管理します。これを行うには、アプリケーションid、検証用のjavascriptキー、および前のステップで設定したドメインであるサーバーurlを提供する必要があります。こちらが \livequeryclient\ のコードです。 livequeryclient js 1 var client = new parse livequeryclient({ 2 applicationid 'your app id here', 3 serverurl 'wss\ //' + 'your domain here', // example 'wss\ //livequerytutorial back4app io' 4 javascriptkey 'your javascript key here' 5 }); 6 client open(); 上記の手順に従った後、サブスクライブしたいオブジェクトのタイプに対してクエリを作成する必要があります。サブスクリプションは、クエリを満たすオブジェクトに変更があったときにイベントを発火させるイベントエミッターです。この例では、基本的なクエリを作成し、すべての変更をサブスクライブします。 \todo\ オブジェクトに対して。クエリについての詳細は、 parse公式クエリドキュメント https //docs parseplatform org/js/guide/#queries をご覧ください。以下は \querysubscribe\ のコードです。 querysubscribe js 1 var query = new parse query('todo'); 2 query ascending('createdat') limit(5); 3 var subscription = client subscribe(query); 3 イベントをリッスンするセットアップが完了したので、イベントが発火したときにアプリが何をするかをコーディングする必要があります。この部分では、実際の例でこれらのイベントをリッスンする方法を示します。「 todo online list 」の例は、使用されるボイラープレートコードがほとんどないため、あなたのプロジェクトのガイドラインとして役立ちます。ここで使用する主な2つのイベントは、 \create\ イベントと \delete\ イベントです。イベントの完全なリストは、こちら http //docs parseplatform org/js/guide/#event handling で見つけることができます。 3 1 作成イベント「 \createevent\ 」は、 \parseobject\ が作成され、挿入したクエリ制約を満たすたびに発火します。このイベントは作成されたオブジェクトを返します。「 todo online list 」の例では、アクティビティの配列は「 \this todos\ 」変数に保存され、作成イベントが発生したときにこの配列にデータベースの新しいオブジェクトを追加します。「 \createevent\ 」のコードは以下の通りです createevent js 1 subscription on('create', todo => { 2 this todos add(todo); 3 console log('on create event'); 4 }); 3 2 削除イベント既存の \parseobject\ がデータベースから削除されると、このイベントが発生し、削除されたオブジェクトが返されます。「 todo online list 」の例では、データベースから削除されるたびにリストからオブジェクトを削除する必要があります。削除されたオブジェクトを特定するために、サーバーとコードの間で一致するidを探してください。「 \deleteevent\ 」のコードは以下の通りです deleteevent js 1 subscription on('delete', todo => { 2 this todos foreach(t => { 3 if (t id === todo id) { 4 console log('on delete event'); 5 this todos delete(t); 6 } 7 }); 8 }); 完了しました！この時点で、リアルタイムの反応型アプリケーションを作成するためにlive queriesを使用する方法を知っています。また、back4appを使用して正しいlive queryの設定を行う方法も知っており、アプリに実装を開始できます。