Keizinan Masa Nyata dalam Aplikasi Sembang dengan Permit.io dan WebSockets

Apabila aplikasi sembang moden berkembang, komunikasi masa nyata memerlukan kawalan akses yang semakin terperinci. Menguruskan kebenaran dinamik dalam masa nyata untuk pelbagai bilik sembang dan peserta, terutamanya dalam persekitaran yang kompleks atau berbilang pengguna, boleh menjadi mencabar dengan cepat. Bagaimana jika anda boleh melaksanakan keizinan terperinci untuk apl sembang anda dengan mudah tanpa menjejaskan prestasi?

Permit.io menjadikan penyepaduan kawalan akses masa nyata yang mantap ke dalam aplikasi sembang anda menjadi mudah. Dengan menggandingkan model kebenaran lanjutan Permit.io dengan WebSockets, anda boleh memastikan bahawa pengguna yang betul mempunyai akses pada masa yang sesuai, sambil mengekalkan responsif yang diperlukan dalam aplikasi sembang.

Dalam tutorial ini, anda akan belajar cara melaksanakan kebenaran masa nyata dalam aplikasi sembang berasaskan WebSocket menggunakan Permit.io. Pada akhirnya, anda akan memahami cara untuk menguatkuasakan kawalan akses berasaskan peranan dan berasaskan atribut secara dinamik, melindungi bilik sembang yang berbeza, keterlihatan mesej dan interaksi dalam masa nyata.

Pengenalan kepada Keizinan Masa Nyata dalam Aplikasi Sembang

Kita semua menggunakan aplikasi sembang dalam satu bentuk atau yang lain untuk kekal berhubung dengan rakan dan keluarga, membincangkan perkara penting dengan rakan sekerja, dan juga menjalankan perniagaan. Dengan peningkatan permintaan untuk komunikasi masa nyata yang lancar, mudah untuk mengambil mudah langkah keselamatan canggih yang melindungi interaksi ini. Walau bagaimanapun, apabila aplikasi sembang menjadi lebih kompleks, begitu juga cabaran untuk mendapatkan data pengguna dan perbualan. Kawalan akses yang terperinci membantu memastikan bahawa hanya pengguna yang dibenarkan mempunyai akses kepada maklumat dan tindakan sensitif.

Mengapa apl sembang masa nyata memerlukan kawalan akses yang terperinci

Kawalan akses yang terperinci adalah penting dalam aplikasi sembang masa nyata untuk memastikan keselamatan, penyesuaian pengguna dan pematuhan peraturan.
Dengan menetapkan kaedah pengesahan yang teguh dan kebenaran berasaskan peranan, aplikasi sembang menghalang pengguna yang tidak dibenarkan daripada mengakses perbualan sensitif dan membenarkan pentadbir mengurus interaksi pengguna dengan berkesan. Pendekatan ini juga meningkatkan pengalaman pengguna dengan mendayakan penyertaan dalam pelbagai jenis sembang—awam, peribadi atau kumpulan—berdasarkan peranan atau keutamaan individu, mewujudkan interaksi yang lebih menarik.
Selain itu, kawalan akses yang terperinci membantu organisasi memenuhi peraturan privasi data yang ketat, seperti GDPR, melindungi data sulit dan meminimumkan risiko undang-undang.

Cabaran melaksanakan kebenaran dinamik dalam konteks sembang

Intinya merangkumi semua idea utama daripada perenggan. Berikut ialah versi yang diperhalusi yang merangkumi setiap butiran:

1. Apl sembang masa nyata memerlukan semakan dan kemas kini kebenaran segera, menjadikan keizinan dinamik mencabar tanpa mempertaruhkan kesan prestasi, terutamanya apabila mengendalikan jumlah mesej dan pengguna yang besar.
2. Aplikasi sembang selalunya melibatkan berbilang lapisan akses, dengan kebenaran yang berbeza-beza berdasarkan peranan, keahlian kumpulan atau atribut khusus, yang memerlukan penguatkuasaan yang konsisten dan cekap.
3. Perubahan dinamik dalam peranan (cth., promosi pentadbir, pengalihan keluar kumpulan atau akses sementara) mesti dikenali dan digunakan serta-merta merentas semua sesi aktif tanpa mengganggu perbualan yang sedang berjalan.
4. Mencapai tahap fleksibiliti ini sambil mengekalkan pengalaman pengguna yang lancar memerlukan model kebenaran lanjutan yang disepadukan rapat dengan protokol masa nyata seperti WebSockets.

Gambaran keseluruhan cara penyelesaian kebenaran Permit.io boleh menyelaraskan proses ini dengan WebSockets

