Tambahkan Kerjasama Masa Nyata pada Apl React Anda dalam Minit

Pada hari lain, seseorang yang saya kenali telah menghantar mesej:

"Saya mendapati diri saya semasa bercuti cuba menerangkan kepada anak saya bagaimana pulangan pelaburan berfungsi melalui Zoom dan ia akan menjadi sangat mudah jika kami berdua dapat bekerja dalam sesuatu seperti Dokumen Google"

Cabaran diterima!

Sejak beberapa hari lalu saya berasa seronok membina simulator pulangan pelaburan, di mana kita boleh meramalkan pulangan pelaburan berdasarkan berbilang parameter.
Internet penuh dengan tapak web sedemikian, tetapi dalam yang ini, saya ingin meneroka bagaimana kita boleh membenamkan ciri kolaboratif dan bagaimana mereka boleh menyatukan orang ramai.

Dalam panduan ini, kita akan melihat cara kita boleh menambah kerjasama masa nyata pada apl React biasa dalam hanya 10 minit tanpa menulis sebarang kod hujung belakang atau berurusan dengan soket web. Sebagai bonus, kami juga akan meneroka cara kami boleh meningkatkan pengalaman pengguna dalam tapak web kolaboratif!

Kod sumber penuh untuk projek ini tersedia di GitHub

Jom selami!

Titik Permulaan: Membina Asas

Sebelum menyelami ciri kolaboratif, kami memerlukan asas yang kukuh. Saya bermula dengan mencipta versi pemain tunggal di mana pengguna boleh memasukkan parameter pelaburan mereka. Input ini kemudiannya akan dimasukkan ke dalam enjin pengiraan yang menjana dan memaparkan ramalan pulangan pelaburan.

Saya menggunakan bolt.new untuk bangun dan berlari dengan pantas. Saya kagum dengan reka bentuk bersih yang diberikan kepada saya, dan dengan seberapa pantas saya sampai ke titik permulaan yang boleh diterima. Walaupun permulaan yang besar, saya masih perlu memperhalusi beberapa logik pengiraan dan melaraskan UI mengikut keinginan saya.

---

Menjadikan aplikasi kolaboratif

Dengan versi pemain tunggal yang lengkap, saya menumpukan perhatian untuk menjadikannya kolaboratif. Projek ini memberikan peluang yang sempurna untuk menguji React Together, perpustakaan sumber terbuka yang saya bangunkan di Multisynq sejak beberapa bulan lalu.

React Together menyediakan cangkuk dan komponen yang membolehkan ciri kolaboratif tanpa kerumitan menyediakan hujung belakang atau mengurus sambungan soket. Proses pelaksanaan terbukti mudah, walaupun ia mendedahkan beberapa bahagian untuk penambahbaikan yang akan kami tangani dalam versi perpustakaan akan datang.

Sekarang, mari kita ikuti tiga langkah untuk menambahkan kerjasama masa nyata pada apl kami! Mulakan pemasa anda ?

Langkah 1: Sediakan Konteks React Together

Langkah pertama ialah membungkus aplikasi kami dalam penyedia konteks React Together. Komponen ini mengendalikan semua penyegerakan keadaan dan pengurusan sesi di belakang tabir.

// 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['VITE_APP_ID'],
      apiKey: import.meta.env['VITE_API_KEY'],
    }}>
      <App />
    </ReactTogether>
  </StrictMode>,
)

React Together menggunakan infrastruktur Multisynq untuk penyegerakan aplikasi, yang memerlukan kunci API. Anda boleh mendapatkan kunci API percuma anda daripada multisynq.io/account. Dan jangan risau, kunci ini bertujuan untuk diketahui umum, kerana anda boleh mengawal domain mana yang boleh menggunakannya.

Kami boleh mengkonfigurasi React Together untuk menyambung secara automatik semua pengguna ke sesi yang sama sebaik sahaja mereka memasuki tapak web. Malah, itu akan menjadikan ini panduan 2 langkah, tetapi saya menggunakan pendekatan gaya Google Docs di mana kerjasama adalah ikut serta. Pengguna kekal terputus sambungan sehingga mereka membuat atau menyertai sesi secara eksplisit melalui klik butang. Kami akan meliputi pengurusan sesi pada langkah ketiga panduan ini!

