数分でリアルタイム コラボレーションを React アプリに追加

先日、私の知り合いから次のようなメッセージが届きました。

「休暇中に、投資収益がどのように機能するかを Zoom で息子に説明しようとしていたのですが、もし二人とも Google ドキュメントのようなものを使って作業できたら、とても簡単だったでしょう。」

チャレンジを受け付けました!

ここ数日間、私は複数のパラメーターに基づいて投資収益を予測できる投資収益シミュレーターを構築して楽しかったです。
インターネットにはそのような Web サイトがたくさんありますが、この Web サイトでは、共同機能を組み込む方法と、それらがどのようにして人々を結びつけることができるのかを探りたかったのです。

このガイドでは、バックエンド コードを記述したり、Web ソケットを処理したりせずに、わずか 10 分で通常の React アプリにリアルタイム コラボレーションを追加する方法を説明します。おまけとして、共同 Web サイトでのユーザー エクスペリエンスを向上させる方法についても検討します!

このプロジェクトの完全なソース コードは GitHub で入手できます

飛び込んでみましょう!

出発点: 基礎の構築

コラボレーション機能に入る前に、強固な基盤が必要でした。私はまず、ユーザーが投資パラメータを入力できるシングルプレイヤー バージョンを作成しました。これらの入力は、投資収益予測を生成および表示する計算エンジンに入力されます。

すぐに立ち上げて実行するために、bolt.new を使用しました。私は、そのクリーンなデザインと、許容できる開始点に素早くたどり着いたことに感銘を受けました。非常に有利なスタートにもかかわらず、かなりの計算ロジックを微調整し、好みに合わせて UI を調整する必要がありました。

---

アプリケーションを共同作業にする

シングルプレイヤーバージョンが完成したので、私はそれを協力的なものにすることに注意を向けました。このプロジェクトは、私がここ数か月間 Multisynq で開発してきたオープンソース ライブラリである React Together をテストする絶好の機会を提供しました。

React Together は、複雑なバックエンドのセットアップやソケット接続の管理を行わずに共同機能を実現するフックとコンポーネントを提供します。実装プロセスは簡単であることが判明しましたが、ライブラリの将来のバージョンで対処するいくつかの改善点が明らかになりました。

それでは、アプリにリアルタイム コラボレーションを追加するための 3 つの手順を見てみましょう。タイマーを開始しますか?

ステップ 1: React Together コンテキストのセットアップ

最初のステップは、アプリケーションを React Together コンテキスト プロバイダーでラップすることです。このコンポーネントは、すべての状態同期とセッション管理をバックグラウンドで処理します。

// src/index.tsx
import { StrictMode } from 'react'
import { ReactTogether } from 'react-together'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <strictmode>
    <reacttogether sessionparams="{{" appid: import.meta.env apikey:>
      <app></app>
    </reacttogether>
  </strictmode>,
)

React Together は、アプリケーションの同期に Multisynq のインフラストラクチャを使用します。これには API キーが必要です。 無料 API キーは multisynq.io/account から取得できます。心配しないでください。これらのキーは公開されるようになっており、どのドメインで使用できるかを制御できるためです。

すべてのユーザーが Web サイトに入ったら自動的に同じセッションに接続するように React Together を設定できます。実際、これは 2 段階のガイドになりますが、私はコラボレーションがオプトインである Google ドキュメント スタイルのアプローチを採用しました。ユーザーは、ボタンをクリックして明示的にセッションを作成するかセッションに参加するまで、切断されたままになります。セッション管理については、このガイドの 3 番目のステップで説明します!

ステップ 2: ユーザー間で状態を同期する

React Together をセットアップしたら、次のステップはユーザー間の状態を同期することです。このプロセスは非常に簡単です。React の useState フックを React Together の useStateTogether フックに置き換えるだけです。

useStateTogether フックは useState と同様に機能しますが、追加の rtKey パラメーターが必要です。このキーはアプリケーション全体の状態を一意に識別し、ビューポート間で DOM 階層が異なる可能性がある応答性の高いレイアウトでも適切な同期を保証します。