Penyelesaian kebenaran Permit.io boleh menyelaraskan pelaksanaan kebenaran masa nyata dalam aplikasi sembang, terutamanya apabila disepadukan dengan WebSockets. Berikut ialah gambaran keseluruhan tentang cara gabungan ini meningkatkan kawalan akses dinamik:

1. Penyatuan Lancar: Permit.io menawarkan rangka kerja yang teguh untuk mengurus kawalan akses terperinci yang boleh disepadukan dengan mudah ke dalam aplikasi sembang menggunakan WebSockets. Penyepaduan ini membolehkan semakan dan kemas kini kebenaran masa nyata, memastikan pengguna mendapat akses segera ke bilik sembang dan fungsi yang sesuai berdasarkan peranan dan atribut mereka.
2. Pengurusan Kebenaran Dinamik: Dengan Permit.io, pembangun boleh melaksanakan model kebenaran dinamik yang menyesuaikan diri dengan perubahan dalam peranan pengguna atau keahlian kumpulan. Contohnya, jika pengguna dinaikkan pangkat kepada peranan pentadbir atau diberikan akses khas buat sementara waktu, perubahan ini boleh ditunjukkan serta-merta merentas semua sesi aktif tanpa mengganggu perbualan yang sedang berjalan. Keupayaan ini menangani salah satu cabaran utama dalam kebenaran dinamik dengan memastikan kebenaran dikuatkuasakan secara konsisten dalam masa nyata.
3. Prestasi Dipertingkat: Dengan memanfaatkan WebSockets untuk komunikasi, Permit.io memastikan bahawa proses kebenaran masa nyata tidak menjejaskan prestasi aplikasi. Seni bina menyokong volum tinggi mesej dan pengguna, membolehkan pengendalian permintaan akses serentak yang cekap sambil mengekalkan responsif—keperluan kritikal untuk aplikasi sembang.
4. Kawalan Akses Berasaskan Peranan dan Atribut: Permit.io memudahkan penguatkuasaan kedua-dua kawalan akses berasaskan peranan dan berasaskan atribut dalam persekitaran sembang. Fleksibiliti ini membolehkan pentadbir mentakrifkan kebenaran khusus untuk jenis pengguna yang berbeza, seperti penyederhana atau pengguna biasa, meningkatkan keselamatan sambil menyediakan pengalaman pengguna yang boleh disesuaikan. Pengguna boleh mengambil bahagian dalam pelbagai jenis sembang—awam, peribadi atau kumpulan berdasarkan peranan yang diberikan kepada mereka.
5. Pematuhan Peraturan: Melaksanakan penyelesaian Permit.io membantu organisasi memenuhi peraturan privasi data yang ketat dengan memastikan hanya pengguna yang dibenarkan boleh mengakses maklumat dan fungsi sensitif dalam aplikasi sembang. Pematuhan ini penting untuk melindungi data pengguna dan meminimumkan risiko undang-undang yang berkaitan dengan akses tanpa kebenaran.

Menyediakan Aplikasi Sembang Berasaskan WebSocket

Untuk aplikasi berasaskan soket web kami, kami akan menggunakan Next.js dan Ably, perkhidmatan yang membolehkan kami menyepadukan dan mengurus keupayaan masa nyata dengan mudah dalam apl kami yang dikuasakan oleh soket web.

Selain Ably dan Next Auth, kami boleh menggunakan sesuatu seperti Firebase untuk mengendalikan kedua-dua ciri pengesahan dan masa nyata. Terdapat keseluruhan tutorial tentang itu di blog Permit.io.

Tanpa berlengah lagi, mari teruskan!

Menyediakan Next.js

Jalankan arahan berikut dan ikut gesaan:

npx create-next-app@latest live-chat
Need to install the following packages:
create-next-app@15.1.0
Ok to proceed? (y) y

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 371 packages, and audited 372 packages in 1m

141 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created live-chat at /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat 

Navigasi ke folder projek yang baru dibuat dan pasang beberapa lagi pakej yang akan kami gunakan untuk membina apl kami:

npx create-next-app@latest live-chat
Need to install the following packages:
create-next-app@15.1.0
Ok to proceed? (y) y

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 371 packages, and audited 372 packages in 1m

141 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created live-chat at /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat 

Selain itu, pasangkan beberapa komponen UI dari UI Radix:

cd live-chat
npm install -D prettier prettier-plugin-tailwindcss  @tailwindcss/forms 

Buat fail baharu dalam akar direktori projek - .prettierrc dan masukkan yang berikut:

npm install @radix-ui/react-scroll-area