Langkah 2: Segerakkan keadaan merentas pengguna

Dengan persediaan React Together, langkah seterusnya ialah menyegerakkan keadaan antara pengguna. Proses ini sangat mudah: kita hanya perlu menggantikan cangkuk useState React dengan cangkuk useStateTogether React Together.

Kait useStateTogether berfungsi sama seperti useState, tetapi memerlukan parameter rtKey tambahan. Kunci ini secara unik mengenal pasti keadaan merentas aplikasi, memastikan penyegerakan yang betul walaupun dalam reka letak responsif di mana hierarki DOM mungkin berbeza antara port pandangan.

Begini rupa transformasi:

// 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['VITE_APP_ID'],
      apiKey: import.meta.env['VITE_API_KEY'],
    }}>
      <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");

  // ...
}

Keindahan pendekatan ini ialah aplikasi terus berfungsi seperti dahulu - satu-satunya perbezaan ialah kini kemas kini keadaan disegerakkan merentas semua pengguna yang disambungkan.

Langkah 3: Tambah Pengurusan Sesi

Langkah terakhir ialah menambahkan cara untuk pengguna membuat, menyertai dan meninggalkan sesi kolaboratif. Saya memilih untuk melaksanakan perkara ini melalui bahagian pengepala di atas kalkulator, menjadikan kawalan sesi mudah dilihat oleh semua orang.

React Together menjadikannya mudah dengan menyediakan empat cangkuk penting:

• useIsTogether: Beritahu kami jika kami sedang dalam sesi
• useCreateRandomSession: Mencipta sesi peribadi baharu
• useLeaveSession: Memutuskan sambungan daripada sesi semasa
• useJoinUrl: Menyediakan URL yang boleh dikongsi untuk orang lain menyertai

Berikut ialah versi ringkas komponen pengepala (saya baru saja mengalih keluar nama kelas):

// 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");

  // ...
}

Dengan pelaksanaan ini, pengguna kini boleh memulakan sesi kolaboratif dengan hanya satu klik. Apabila seseorang menyertai menggunakan URL kongsi, mereka akan segera melihat keadaan yang sama seperti orang lain, dengan semua perubahan disegerakkan dalam masa nyata merentas semua peserta.

Dan itu sahaja, ia mudah dan ia hanya berfungsi! Tambahan pula anda boleh melakukannya dalam masa kurang daripada 10 minit!!

---

Meningkatkan Pengalaman Kerjasama

Sementara penyegerakan asas berfungsi dengan baik, ada sesuatu yang terasa: elemen berubah "dengan sendirinya" pada halaman, tanpa menunjukkan siapa yang membuat perubahan. Ini ialah cabaran biasa dalam aplikasi kolaboratif dan alatan seperti Dokumen Google menyelesaikannya dengan menunjukkan tempat pengguna lain melihat dan mengedit.

Kerjasama sejati bukan hanya tentang menyegerakkan keadaan—ia juga tentang mewujudkan rasa kehadiran. Pengguna perlu "melihat" satu sama lain untuk bekerjasama dengan berkesan.

Saya pada mulanya mempertimbangkan untuk melaksanakan kursor dikongsi, membolehkan pengguna melihat penunjuk tetikus masing-masing. Walau bagaimanapun, pendekatan ini memberikan cabaran dalam aplikasi web responsif:

• Koordinat tetikus tidak dipetakan dengan bersih antara saiz port pandangan yang berbeza
• Kedudukan kursor selalunya tidak mempunyai konteks—tidak jelas sebab kursor pengguna berada di lokasi tertentu
• Maksud kedudukan kursor boleh menjadi samar-samar merentas reka letak skrin yang berbeza

Sebaliknya, saya menumpukan pada perkara yang ingin kami capai dengan kehadiran pengguna:

1. Bantu pengguna merasakan bahawa orang lain hadir secara aktif
2. Tunjukkan elemen yang sedang dilihat atau diedit oleh setiap pengguna

Penyelesaian? Serlahkan elemen yang berinteraksi dengan pengguna. Pendekatan ini lebih mudah, lebih intuitif dan berfungsi dengan pasti pada semua saiz port pandangan. Mari lihat cara melaksanakan perkara ini dalam dua bidang utama: tab carta dan medan input.

