Todayjavascript コラムでは、インタラクティブなアプリケーションを構築する方法を紹介します。

#インタラクティブ アプリケーションの構築

まえがき

この記事では、正面からの観点から簡単に紹介します。インタラクティブ アプリケーションを構築するためのアイデアを提供し、オンライン インタラクションのソリューションを提供し、途中で 2 つのシナリオを追加し、最後に実際のインタラクティブ アプリケーションの最適化の方向性を簡単に紹介します。読むことで、次のことを学ぶことができます:

対話型アプリケーションとは
• 対話型プロセスの実現
• 途中で追加された同期
• 対話型アプリケーションの最適化方向

インタラクティブアプリケーションとは

インタラクションとは、互いに対話し、互いに通信することを意味します。インタラクティブ アプリケーションは、ユーザーが相互に通信する方法を提供します。インターネット ユーザーは、アプリケーションの同じページを開いて、ページ要素を操作して対話し、共有とコミュニケーションの目的を達成できます。

簡単な使用シナリオ

以下に示すように、オフラインの教室シナリオでは、教師と生徒は言語、テキスト、その他のメディアを通じて相互に対話します。このプロセスは双方向であり、情報は同期されています。

今年の感染症流行中、多くの学校がオンライン授業を利用して授業を実施していますが、オンライン授業体験をオフライン授業に近づける、あるいはそれを超えるにはどうすればよいでしょうか?これには、双方向および情報同期を前提としたオンライン教育機能を提供する対話型アプリケーションが必要です。

たとえば、教師がアプリケーションでコースウェアを開くと、学生は同時にコースウェアを確認する必要があり、指導プロセス中のコースウェアの操作も、学生がアプリケーションで 1 つずつ確認することができます。同じクラスを受信すると、生徒はコースウェアを操作して教師や他の生徒が受信できるようになります。

このアプリケーションを通じて、教師は授業中に生徒から即座にフィードバックを受け取ることができ、生徒がオンライン教室での交流に参加することもできます。

対話型プロセスの実現

情報同期の効果をどのように実現するか?情報の同期、つまりステータスの同期。オンライン授業のシナリオでは、教師がコースウェアを操作しますが、学生が最新のコースウェア情報を確認するには、コースウェアのステータスを更新するという目的を達成するために、現在のコースウェアに教師のコースウェアの操作状況を追加する必要があります。 。

抽象的に言えば、

現状増分ステータス = 最新ステータス ;

一方、コースウェアの動作はネットワークを通じて他の端末に伝達する必要があり、

動作のシリアル化と逆シリアル化が必要であることを意味します;

一般に、完全な対話プロセスには、動作の生成と動作のシリアル化、動作データの送信、逆シリアル化、および動作の同期が含まれます。3 つのプロセスは次のとおりです。 A側がビヘイビアをトリガーすると、シリアル化によって対応するビヘイビアデータが生成され、データがB側に送信された後、B側はデシリアライズ後に同じビヘイビアを復元し、「ビヘイビア——ビヘイビア」の同期が完了します。

1. 動作の生成と動作のシリアル化

動作の同期を完了するには、動作を命令データに抽象化する必要があります。データを最適化して結果を取得する、このプロセスがシリアル化のプロセスです。

2. 行動データ送信

対話型アプリケーションはリアルタイムであり、データ送信は通常、WebSocket などのインスタント メッセージング テクノロジを使用して完了します。

3. 逆シリアル化と動作の同期

データを受信した後、動作データを逆シリアル化し、アプリケーションをトリガーして対応する動作を実行し、動作の同期を完了します。

途中参加の同期

上記では、同時に接続した端末の対話処理について説明しましたが、対話型アプリケーションの実際の利用シーンでは、ユーザーが途中参加する場合です。たとえば、教師の授業は、生徒がオンラインでクラスに参加するまでの一定期間続きます。このシナリオでは、後続のインタラクションの同期を確実にするために、ユーザーを最新のページ状態に復元する方法を検討する必要があります。

同期を途中で追加するための前提条件

履歴ステータスの復元の実現可能性を確保するには、対話型アプリケーションのステータスをデータに完全に記録し、このデータを確実に使用できるようにする必要があります。アプリケーションページの状態を復元する

同期に途中参加するプロセス

以下に示すように、A と B は同時にオンライン インタラクションの両端となります。 C エンドが途中で結合した後、最初にページ状態 a を初期化し、次に diff 状態を取得してページに適用して状態 b を取得します;

注意すべき点は、他の 2 つが終了したときです。 C 側が途中で参加する同期期間中に対話します。この時点では、C 側の b ステータスは実際にはページの最新のステータスではないため (以下に示すように)、メッセージの回復を完了するには、restoreTweenMsg ステップが必要です。 a-c 状態の間、C 側の状態が A および B と同じであることを確認します

対話型アプリケーションの最適化の方向

#メッセージの軽量化

#ユーザー数が増加したときインタラクティブなアプリケーションが多数に達すると、データ送信がサービスに大きな圧力をかけることになります。フロントエンドの観点から見ると、メッセージの軽量化により、この問題をある程度軽減できます。メッセージの軽量化は、圧縮、単純化、スパース性の 3 つの最適化方向から完了します。

圧縮

送信側はメッセージを圧縮し、メッセージの量を減らすことでサービスの負荷を軽減します。受信側はそれを受け取ります。後で解凍します。

合理化

次の図に示すように、送信側はコンパイラ ミドルウェアを使用して命令データを合理化し、メッセージ サイズを削減します。受信側はインタプリタ ミドルウェアを使用してデータを復元します。

スパース

高密度で連続し、プロセス状態に副作用がない命令の場合は、スパース命令を使用して命令の数を減らし、スパースを受け取った後にトゥイーン操作を実行します。

##同期の高速化

ユーザーが途中で参加すると、履歴データが大きい場合に同期速度が影響を受ける可能性があり、ユーザー エクスペリエンスに直接影響します。同期プロセス中、履歴データの送信は時間の大部分を占めます。履歴データの送信を高速化することで同期を高速化できます。

フラグメンテーション同期

モデル データが大きい場合、直接送信中にデータ損失が発生する可能性があります。

データ送信にフラグメンテーションを使用するとデータの整合性を確保できますが、このソリューションは大きく依存します。 WebSocket の送信と伝送速度について

パッシブアップロード同期

ユーザー A が途中参加すると、履歴データを取得するために他のユーザーにメッセージが送信されますリクエストされたユーザーがデータをアップロードすると、WebSocket を通じてダウンロード リンクがユーザー A に通知され、リンクを取得したユーザー A は履歴データをダウンロードします。このソリューションは上記のソリューションよりも高速ですが、同期リンクが長く、途中で参加するユーザーにはまだ時間がかかります。

タイミングアップロード同期

履歴データを定期的にアップロードする端末を設定し、ユーザーが途中参加した場合はサーバーに直接データを要求します。このソリューションでは、同期リンクを短縮することで同期速度をさらに向上させます。このソリューションでは、データアップロードと取得の時間差による状態差を考慮し、復元する必要があります。

結論

この記事で説明する対話型アプリケーション ソリューションはチーム メンバーによって共同で検討されたものであり、欠点を指摘する必要があります。

関連する無料学習の推奨事項: javascript(ビデオ)

以上がインタラクティブなアプリケーションを構築する方法を紹介しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。