変換の様子は次のとおりです:

// src/index.tsx
import { StrictMode } from 'react'
import { ReactTogether } from 'react-together'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <strictmode>
    <reacttogether sessionparams="{{" appid: import.meta.env apikey:>
      <app></app>
    </reacttogether>
  </strictmode>,
)

// Before
import { useState } from 'react'

export default function Calculator() {
  const [startingAmount, setStartingAmount] = useState(20000);
  const [years, setYears] = useState(25);
  const [returnRate, setReturnRate] = useState(10);
  const [compoundFrequency, setCompoundFrequency] = useState("annually");
  const [additionalContribution, setAdditionalContribution] = useState(500);
  const [contributionTiming, setContributionTiming] = useState("beginning");
  const [contributionFrequency, setContributionFrequency] = useState("month");

  // ...
}

このアプローチの利点は、アプリケーションが以前とまったく同じように動作し続けることです。唯一の違いは、状態の更新が接続されているすべてのユーザー間で同期されることです。

ステップ 3: セッション管理を追加する

最後のステップは、ユーザーが共同セッションを作成、参加、退出する方法を追加することです。私は、セッション コントロールが誰にでも簡単に見えるように、電卓の上のヘッダー セクションを通じてこれを実装することにしました。

React Together は 4 つの重要なフックを提供することでこれを簡単にします。

• useIsTogether: 現在セッション中かどうかを示します
• useCreateRandomSession: 新しいプライベート セッションを作成します
• useLeaveSession: 現在のセッションから切断します
• useJoinUrl: 他の人が参加するための共有可能な URL を提供します

ヘッダー コンポーネントの簡略化されたバージョンを次に示します (クラス名を削除しただけです)。

// After
import { useStateTogether } from 'react-together'

export default function Calculator() {
  const [startingAmount, setStartingAmount] = useStateTogether("startingAmount", 20000);
  const [years, setYears] = useStateTogether("years", 25);
  const [returnRate, setReturnRate] = useStateTogether("returnRate", 10);
  const [compoundFrequency, setCompoundFrequency] = useStateTogether("compoundFrequency", "annually");
  const [additionalContribution, setAdditionalContribution] = useStateTogether("additionalContribution", 500);
  const [contributionTiming, setContributionTiming] = useStateTogether("contributionTiming", "beginning");
  const [contributionFrequency, setContributionFrequency] = useStateTogether("contributionFrequency", "month");

  // ...
}

この実装により、ユーザーはクリックするだけで共同セッションを開始できるようになりました。誰かが共有 URL を使用して参加すると、他の参加者と同じ状態がすぐに表示され、すべての変更がすべての参加者間でリアルタイムに同期されます。

それだけです。簡単で、うまくいきます。しかも10分以内で完了します!!

---

コラボレーションエクスペリエンスの向上

基本的な同期はうまくいきましたが、何か違和感がありました。ページ上の要素が「勝手に」変更され、誰が変更を加えたかが示されませんでした。これは共同作業アプリケーションではよくある課題であり、Google ドキュメントなどのツールは、他のユーザーがどこを表示および編集しているかを示すことでこの問題を解決します。

真のコラボレーションとは、単に状態を同期することではなく、存在感を生み出すことです。ユーザーは効果的に共同作業するためにお互いを「見る」必要があります。

私は当初、ユーザーがお互いのマウス ポインターを確認できるように、共有カーソルを実装することを検討しました。ただし、このアプローチでは、レスポンシブ Web アプリケーションに次のような課題が生じます。

• 異なるビューポート サイズ間でマウス座標がきれいにマッピングされません
• カーソルの位置にはコンテキストが欠けていることがよくあります。ユーザーのカーソルがなぜ特定の場所にあるのかは不明です
• カーソル位置の意味は、画面レイアウトが異なると曖昧になる場合があります

代わりに、ユーザー プレゼンスで本当に達成したいことに焦点を当てました。