Dalam fail tailwind.config.ts, masukkan yang berikut:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

// ./tailwind.config.ts
import type { Config } from "tailwindcss";
import tailwindForms from "@tailwindcss/forms";
export default {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [tailwindForms],
} satisfies Config;

Sediakan gaya global

Dalam fail ./app/globals.css, masukkan yang berikut:

In the `./next.config.ts`, enter the following:

// ./next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
  /* config options here */
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "lh3.googleusercontent.com",
      },
      {
        protocol: "https",
        hostname: "www.tapback.co",
      },
    ],
  },
};
export default nextConfig;

Menyediakan Pengesahan

Kami akan menggunakan Auth.js, pustaka pengesahan yang asalnya dibina untuk Next.js.
Jalankan arahan berikut untuk memasang pakej:

/* ./app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  body {
    @apply bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-300;
  }
}
@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-500 hover:brightness-95 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-300 dark:brightness-105 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:focus:ring-offset-gray-900;
  }
  .btn:has(> .icon:first-child) {
    @apply pl-2;
  }
  .btn:has(> .icon:last-child) {
    @apply pr-2;
  }
  .icon {
    @apply h-5 w-5 text-current;
  }
  .form-input {
    @apply flex grow rounded-full border border-none bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-500 outline-none hover:brightness-95 focus:border-none focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-300 dark:brightness-105 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:focus:ring-offset-gray-900;
  }
  .site-section {
    @apply py-16 md:py-24;
  }
  .site-section > .wrapper {
    @apply mx-auto max-w-5xl px-4 sm:px-6 lg:px-8;
  }
  .noscroll {
    @apply overflow-auto;
    scrollbar-width: none;
  }
}

Kita perlu mencipta pembolehubah persekitaran AUTH_SECRET. Pustaka menggunakan nilai rawak ini untuk menyulitkan token dan cincang pengesahan e-mel. (Lihat Deployment untuk mengetahui lebih lanjut). Anda boleh menjana satu melalui larian CLI Auth.js rasmi:

npm install next-auth@beta

Seterusnya, buat fail dan objek konfigurasi Auth.js - ./auth.js:

npx auth secret

? Created /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat/.env.local with `AUTH_SECRET`.

Tambahkan Pengendali Laluan di bawah ./app/api/auth/[...nextauth]/route.ts:

// ./auth.ts
import NextAuth from "next-auth";
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [],
});

Tambah Middleware pilihan untuk memastikan sesi tetap hidup; ini akan mengemas kini sesi tamat setiap kali ia dipanggil - ./middleware.ts:

// ./app/api/auth/[...nextauth]/route.ts

import { handlers } from "@/auth"; // Referring to the auth.ts we just created
export const { GET, POST } = handlers;

Menyediakan Google OAuth

NextAuth menyokong berbilang penyedia OAuth untuk pengesahan. Untuk tutorial ini, kami akan menggunakan Google.

Untuk mendapatkan ID dan rahsia pelanggan Google kami, kami perlu menyediakan projek baharu dalam Google Cloud Console - https://console.cloud.google.com/projectcreate

Seterusnya, dalam projek yang baru dibuat, kami akan menyediakan skrin persetujuan baharu:

Setelah skrin persetujuan kami telah dibuat, kami boleh menyediakan bukti kelayakan. Navigasi ke Bukti kelayakan dari bar sisi.
Klik pada butang Cipta Bukti kelayakan dan pilih ID klien OAuth daripada menu lungsur.

Dalam skrin berikut, pilih Aplikasi Web, masukkan asal usul JavaScript Dibenarkan dan ubah hala URI: http://localhost:3000 dan http://localhost:3000/api/auth/callback/ google masing-masing.

Dengan itu kami harus mempunyai ID pelanggan dan rahsia kami:

Salin nilai dan masukkannya ke dalam fail .env:

npx create-next-app@latest live-chat
Need to install the following packages:
create-next-app@15.1.0
Ok to proceed? (y) y

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 371 packages, and audited 372 packages in 1m

141 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created live-chat at /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat 

Seterusnya, dayakan Google sebagai pilihan log masuk dalam konfigurasi Auth.js kami. Kami perlu mengimport penyedia Google daripada pakej dan menyerahkannya kepada tatasusunan penyedia yang kami tetapkan sebelum ini dalam fail konfigurasi Auth.js:

cd live-chat
npm install -D prettier prettier-plugin-tailwindcss  @tailwindcss/forms 

Buat komponen Tajuk Tapak

Mari kita buat pengepala untuk apl kami yang mengandungi butang log masuk dan log keluar. Cipta fail baharu - ./components/Site/Header.tsx:

npm install @radix-ui/react-scroll-area

Di sini, komponen SiteHeader berfungsi sebagai bar navigasi utama.

Jika sesi pengguna wujud (sesi?. pengguna), paparkan avatar, nama dan butang "Log keluar" pengguna.
Jika tidak, paparkan butang "Log masuk" dan memandangkan kami menggunakan tindakan pelayan Next.js, kami meletakkannya di dalam borang.

Fungsi log Masuk dan Log Keluar dibungkus dalam penanda tindakan pelayan ("gunakan pelayan") untuk pelaksanaan sebelah pelayan dalam Next.js.

Dalam fail ./app/layout.tsx kami import komponen SiteHeader:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Dalam halaman utama di ./app/page.tsx, masukkan yang berikut:

// ./tailwind.config.ts
import type { Config } from "tailwindcss";
import tailwindForms from "@tailwindcss/forms";
export default {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [tailwindForms],
} satisfies Config;

Dengan itu, kita sepatutnya mempunyai sesuatu seperti ini:

Sekarang kami telah menyediakan pengesahan, mari teruskan menambah keupayaan soket web pada apl kami dengan Ably.

Sediakan WebSockets dengan Ably

Untuk bermula, daftar ke Ably kemudian Buat apl baharu dengan pilihan berikut:

• Nama apl: Panggil apl anda sesuatu yang bermakna
• Pilih bahasa pilihan anda: JavaScript
• Apakah jenis apl yang anda bina? Sembang Langsung

Dalam skrin seterusnya, salin Kunci API anda:

Simpan dalam fail .env:

In the `./next.config.ts`, enter the following:

// ./next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
  /* config options here */
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "lh3.googleusercontent.com",
      },
      {
        protocol: "https",
        hostname: "www.tapback.co",
      },
    ],
  },
};
export default nextConfig;