Menambah Kehadiran Pengguna pada Tab Carta

Mari kita mulakan dengan pelaksanaan mudah kehadiran pengguna: menunjukkan pengguna yang melihat setiap tab carta.

Untuk ini, kami memerlukan jenis keadaan kongsi khas di mana setiap pengguna boleh mempunyai nilai mereka sendiri yang boleh dilihat oleh orang lain.

React Together menyediakan dengan tepat apa yang kita perlukan dengan cangkuk useStateTogetherWithPerUserValues ​​(ya, itu cukup suap!). Cangkuk ini berfungsi sama seperti useStateTogether, tetapi bukannya berkongsi nilai tunggal, ia membolehkan setiap pengguna mempunyai nilai mereka sendiri yang boleh dilihat oleh semua peserta. Cangkuk mengembalikan tiga elemen:

1. Nilai keadaan setempat pengguna semasa
2. Fungsi untuk mengemas kini keadaan setempat
3. Objek yang mengandungi nilai keadaan setiap pengguna

Begini cara kami melaksanakan ini untuk menunjukkan avatar pengguna di sebelah tab:

// 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['VITE_APP_ID'],
      apiKey: import.meta.env['VITE_API_KEY'],
    }}>
      <App />
    </ReactTogether>
  </StrictMode>,
)

Dalam coretan kod di atas, kami menggantikan useState dengan useStateTogetherWithPerUserValues, dan sekali lagi, aplikasi itu terus berfungsi seperti dahulu, tetapi kini semua orang dapat melihat keadaan orang lain! Kemudian kami hanya perlu memberikan maklumat baharu yang baru kami dapat.

Pelaksanaan ini menunjukkan avatar pengguna di sebelah setiap tab, menjadikannya jelas pengguna yang melihat carta mana. Kami menapis avatar pengguna semasa untuk mengelakkan lebihan, kerana pengguna tidak perlu melihat penunjuk kehadiran mereka sendiri.

Menambah Kehadiran Pengguna pada Medan Input

Menambah penunjuk kehadiran pada medan input mengikut corak yang serupa dengan contoh sebelumnya, tetapi dengan keperluan tambahan: kami perlu menjejak apabila pengguna mula dan berhenti mengedit. Nasib baik, komponen Ant Design menyediakan panggilan balik yang diperlukan untuk tujuan ini.

Untuk setiap medan input, saya mahu:

1. Tunjukkan jidar berwarna apabila orang lain sedang mengedit
2. Paparkan avatar editor di penjuru kanan sebelah atas
3. Kekalkan warna yang konsisten bagi setiap pengguna sepanjang aplikasi

Begini cara kami melaksanakannya menggunakan cangkuk 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['VITE_APP_ID'],
      apiKey: import.meta.env['VITE_API_KEY'],
    }}>
      <App />
    </ReactTogether>
  </StrictMode>,
)

Walaupun kodnya lebih panjang sedikit, prinsipnya mudah: Kami hanya perlu menjejak pengguna mana yang mengedit setiap medan input, dan kemudian memberikan visualisasi yang mana yang kami mahu.

Pendekatan yang sama ini berfungsi untuk mana-mana jenis input lain, seperti drop down dan bar peluncur!!

--

Dan itu sahaja! Dengan simulator pulangan pelaburan yang kolaboratif sepenuhnya ini, rakan saya akan lebih mudah untuk menerangkan kepada anaknya bagaimana pulangan pelaburan berfungsi melalui Zoom. Misi tercapai! ✨

Melihat betapa mudahnya untuk mencipta tapak web kerjasama sebegini membuatkan saya tertanya-tanya bagaimana internet boleh merapatkan kita apabila kita berada dalam talian... Lebih lanjut mengenainya nanti!

Semoga anda mempelajari sesuatu yang baharu, dan jangan ragu untuk menghubungi anda jika anda mempunyai sebarang maklum balas atau soalan!!

Selamat pengekodan! ?

• ? Demo Langsung
• ?? Kod Sumber
• ? React Together Docs

Atas ialah kandungan terperinci Tambahkan Kerjasama Masa Nyata pada Apl React Anda dalam Minit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!