1. 他の人が積極的に存在しているとユーザーが感じられるようにします
2. 各ユーザーが現在表示または編集している要素を表示します

解決策は？ユーザーが操作している要素を強調表示します。このアプローチはよりシンプルで直感的であり、すべてのビューポート サイズで確実に機能します。これを 2 つの主要な領域 (グラフ タブと入力フィールド) に実装する方法を見てみましょう。

グラフタブへのユーザープレゼンスの追加

ユーザー プレゼンスの簡単な実装から始めましょう。各グラフ タブをどのユーザーが表示しているかを示します。

このためには、各ユーザーが他の全員に表示される独自の値を持つことができる特別な種類の共有状態が必要です。

React Together は、useStateTogetherWithPerUserValues フックで必要なものを正確に提供します (はい、それはかなり長いです!)。このフックは useStateTogether と同様に機能しますが、単一の値を共有する代わりに、各ユーザーがすべての参加者に表示される独自の値を持つことができます。フックは 3 つの要素を返します:

1. 現在のユーザーのローカル状態値
2. ローカル状態を更新する関数
3. 各ユーザーの状態値を含むオブジェクト

タブの横にユーザー アバターを表示するためにこれを実装する方法は次のとおりです:

// src/index.tsx
import { StrictMode } from 'react'
import { ReactTogether } from 'react-together'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <strictmode>
    <reacttogether sessionparams="{{" appid: import.meta.env apikey:>
      <app></app>
    </reacttogether>
  </strictmode>,
)

上記のコード スニペットでは、useState を useStateTogetherWithPerUserValues に置き換えました。再度、アプリケーションは以前と同様に動作し続けましたが、全員が他の全員の状態を確認できるようになりました。次に、取得した新しい情報をレンダリングする必要がありました。

この実装では、各タブの横にユーザーのアバターが表示され、どのユーザーがどのグラフを表示しているかが明確になります。ユーザーは自分のプレゼンス インジケーターを見る必要がないため、冗長性を避けるために現在のユーザーのアバターを除外します。

入力フィールドにユーザーのプレゼンスを追加する

入力フィールドへのプレゼンス インジケーターの追加は、前の例と同様のパターンに従いますが、追加の要件があります。ユーザーがいつ編集を開始および終了したかを追跡する必要があります。幸いなことに、Ant Design のコンポーネントは、この目的に必要なコールバックを提供します。

各入力フィールドについて、次のことを行いたいと考えていました。

1. 他の人が編集しているときに色付きの境界線を表示します
2. 右上隅に編集者のアバターを表示します
3. アプリケーション全体でユーザーごとに一貫した色を維持します

useStateTogetherWithPerUserValues フックを使用してこれを実装する方法は次のとおりです。

// src/index.tsx
import { StrictMode } from 'react'
import { ReactTogether } from 'react-together'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <strictmode>
    <reacttogether sessionparams="{{" appid: import.meta.env apikey:>
      <app></app>
    </reacttogether>
  </strictmode>,
)

コードは少し長くなりますが、原理は簡単です。各入力フィールドを編集しているユーザーを追跡し、必要なビジュアライゼーションをレンダリングするだけです。

これと同じアプローチが、ドロップダウンやスライダー バーなどの他の入力タイプにも機能します!!

--

それで終わりです!この完全に協力的な投資収益率シミュレーターを使用すると、友人が Zoom 上で投資収益率がどのように機能するかを息子に説明するのが簡単になります。ミッション達成！ ✨

この種の共同 Web サイトを簡単に作成できるのを見ると、オンラインのときにインターネットがどのようにして私たちの距離を近づけるのだろうかと不思議に思います...詳しくは後ほど!

何か新しいことを学んでいただければ幸いです。フィードバックやご質問がございましたら、お気軽にお問い合わせください。

コーディングを楽しんでください! ?

• ?ライブデモ
• ?‍?ソースコード
• ?一緒に反応するドキュメント

以上が数分でリアルタイム コラボレーションを React アプリに追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。