Dalam apl kami, pasang Ably React SDK dan perpustakaan jose untuk JWT:

/* ./app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  body {
    @apply bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-300;
  }
}
@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-500 hover:brightness-95 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-300 dark:brightness-105 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:focus:ring-offset-gray-900;
  }
  .btn:has(> .icon:first-child) {
    @apply pl-2;
  }
  .btn:has(> .icon:last-child) {
    @apply pr-2;
  }
  .icon {
    @apply h-5 w-5 text-current;
  }
  .form-input {
    @apply flex grow rounded-full border border-none bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-500 outline-none hover:brightness-95 focus:border-none focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-300 dark:brightness-105 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:focus:ring-offset-gray-900;
  }
  .site-section {
    @apply py-16 md:py-24;
  }
  .site-section > .wrapper {
    @apply mx-auto max-w-5xl px-4 sm:px-6 lg:px-8;
  }
  .noscroll {
    @apply overflow-auto;
    scrollbar-width: none;
  }
}

Setelah jose dan ably dipasang, buat ./app/api/ably/route.ts:

npm install next-auth@beta

Mari kita pecahkan perkara yang berlaku di sini:

1. Penciptaan Token JWT: Fungsi createToken menjana Token Web JSON yang serasi dengan Ably, termasuk keupayaan pengguna dan pengecam pelanggan. Di sini, kami mengekodkan tuntutan dalam token, bermakna Tuntutan pengguna akan disertakan dalam sebarang acara yang diterbitkan oleh pelanggan ini dalam topik dengan nama yang sepadan *.
2. Keupayaan Dinamik: Fungsi generateCapability memberikan kebenaran kepada pengguna berdasarkan peranan mereka (moderator atau pengguna biasa) untuk saluran tertentu.
3. Pengesahan Pengguna: Fungsi pengesahan digunakan untuk mendapatkan semula sesi pengguna, memastikan hanya pengguna yang disahkan boleh meminta token.
4. Pembolehubah Persekitaran: Pembolehubah persekitaran ABLY_SECRET_KEY menyimpan rahsia API Ably dengan selamat untuk menandatangani token.
5. Respons API: Pengendali memproses permintaan, menjana token dan mengembalikannya sebagai respons JSON atau rentetan kosong jika pengguna tidak disahkan.

Seterusnya, ia membina semua komponen yang kita perlukan untuk halaman sembang itu. Kami akan bermula dengan komponen Item Mesej yang memaparkan satu mesej yang dihantar oleh pengguna.

Komponen Item Mesej

Buat fail baharu - ./components/Message/Item.tsx:

npx create-next-app@latest live-chat
Need to install the following packages:
create-next-app@15.1.0
Ok to proceed? (y) y

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 371 packages, and audited 372 packages in 1m

141 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created live-chat at /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat 

Komponen MessageItem ini melaraskan reka letaknya secara dinamik berdasarkan prop fromUser, menggunakan flex-row-reverse untuk penjajaran.
Ia memaparkan avatar penghantar yang diperoleh daripada message.data.avatarUrl. Teks mesej (message.data.text) dan cap masanya (message.timestamp) ditunjukkan, diformatkan sebagai rentetan masa setempat.
Untuk mesej yang dihantar oleh pengguna semasa, butang padam, yang dipaparkan dengan ikon SVG, dipaparkan secara bersyarat dan mencetuskan panggilan balik onDelete dengan message.id.

Komponen Senarai Mesej

Buat fail baharu - ./components/Message/List.tsx:

cd live-chat
npm install -D prettier prettier-plugin-tailwindcss  @tailwindcss/forms 

Komponen MessageList memaparkan senarai mesej yang boleh ditatal menggunakan gelung messages.map(), di mana setiap mesej dipaparkan melalui komponen MessageItem.
Ia mengenal pasti jika mesej dihantar oleh pengguna log masuk dengan membandingkan e-mel sesi (session.data.user.email) dengan clientId mesej, menggayakan mesej pengguna dengan hujung kendiri untuk penjajaran kanan.
Setiap MessageItem menerima mesejnya dan panggilan balik onDelete.

Komponen Input Mesej

Buat fail baharu - ./components/Message/Input.tsx:

npm install @radix-ui/react-scroll-area

Komponen MessageInput menguruskan input pengguna dengan useState dan menyerahkan mesej melalui onSubmit, menetapkan semula medan selepas penyerahan. Medan input () menunjukkan ruang letak kontekstual dan dilumpuhkan apabila prop yang dilumpuhkan adalah benar.

Komponen Senarai Saluran Sembang

Buat fail baharu - ./components/Chat/ChannelList.tsx:

npx create-next-app@latest live-chat
Need to install the following packages:
create-next-app@15.1.0
Ok to proceed? (y) y

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 371 packages, and audited 372 packages in 1m

141 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created live-chat at /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat 

Komponen ChatChannelList memaparkan senarai saluran sebagai pautan. Saluran aktif diserlahkan menggunakan kelas huruf tebal berdasarkan nama laluan semasa.

Komponen sembang

Buat fail baharu - ./components/Chat/index.tsx:

cd live-chat
npm install -D prettier prettier-plugin-tailwindcss  @tailwindcss/forms 

Dalam komponen ini, kami melakukan beberapa perkara:

1. Pengendalian Mesej: Komponen mendengar mesej (TAMBAH, PADAM, PROMOSI) melalui useChannel dan mengemas kini senarai mesej dengan sewajarnya.
2. Menerbitkan Mesej: Mesej diterbitkan menggunakan fungsi publishMessage, menghantar teks mesej dan avatar pengguna.
3. ScrollArea: Radix UI's ScrollArea digunakan untuk menatal lancar dalam kedua-dua arah menegak dan mendatar untuk sejarah mesej.
4. Pengambilan Sejarah Mesej: Pada lekapan, kami mengambil 100 mesej terakhir daripada sejarah saluran.

Seterusnya, kami akan mengumpulkan semuanya dalam halaman sembang.

Buat Halaman Sembang

Buat fail baharu - ./app/chat/[[...channel]]/page.tsx:

npm install @radix-ui/react-scroll-area

Komponen Halaman membungkus apl sembang dalam pembekal untuk pengurusan keadaan dan konteks. SessionProvider memastikan akses global kepada sesi pengguna, manakala AblyProvider dan ChannelProvider mendayakan integrasi lancar dengan Ably dengan berkongsi klien Masa Nyata (authUrl: "/api/ably") dan nama saluran semasa (cth., sembang:umum).

Reka letak menggunakan grid dengan tiga bahagian: bar sisi kiri ( untuk navigasi saluran), kawasan tengah ( untuk mesej) dan pemegang tempat di kanan bar sisi (TODO: Senarai pengguna) untuk ciri masa hadapan seperti pengguna dalam talian. Pilihan autoConnect memastikan Ably menyambung hanya dalam penyemak imbas, mengelakkan isu SSR.

Dengan itu, kita sepatutnya mempunyai sesuatu seperti ini, apabila kita menavigasi ke http://localhost:3000/chat/general:

Sekarang cha kami

Sediakan Permit.io

Buat akaun baharu di https://www.permit.io/:

Buat projek baharu

Masukkan nama projek anda, saya akan menggunakan Sembang Langsung untuk contoh ini:

Cipta sumber baharu

Untuk membuat saluran untuk apl sembang kami, Permit membenarkan kami mencipta sumber yang merupakan entiti yang mewakili perkara yang boleh diakses oleh pengguna, mari sediakan saluran kami sebagai sumber untuk meneruskan:

Edit sumber

Kini kami boleh mengedit sumber dan menambah peranan pada sumber saluran kami:

Lihat peranan

Berikut ialah peranan yang telah kami cipta. Anda boleh melihatnya dengan pergi ke tab Peranan pada halaman Dasar.

Dasar Udpate

Kini kami boleh mengemas kini dasar kami untuk menentukan siapa yang mempunyai akses kepada perkara pada setiap sumber:

Buat contoh sumber

Buat contoh sumber untuk setiap saluran yang kami mahukan dalam sembang kami, di sini kami mencipta contoh untuk saluran umum, kami boleh melakukan perkara yang sama untuk rawak dan mod.

Lihat Contoh

Di sini kita boleh melihat contoh sumber yang dibuat:

Sekarang kami telah menyediakan Papan Pemuka Permit kami, kami boleh menambahkan Permit pada apl Next.js kami.

Menambah Permit.io pada aplikasi Next.js anda

Mari menyelami dan mula menyepadukan Permit.io ke dalam aplikasi kami.

Pertama, kita perlu memasang pakej permitio:

npx create-next-app@latest live-chat
Need to install the following packages:
create-next-app@15.1.0
Ok to proceed? (y) y

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 371 packages, and audited 372 packages in 1m

141 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created live-chat at /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat 

Kami perlu mendapatkan kunci API kami daripada papan pemuka Permit.io kami:

Tambahkan kunci yang disalin pada fail .env:

cd live-chat
npm install -D prettier prettier-plugin-tailwindcss  @tailwindcss/forms 

Sediakan PDP tempatan

Seterusnya, kami perlu menyediakan Titik Keputusan Dasar kami yang merupakan nod rangkaian yang bertanggungjawab untuk menjawab pertanyaan kebenaran menggunakan dasar dan data kontekstual.

Tarik bekas PDP dari Docker Hub (Klik di sini untuk memasang Docker):

npm install @radix-ui/react-scroll-area

Jalankan bekas & gantikan pembolehubah persekitaran PDP_API_KEY dengan kunci API anda.

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Sekarang kami telah menyediakan PDP kami, mari kita selami untuk menambahkan autoriaztion pada apl kami, anda boleh mengetahui lebih lanjut tentang menambahkan Permit.io pada apl Next.js daripada tutorial langkah demi langkah ini pada Permit.io blog.

Untuk contoh ini, kita perlu menyediakan beberapa fungsi dan laluan boleh guna semula, mari mulakan dengan mencipta fungsi perpustakaan Permit dalam ./lib/permit.ts:

npx create-next-app@latest live-chat
Need to install the following packages:
create-next-app@15.1.0
Ok to proceed? (y) y

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 371 packages, and audited 372 packages in 1m

141 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created live-chat at /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat 

Kami juga akan membuat fail ./utils/permit.ts untuk semua fungsi utiliti berkaitan permit kami:

cd live-chat
npm install -D prettier prettier-plugin-tailwindcss  @tailwindcss/forms 

Cangkuk Pengguna

Kami perlu mencipta cangkuk useUser yang akan membolehkan kami mendapatkan semula pengguna permit di bahagian hadapan dengan mudah. Cipta fail baharu ./hooks/useUser.ts:

npm install @radix-ui/react-scroll-area

Cipta Pengguna dalam Permit Semasa Pengesahan

Untuk menambahkan pengguna secara automatik pada Permit semasa log masuk, gunakan panggilan balik log Masuk NextAuth. Semasa panggilan balik:

1. Ambil Contoh Sumber: Dapatkan semula tika sumber daripada Permit (cth., ruang kerja atau projek lalai).
2. Segerakkan Data Pengguna: Gunakan fungsi utiliti (seperti handleSyncUser) untuk mencipta atau mengemas kini maklumat pengguna dalam Permit. Ini termasuk ID, e-mel, nama, peranan mereka (mis., "peserta") dan contoh sumber yang berkaitan.
3. Log Masuk Lengkap: Proses log masuk akan diteruskan dengan mengembalikan benar.

Ganti fail ./auth.ts dengan kod yang dikemas kini ini:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Ini memastikan pengguna disahkan dan disepadukan dengan lancar ke dalam Permit untuk kawalan akses.

Seperti yang dapat kita lihat di bawah, apabila pengguna log masuk, akaun mereka sedang ditambahkan pada papan pemuka Permit kami:

Kami perlu menyediakan beberapa perkara lagi sebelum kami boleh meneruskan, mari mulakan dengan jenis untuk menenangkan TypeScript semasa kami membangunkan apl kami. Buat fail ./types/user.ts baharu dan masukkan yang berikut:

// ./tailwind.config.ts
import type { Config } from "tailwindcss";
import tailwindForms from "@tailwindcss/forms";
export default {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [tailwindForms],
} satisfies Config;

Seterusnya, kami akan membuat beberapa laluan API untuk mendapatkan data dan kebenaran pengguna serta mempromosi serta menurunkan pengguna.

Dapatkan Data Pengguna

Buat fail baharu - ./app/api/permit/getUsers/route.ts:

In the `./next.config.ts`, enter the following:

// ./next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
  /* config options here */
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "lh3.googleusercontent.com",
      },
      {
        protocol: "https",
        hostname: "www.tapback.co",
      },
    ],
  },
};
export default nextConfig;

Dapatkan Data Pengguna

Buat fail baharu *./app/api/permit/getUser/route.ts*:

/* ./app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  body {
    @apply bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-300;
  }
}
@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-500 hover:brightness-95 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-300 dark:brightness-105 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:focus:ring-offset-gray-900;
  }
  .btn:has(> .icon:first-child) {
    @apply pl-2;
  }
  .btn:has(> .icon:last-child) {
    @apply pr-2;
  }
  .icon {
    @apply h-5 w-5 text-current;
  }
  .form-input {
    @apply flex grow rounded-full border border-none bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-500 outline-none hover:brightness-95 focus:border-none focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-300 dark:brightness-105 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:focus:ring-offset-gray-900;
  }
  .site-section {
    @apply py-16 md:py-24;
  }
  .site-section > .wrapper {
    @apply mx-auto max-w-5xl px-4 sm:px-6 lg:px-8;
  }
  .noscroll {
    @apply overflow-auto;
    scrollbar-width: none;
  }
}

Promosikan Pengguna

Buat fail baharu - ./app/api/permit/promoteUser/route.ts dan masukkan yang berikut:

npm install next-auth@beta

Di sini kami mempunyai laluan API Next.js yang mempromosikan pengguna dengan memberikan mereka peranan khusus pada contoh sumber yang berbeza menggunakan Permit.io.
Fungsi promoteUser menyemak sama ada pengguna semasa mempunyai kebenaran untuk mempromosikan orang lain dan memberikan peranan seperti "peserta," "moderator" dan "admin" kepada pengguna sasaran pada saluran tertentu.
Fungsi GET mengendalikan permintaan masuk, mengekstrak parameter pertanyaan, mengesahkannya, mengambil contoh sumber dan melaksanakan proses promosi. Ia mengembalikan hasil sebagai respons JSON atau mesej ralat jika sebarang isu berlaku.

Turunkan pangkat Pengguna

Buat fail baharu - ./app/api/permit/demoteUser/route.ts dan masukkan yang berikut:

npx create-next-app@latest live-chat
Need to install the following packages:
create-next-app@15.1.0
Ok to proceed? (y) y

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 371 packages, and audited 372 packages in 1m

141 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created live-chat at /Users/miracleio/Documents/writing/permit/real-time-authorization-in-a-chat-application-with-permitio-and-websockets/live-chat 

Begitu juga, kami mempunyai laluan API Next.js yang menurunkan pengguna dengan menyahtugaskan peranan mereka pada contoh sumber tertentu menggunakan Permit.io. Fungsi demoteUser mengalih keluar peranan seperti "peserta", "moderator" dan "admin" daripada pengguna pada saluran tertentu. Fungsi GET mengendalikan permintaan masuk, mengekstrak parameter pertanyaan, mengesahkannya, mengambil contoh sumber, mendapatkan semula peranan yang ditetapkan pengguna dan melaksanakan proses penurunan pangkat.

Dapatkan Sumber

Buat fail baharu - ./app/api/permit/listResourceInstances/route.ts dan masukkan yang berikut:

cd live-chat
npm install -D prettier prettier-plugin-tailwindcss  @tailwindcss/forms 

Kemas kini laluan kebenaran Aly

Dalam fail kami ./app/api/ably/route.ts, gantikannya dengan kod dikemas kini berikut:

npm install @radix-ui/react-scroll-area

Di sini kami menggabungkan Permit.io untuk mengurus peranan dan kebenaran, menggantikan konfigurasi statik dengan kebenaran berasaskan peranan dinamik.
Fungsi generatePermissions menggunakan data daripada Permit.io untuk memetakan peranan kepada keupayaan saluran tertentu, memastikan kebenaran diselaraskan dengan peranan pengguna dalam masa nyata. Pendekatan ini meningkatkan fleksibiliti dan memastikan sistem menyesuaikan diri apabila peranan atau kebenaran berubah, menyepadukan dengan lancar dengan pengesahan berasaskan JWT Ably.

Kemas kini Senarai Saluran

Sekarang kami telah menambahkan sumber (saluran) pada papan pemuka permit kami, kami boleh mengambilnya dari sana dan bukannya mengekodkannya secara keras.
Dalam fail ./components/Chat/ChannelList.tsx, buat perubahan berikut:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Buat komponen Senarai Pengguna

Mari kita buat komponen senarai pengguna yang mengambil semua pengguna permit dan paparkan butang promosikan atau turunkan di sebelah nama pengguna.
Cipta fail baharu - ./components/Chat/UserList.tsx dan masukkan yang berikut:

// ./tailwind.config.ts
import type { Config } from "tailwindcss";
import tailwindForms from "@tailwindcss/forms";
export default {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [tailwindForms],
} satisfies Config;

Di sini, kami menggunakan pengguna cangkuk tersuai untuk mengambil maklumat pengguna semasa dan cangkuk useChannel daripada Ably untuk komunikasi saluran masa nyata. Fungsi getUserList mengambil senarai pengguna daripada pelayan menggunakan API Permit.io. Komponen melanggan saluran Ably untuk kemas kini masa nyata dan mengambil senarai pengguna yang dikemas kini apabila acara promosi/turun taraf berlaku. Senarai pengguna disimpan dalam keadaan komponen, tidak termasuk pengguna semasa.

Akhir sekali, kami boleh menambahkannya pada halaman kami, dalam ./app/chat/[[...channel]]/page.tsx :

In the `./next.config.ts`, enter the following:

// ./next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
  /* config options here */
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "lh3.googleusercontent.com",
      },
      {
        protocol: "https",
        hostname: "www.tapback.co",
      },
    ],
  },
};
export default nextConfig;

Dengan itu kita seharusnya dapat mempromosikan dan menurunkan pengguna dalam masa nyata:

Berikut ialah penurunan pangkat dalam tindakan:

Penutup dan Kesimpulan

Membina aplikasi sembang dengan kebenaran masa nyata ialah proses yang mencabar tetapi bermanfaat. Dengan menyepadukan alatan berkuasa seperti Permit.io dan WebSockets, anda boleh mencipta pengalaman yang lancar yang memastikan kawalan akses yang selamat dan terperinci. Dalam artikel ini, kami meneroka kepentingan kebenaran dinamik dalam aplikasi sembang, menyediakan seni bina berasaskan WebSocket dengan Ably dan Permit.io bersepadu untuk pengurusan kebenaran.

Aliran kerja ini menunjukkan cara alatan moden memudahkan apa yang pernah menjadi pelaksanaan yang kompleks, membolehkan pembangun menumpukan lebih pada pengalaman dan kebolehskalaan pengguna dan bukannya infrastruktur asas. Dengan pendekatan yang betul, anda boleh memastikan aplikasi sembang anda dinamik dan selamat.

Bacaan dan Sumber Lanjutan

• Kod GitHub - https://github.com/miracleonyenma/live-chat
• Dokumentasi Permit.io – Panduan komprehensif untuk keupayaan dan API Permit.io.
• Dokumentasi Ably WebSockets – Ketahui lebih lanjut tentang membina apl masa nyata dengan Ably.
• Dokumentasi Next.js – Teroka ciri lanjutan untuk membina aplikasi React dengan Next.js.
• Dokumentasi Auth.js – Sediakan pengesahan selamat dan berskala dalam apl Next.js anda.
• WebSockets untuk Aplikasi Web Masa Nyata – Gambaran keseluruhan yang mendalam tentang WebSockets dan kes penggunaannya.

Langkah Seterusnya

Dengan persediaan asas selesai, anda boleh meneroka ciri mudah dan lanjutan seperti:

• Membenarkan moderator memadamkan mesej peserta
• Menambahkan alatan penyederhanaan dikuasakan AI untuk mengesan dan mencegah kandungan kesat dalam sembang. Anda boleh mengetahui lebih lanjut tentang Membina Aplikasi AI dengan Permit
• Melaksanakan papan pemuka analitik untuk menjejaki aktiviti pengguna dan aliran mesej.

Atas ialah kandungan terperinci Keizinan Masa Nyata dalam Aplikasi Sembang dengan Permit.io dan WebSockets. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!