FastComments.com

Menu Icon

Jezik 🇸🇮 Slovenščina
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇫🇷 Français (France) 🇩🇪 Deutsch 🇬🇷 Ελληνικά 🇮🇱 עברית 🇮🇳 हिन्दी 🇮🇹 Italiano 🇯🇵 日本語 🇰🇷 한국어 🇵🇱 Polski 🇧🇷 Português (Brasil) 🇷🇺 Русский 🇷🇸 Srpski (Latinica) 🇷🇸 Српски 🇸🇮 Slovenščina 🇪🇸 Español 🇺🇦 Українська 🇹🇷 Türkçe

Začetek

Začetek
Primeri
Dodajanje komentarjev v živo v spletne knjige

Konfiguracija

Možnosti konfiguracije
Obnašanje pri izbiri besedila

Prilagoditev

Prilagoditev

Napredno

Sinhronizacija v živo
Referenca API

Sodelovalni klepet

Dodajte vgrajene žive komentarje v dokumente, knjige itd.

FastComments Collab Chat omogoča uporabnikom, da označijo in opremijo z opombami poljubno besedilno vsebino na vaši spletni strani ter ustvarijo nitne razprave, vezane na izbrane odseke besedila. Uporabniki lahko izberejo besede, stavke ali cele odstavke, da neposredno v vaši vsebini začnejo sodelovalne pogovore.

Ta funkcija je idealna za uredniške povratne informacije, okolja za skupinsko branje, izobraževalne platforme, pregledovanje dokumentov in vse situacije, kjer želite kontekstualne razprave, pripete na določen del besedila.

Upoštevajte, da so ti dokumenti specifični za funkcionalnost Collab Chat. Komentarje lahko dodate tudi za vsebine z mnogimi stranmi, kot so knjige, z eno nitjo na stran, brez uporabe collab chata. FastComments prav tako ne zaračunava na stran ali na nit. Collab Chat je torej namenjen primerom, ko želite uporabnikom omogočiti izbiro besedila in komentiranje označenega odseka besedila.

Primer si lahko ogledate tukaj.

Začetek Internal Link

Hitri začetek

Začetek uporabe Collab Chat je preprost. Potrebujete skripto FastComments Collab Chat, element HTML, ki vsebuje besedilo, ki ga želite označiti, in konfiguracijski objekt z vašim Tenant ID.

Namestitev

Dodajte skripto Collab Chat na svojo stran:

Nalaganje skripte Collab Chat
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
3

Osnovna implementacija

Tukaj je minimalen primer:

Osnovna implementacija Collab Chat
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>My Article with Collab Chat</title>
6</head>
7<body>
8 <!-- Your content container -->
9 <div id="article-content" style="min-height: 500px;">
10 <h1>My Article Title</h1>
11 <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
12 <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
13 </div>
14
15 <!-- Load the Collab Chat script -->
16 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
17
18 <!-- Initialize Collab Chat -->
19 <script>
20 FastCommentsCollabChat(document.getElementById('article-content'), {
21 tenantId: 'demo'
22 });
23 </script>
24</body>
25</html>
26

Zamenjajte 'demo' z vašim dejanskim FastComments Tenant ID, če tega še niste storili, ki ga najdete v svoji nadzorni plošči FastComments.

Kako deluje

Ko je enkrat inicializiran, lahko uporabniki izberejo katero koli besedilo znotraj ciljnega elementa. Po kratkem zamiku (3,5 sekunde na namizju) se prikaže poziv, ki jim omogoča začetek razprave. Ko je razprava ustvarjena, se na besedilu prikaže vizualna oznaka. Drugi uporabniki lahko z miško zapeljejo čez oznako ali kliknejo nanjo, da si ogledajo razpravo in se ji pridružijo. Vse razprave se v realnem času sinhronizirajo med vsemi obiskovalci.

Živi demo

Collab Chat v akciji si lahko ogledate na naši strani z živim demom.

Naslednji koraki

Zdaj, ko imate osnove v delovanju, lahko prilagodite videz in vedenje v vodiču Configuration Options. Oglejte si vodič Text Selection Behavior, da razumete, kako deluje izbira besedila. Naučite se o oblikovanju in podpori za temni način v vodiču Customization. Za naprednejše integracije raziščite API Reference.

Frontend knjižnice

Vse FastComments frontend knjižnice (react, vue, angular itd.) imajo Collab Chat.

Primeri Internal Link

Osnovni primer

Najenostavnejši način uporabe Collab Chata je ciljanje enega vsebinskega kontejnerja. Ta primer prikazuje, kako omogočiti besedilne anotacije na članku:

Osnovni primer Collab Chata
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>My Article with Collab Chat</title>
6</head>
7<body>
8 <div id="article-content" style="min-height: 500px">
9 <h1>My Article Title</h1>
10 <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
11 <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
12 </div>
13
14 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
15 <script>
16 FastCommentsCollabChat(document.getElementById('article-content'), {
17 tenantId: 'demo'
18 });
19 </script>
20</body>
21</html>
22

Primer s prilagojenim URL ID-jem (za stran knjige, članek itd.)

Privzeto Collab Chat uporablja URL strani v kombinaciji s potjo elementa in razponom besedila za identifikacijo pogovorov. Lahko določite svoj urlId, da boste imeli več nadzora nad tem, kako so pogovori združeni:

Collab Chat s prilagojenim URL ID-jem
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
3<script>
4 FastCommentsCollabChat(document.getElementById('article-content'), {
5 tenantId: 'demo',
6 urlId: 'book-one-page-2'
7 });
8</script>
9

To je uporabno, če se struktura vaših URL-jev spremeni, vendar želite ohraniti enake pogovore, ali če želite deliti enake anotacije pogovorov med več stranmi.

Primer s temnim načinom

Če ima vaše spletno mesto temno ozadje, omogočite podporo temnega načina, da zagotovite pravilen videz uporabniškega vmesnika klepeta:

Collab Chat s temnim načinom
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>My Article with Collab Chat - Dark Mode</title>
6 <style>
7 body {
8 background-color: #1a1a1a !important;
9 color: #e0e0e0 !important;
10 font-family: system-ui, -apple-system, sans-serif;
11 padding: 20px;
12 margin: 0;
13 }
14 #article-content {
15 max-width: 800px;
16 margin: 0 auto;
17 background-color: #2d2d2d;
18 padding: 20px;
19 border-radius: 8px;
20 }
21 h1 {
22 color: #ffffff !important;
23 }
24 p {
25 color: #e0e0e0 !important;
26 line-height: 1.6;
27 }
28 .fastcomments-collab-chat-top-bar {
29 background-color: #2d2d2d !important;
30 color: #e0e0e0 !important;
31 border-bottom: 1px solid #444 !important;
32 }
33 </style>
34</head>
35<body>
36 <div id="article-content" style="min-height: 500px">
37 <h1>My Article Title</h1>
38 <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
39 <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
40 </div>
41
42 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
43 <script>
44 FastCommentsCollabChat(document.getElementById('article-content'), {
45 tenantId: 'demo',
46 hasDarkBackground: true
47 });
48 </script>
49</body>
50</html>
51

Primer z onemogočeno zgornjo vrstico

Privzeto Collab Chat prikaže zgornjo vrstico s številom uporabnikov in številom razprav. To lahko onemogočite:

Collab Chat brez zgornje vrstice
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>My Article with Collab Chat - No Top Bar</title>
6</head>
7<body>
8 <div id="article-content" style="min-height: 500px">
9 <h1>My Article Title</h1>
10 <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
11 <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
12 </div>
13
14 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
15 <script>
16 FastCommentsCollabChat(document.getElementById('article-content'), {
17 tenantId: 'demo',
18 topBarTarget: null
19 });
20 </script>
21</body>
22</html>
23

Primer s povratnim klicem za štetje komentarjev

S pomočjo povratnega klica commentCountUpdated lahko spremljate, kdaj so komentarji dodani ali posodobljeni:

Collab Chat s povratnim klicem za štetje komentarjev
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
3<script>
4 FastCommentsCollabChat(document.getElementById('article-content'), {
5 tenantId: 'demo',
6 commentCountUpdated: function(count) {
7 console.log('Total comments:', count);
8 document.getElementById('comment-badge').textContent = count;
9 }
10 });
11</script>
12

Primer z več odseki

Collab Chat lahko inicializirate na več ločenih odsekih vaše strani. Vsak odsek bo imel svoje neodvisne anotacije:

Collab Chat na več odsekih
Copy Copy
1
2<div id="intro-section">
3 <h2>Introduction</h2>
4 <p>Content for the introduction...</p>
5</div>
6
7<div id="main-section">
8 <h2>Main Content</h2>
9 <p>Content for the main article...</p>
10</div>
11
12<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
13<script>
14 // Inicializiraj na uvodnem odseku
15 FastCommentsCollabChat(document.getElementById('intro-section'), {
16 tenantId: 'demo',
17 urlId: 'my-article-intro'
18 });
19
20 // Inicializiraj na glavnem odseku
21 FastCommentsCollabChat(document.getElementById('main-section'), {
22 tenantId: 'demo',
23 urlId: 'my-article-main'
24 });
25</script>
26

Dodajanje komentarjev v živo v spletne knjige Internal Link

Lahko inicializirate Collab Chat za vsako stran posebej, če želite, in imate ločene niti za vsako stran; preprosto posredujte parameter urlId z vrednostjo, kot je book-one-page1. Ta konfiguracija deluje tudi z običajnim pripomočkom za komentarje.

Možnosti konfiguracije Internal Link

Pregled

FastComments Collab Chat razširja standardni widget za komentarje FastComments, zato podeduje vse konfiguracijske možnosti osnovnega widgeta in hkrati doda nekaj možnosti, specifičnih za besedilne pripombe.

Zahtevana konfiguracija

tenantId

Vaš FastComments Tenant ID je obvezen. Najdete ga v svoji nadzorni plošči FastComments.

Primer konfiguracije
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo'
4});
5

Možnosti, specifične za Collab Chat

urlId

Privzeto Collab Chat generira edinstven identifikator za vsak pogovor na podlagi URL-ja strani, DOM-poti do elementa in izbranega besedilnega obsega. To lahko preglasite s svojim urlId.

Primer konfiguracije
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 urlId: 'my-custom-page-id'
5});
6

To je uporabno, kadar se struktura vaših URL-jev lahko spremeni, a želite ohraniti iste pogovore, ali kadar želite pripombe deliti med več stranmi.

topBarTarget

Nadzoruje prikaz zgornje vrstice, ki prikazuje število uporabnikov in število razprav. Nastavite na null, da zgornjo vrstico popolnoma onemogočite, ali pa podajte DOM element, da jo prikažete na določenem mestu.

Primer konfiguracije
Copy Copy
1
2// Disable top bar
3FastCommentsCollabChat(element, {
4 tenantId: 'demo',
5 topBarTarget: null
6});
7
8// Render top bar in custom location
9FastCommentsCollabChat(element, {
10 tenantId: 'demo',
11 topBarTarget: document.getElementById('custom-header')
12});
13

hasDarkBackground

Omogočite temni način oblikovanja, kadar ima vaša stran temno ozadje. To zaznavanje je samodejno, vendar ga je včasih smiselno pregglasiti.

Primer konfiguracije
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 hasDarkBackground: true
5});
6

commentCountUpdated

Povratna funkcija, ki se sproži vsakič, ko se spremeni število komentarjev. To je uporabno za posodabljanje elementov vmesnika, kot so značke ali naslovi strani.

Primer konfiguracije
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 commentCountUpdated: function(count) {
5 console.log('Total comments:', count);
6 document.getElementById('badge').textContent = count;
7 }
8});
9

Podedovane konfiguracijske možnosti

Ker Collab Chat razširja standardni widget za komentarje, lahko uporabite katero koli konfiguracijsko možnost osnovnega widgeta FastComments. Tukaj je nekaj pogosto uporabljenih možnosti:

locale

Nastavite jezik za uporabniški vmesnik widgeta. FastComments podpira ducatne jezike.

Primer konfiguracije
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 locale: 'es' // Spanish
5});
6

readonly

Naredite vse pogovore samo za branje. Uporabniki si lahko ogledajo obstoječe pripombe, ne morejo pa ustvarjati novih ali odgovarjati.

Primer konfiguracije
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 readonly: true
5});
6

sso in simpleSSO

Integrirajte se s svojim sistemom avtentikacije z uporabo Single Sign-On.

Primer konfiguracije
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 sso: {
5 // SSO configuration
6 }
7});
8

Za podrobnosti o možnostih avtentikacije si oglejte dokumentacijo SSO.

maxReplyDepth

Nadzorujte, na koliko ravneh globoko lahko gredo odgovori. Privzeto Collab Chat nastavi to vrednost na 0, kar pomeni, da so vsi komentarji ravni (brez ugnezdenih odgovorov). To lahko spremenite, če želite razvejane pogovore.

Primer konfiguracije
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 maxReplyDepth: 3 // Allow 3 levels of nesting
5});
6

Notranja konfiguracija

Te možnosti nastavi samodejno Collab Chat in jih ne bi smeli pregglasiti:

productId je samodejno nastavljen na 3 za Collab Chat. Razširitev floating-chat se samodejno naloži za zagotavljanje funkcionalnosti okna klepeta. Widget samodejno zazna mobilne naprave (zaslone širše manj kot 768px) in ustrezno prilagodi uporabniški vmesnik.

Popoln primer

Tukaj je primer, ki prikazuje več konfiguracijskih možnosti skupaj:

Primer konfiguracije
Copy Copy
1
2FastCommentsCollabChat(document.getElementById('article'), {
3 tenantId: 'demo',
4 urlId: 'my-article-v2',
5 hasDarkBackground: false,
6 locale: 'en',
7 topBarTarget: document.getElementById('custom-header'),
8 commentCountUpdated: function(count) {
9 document.title = count > 0 ? `(${count}) My Article` : 'My Article';
10 },
11 sso: {
12 // Your SSO config
13 },
14 maxReplyDepth: 1
15});
16

Za popoln seznam vseh razpoložljivih konfiguracijskih možnosti, podedovanih iz osnovnega widgeta, si oglejte glavno dokumentacijo konfiguracije FastComments.

Obnašanje pri izbiri besedila Internal Link

Kako deluje izbira besedila

Ko uporabniki izberejo besedilo znotraj kontejnerja Collab Chat, pripomoček zajame to izbiro in jim omogoči začetek razprave. Izbira je lahko tako majhna kot ena beseda ali pa obsega več odstavkov, ki segajo čez različne elemente.

Zamik pri izbiri

Na namiznih napravah je 3,5-sekundni zamik med trenutkom, ko uporabnik izbere besedilo, in trenutkom, ko se prikaže poziv za razpravo. To prepreči utripanje uporabniškega vmesnika, ko uporabniki besedilo le označujejo za kopiranje ali branje. Na mobilnih napravah se poziv prikaže takoj, saj je izbira besedila na zaslonih na dotik bolj premišljena.

Enolični ID-ji pogovorov

Vsak pogovor dobi enoličen urlId, ki združuje URL strani, pot DOM elementa in serializirano območje besedila. To zagotavlja, da vsaka izbira besedila ustvari ločen pogovor, ki ga je mogoče kasneje znova najti.

Če v svoji konfiguraciji navedete po meri urlId, bo ta združen s potjo elementa in območjem besedila za ustvarjanje končnega identifikatorja.

Vizualni poudarki

Ko za določeno izbiro besedila obstaja razprava, to besedilo dobi vizualni poudarek. Poudarek je izveden z ozadinskimi barvami in se prikaže ob premiku miške ali ko je ustrezno okno klepeta odprto.

Sistem poudarjanja deluje tako, da izbrano besedilo zavije v poseben element, ki ga je mogoče stilizirati. Ta pristop zagotavlja, da poudarki ostanejo natančni tudi, ko je osnovna HTML struktura zapletena.

Pozicioniranje okna klepeta

Ko uporabnik klikne na poudarek ali ustvari novo označbo, se ob izbranem besedilu prikaže okno klepeta. Pripomoček samodejno izračuna najboljši položaj za to okno glede na razpoložljiv prostor v pogledu.

Sistem pozicioniranja uporablja CSS razrede, kot so to-right, to-left, to-top in to-bottom, da označi, v katero smer se mora okno klepeta razširiti glede na poudarek. Na mobilnih napravah (zasloni širši manj kot 768px) se okno klepeta vedno prikaže celozaslonsko za boljšo uporabnost.

Dimenzije okna klepeta

Okna klepeta so na namizju široka 410px z razmikom 20px in 16px vizualno puščico, usmerjeno k poudarjenemu besedilu. Te dimenzije so fiksne, da se zagotovi dosledno vedenje, vendar lahko videz prilagodite s CSS.

Izbire, ki segajo čez več elementov

Uporabniki lahko izberejo besedilo, ki sega čez več HTML elementov, na primer označevanje od sredine enega odstavka do začetka drugega. Sistem serializacije obsega to pravilno obravnava in bo poudaril vse izbrano besedilo, tudi čez meje elementov.

Združljivost brskalnikov

Sistem izbire besedila uporablja standardni API window.getSelection(), ki ga podpirajo vsi sodobni brskalniki. Za starejše različice Internet Explorerja se za združljivost uporablja document.selection.

Vzdrževanje označb

Ko je za izbiro besedila ustvarjen pogovor, ta označba ostane tudi po ponovnem nalaganju strani. Serializirano območje in pot DOM omogočata pripomočku, da ob povratku uporabnikov na stran znova obnovi poudarke na točno istem mestu.

To deluje zanesljivo, dokler vsebina vaše strani ostane stabilna. Če spremenite besedilno vsebino ali prestrukturirate svoj HTML, obstoječe označbe morda ne bodo več pravilno poravnane z besedilom. Zato je najbolje, da se izognete večjim spremembam vsebine na straneh z aktivnimi označbami ali pa razmislite o migraciji označb, kadar so spremembe vsebine nujne.

Prilagoditev Internal Link

Podpora temnemu načinu

Dinamičen temni način

Če je temni način vaše strani nadzorovan z dodajanjem razreda .dark elementu body, bo uporabniški vmesnik Collab Chata to samodejno upošteval brez ponovne inicializacije. Slogi vtičnika so zasnovani tako, da reagirajo na prisotnost tega razreda.

Primer CSS za temni način
Copy Copy
1
2/* Vaš CSS za temni način */
3body.dark {
4 background: #1a1a1a;
5 color: #ffffff;
6}
7

Prilagajanje videza s CSS

Videz poudarkov, klepetalnih oken in drugih elementov lahko prilagodite s CSS. Vtičnik doda posebne razrede, na katere lahko ciljate v svojem slogovnem listu.

Poudarki besedila uporabljajo sistem slogov mehurčkov komentarjev FastComments, zato bodo vse prilagoditve, ki ste jih uporabili za standardni komentarni vtičnik, vplivale tudi na Collab Chat.

Prilagoditev zgornje vrstice

Zgornja vrstica prikazuje število uporabnikov na spletu in število razprav. Njeno pozicijo lahko prilagodite tako, da podate lastni element kot topBarTarget:

Prilagojena lokacija zgornje vrstice
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: document.getElementById('my-custom-header')
5});
6

Ali ga popolnoma onemogočite tako, da ga nastavite na null:

Onemogoči zgornjo vrstico
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: null
5});
6

Obnašanje na mobilnih napravah

Na zaslonih širših manj kot 768px se Collab Chat samodejno preklopi v mobilno optimizirano postavitev. Okna klepeta se prikažejo na celotnem zaslonu namesto lebdeče ob besedilu, in zamik pri izbiri je odstranjen za bolj takojšnje interakcije.

To vedenje je vgrajeno in ne zahteva nikakršne konfiguracije. Vtičnik samodejno zazna velikost zaslona in se temu primerno prilagodi.

Videz okna klepeta

Okna klepeta so na namizju široka 410px z 16px puščico, ki kaže na izpostavljeno besedilo. Okna se samodejno postavijo glede na razpoložljiv prostor v oknu brskalnika, z uporabo pozicionirnih razredov, kot so to-right, to-left, to-top in to-bottom.

Lahko dodate lasten CSS za prilagoditev barv, pisav, razmikov ali drugih vizualnih lastnosti teh oken. Okna klepeta uporabljajo isto strukturo komponent kot standardni vtičnik FastComments, zato podedujejo vse globalne prilagoditve, ki ste jih uporabili.

Lokalizacija

Collab Chat podpira enake možnosti lokalizacije kot standardni vtičnik FastComments. Nastavite možnost locale, da se besedilo UI prikaže v različnih jezikih:

Nastavitev lokalizacije
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 locale: 'es' // španščina
5});
6

FastComments podpira na desetine jezikov. Nastavitev lokalizacije vpliva na vse besedilo uporabniškega vmesnika, vključno z navodili, gumbi in besedilom nadomestka.

Podedovane možnosti prilagoditve

Ker Collab Chat razširja standardni komentarni vtičnik, podeduje vse možnosti prilagoditve iz osnovnega vtičnika. To vključuje prilagojene CSS razrede, prilagojene prevode, prilagoditve avatarjev, oblikovanje datumov in še veliko več.

Oglejte si glavno dokumentacijo o prilagoditvah FastComments za celoten seznam razpoložljivih možnosti prilagoditve.

Delo z lastnimi pisavami

Če vaša stran uporablja lastne pisave, jih uporabniški vmesnik Collab Chata podeduje iz CSS vaše strani. Morda boste morali ustvariti pravilo za prilagoditev vtičnika in @import vse pisave v prilagojenem CSS znotraj tega pravila, če želite, da lebdeče okno klepeta uporablja enake pisave.

Sinhronizacija v živo Internal Link

Posodobitve v realnem času

Collab Chat uporablja WebSocket povezave za sinhronizacijo vseh pogovorov v realnem času med vsemi povezanimi uporabniki. Ko nekdo ustvari novo anotacijo, doda komentar ali izbriše razpravo, vsi drugi uporabniki, ki si ogledujejo isto stran, vidijo posodobitev takoj brez osvežitve.

Kako deluje sinhronizacija WebSocket

Ko inicializirate Collab Chat, pripomoček vzpostavi WebSocket povezavo s strežniki FastComments. Ta povezava ostane odprta za čas trajanja uporabnikove seje in posluša posodobitve, povezane s trenutno stranjo.

Sistem WebSocket uporablja tri vrste broadcast sporočil za Collab Chat. Dogodek new-text-chat se sproži, ko nekdo ustvari novo anotacijo na strani. Dogodek updated-text-chat se sproži, ko nekdo posodobi obstoječi pogovor. Dogodek deleted-text-chat se sproži, ko nekdo izbriše anotacijo.

Sistem Broadcast ID

Da preprečimo učinke odmeva, pri katerih uporabniki vidijo svoje lastne ukrepe, ki so jim ponovno oddani, vsaka posodobitev vključuje edinstveni broadcastId. Ko uporabnik ustvari ali posodobi anotacijo, njegov odjemalec ustvari UUID za to operacijo. Ko WebSocket odda posodobitev nazaj vsem odjemalcem, izvorni odjemalec zanemari posodobitev, ker se ujema z njegovim broadcastId.

To zagotavlja tekočo interakcijo, kjer uporabniki takoj vidijo svoje spremembe v uporabniškem vmesniku brez čakanja na krožno pot prek strežnika, hkrati pa se zagotovi, da vsi ostali uporabniki prejmejo posodobitev.

Število uporabnikov v živo

V zgornji vrstici je prikazano število uporabnikov, ki si trenutno ogledujejo stran. To število se posodablja v realnem času, ko se uporabniki pridružujejo in odhajajo. Število uporabnikov je zagotovljeno prek iste WebSocket povezave in se samodejno poveča/ zmanjša glede na dogodke vzpostavitve in prekinitev povezave.

Odpornost povezave

Če WebSocket povezava pade zaradi težav v omrežju ali vzdrževanja strežnika, pripomoček samodejno poskusi znova vzpostaviti povezavo. Med obdobjem ponovnega vzpostavljanja lahko uporabniki še vedno sodelujejo z obstoječimi anotacijami, vendar ne bodo videli posodobitev v realnem času od drugih uporabnikov, dokler povezava ne bo ponovno vzpostavljena.

Ko je povezava znova vzpostavljena, se pripomoček ponovno sinhronizira, da zagotovi, da nobena posodobitev ni bila spregledana. To se zgodi samodejno, brez potrebe po posegu uporabnika.

Premisleki glede pasovne širine

WebSocket sporočila so lahka in vsebujejo le bistvene informacije, potrebne za sinhronizacijo stanja. Ustvarjanje nove anotacije običajno porabi manj kot 1KB pasovne širine. Sistem vključuje tudi inteligentno združevanje sporočil, da zmanjša frekvenco sporočil med obdobji velike aktivnosti.

Vaše meritve uporabe na nadzorni plošči FastComments spremljajo pubSubMessageCount in pubSubBandwidth, tako da lahko spremljate dejavnost sinhronizacije v realnem času na vaših spletnih mestih.

Sinhronizacija med zavihki

Če ima uporabnik isto stran odprto v več zavihkih brskalnika, se posodobitve v enem zavihku takoj prikažejo v drugih zavihkih. To deluje prek istega mehanizma WebSocket sinhronizacije in ne zahteva dodatne konfiguracije.

Varnost

WebSocket sporočila se prenašajo prek varnih povezav (WSS) in vključujejo preverjanje najemnika, da se zagotovi, da uporabniki prejemajo posodobitve le za pogovore, za katere so pooblaščeni. Strežnik preveri vse operacije, preden jih odda, da prepreči nepooblaščen dostop ali manipulacijo.

Referenca API Internal Link

Pregled API-ja

Collab Chat zagotavlja tri REST API končne točke za programsko upravljanje besedilnih pogovorov. Te končne točke vam omogočajo pridobivanje, ustvarjanje in brisanje opomb brez uporabe vtičnika v brskalniku.

Gre za javne končne točke, ki avtenticirajo uporabnike prek piškotkov brskalnika. Ne uporabljajo API ključev. Uporabniki morajo biti v svojem brskalniku prijavljeni v FastComments, da lahko dostopajo do teh končnih točk.

Osnovni URL

Vse API končne točke Collab Chat so pod:

Osnovni URL
Copy Copy
1
2https://fastcomments.com/comment-collab-chats
3

Avtentikacija

Te končne točke avtenticirajo uporabnike prek piškotkov brskalnika. Ne uporabljajo API ključev. Uporabniki morajo biti v svojem brskalniku prijavljeni v FastComments, da lahko dostopajo do teh končnih točk.

Pridobi vse pogovore

Pridobi vse besedilne pogovore za določeno stran.

Končna točka

GET končna točka
Copy Copy
1
2GET /comment-collab-chats/:tenantId?urlId=<urlId>
3

Parametri

tenantId (parameter poti, obvezno) je vaš FastComments Tenant ID.

urlId (parameter poizvedbe, obvezno) je identifikator strani, za katero želite pridobiti pogovore.

Odgovor

Odgovor vključuje stanje API-ja, informacije o trenutni uporabniški seji, če je avtenticiran, polje pogovorov z njihovimi ID-ji, URL-ji in besedilnimi razponi, očiščen identifikator URL, zastavico, ki označuje, ali je trenutni uporabnik skrbnik strani ali moderator, in podrobnosti o WebSocket povezavi za sinhronizacijo v živo, vključno z tenantIdWS, urlIdWS in userIdWS.

GET - primer zahteve

GET - primer zahteve
Copy Copy
1
2curl "https://fastcomments.com/comment-collab-chats/demo?urlId=my-article-page" \
3 --cookie "your-session-cookie"
4

GET - primer odgovora

GET - primer odgovora
Copy Copy
1
2{
3 "status": "success",
4 "user": {
5 "id": "user123",
6 "username": "john_doe"
7 },
8 "conversations": [
9 {
10 "_id": "conv123",
11 "urlId": "my-article-page:p:0:15,0:45{abc123}",
12 "range": "0:15,0:45{abc123}"
13 },
14 {
15 "_id": "conv456",
16 "urlId": "my-article-page:h1:5:20,5:35{def456}",
17 "range": "5:20,5:35{def456}"
18 }
19 ],
20 "urlIdClean": "my-article-page",
21 "isSiteAdmin": false,
22 "tenantIdWS": "demo",
23 "urlIdWS": "my-article-page",
24 "userIdWS": "user123"
25}
26

Ustvari pogovor

Ustvari nov besedilni pogovor za izbrano besedilo.

Končna točka

POST končna točka
Copy Copy
1
2POST /comment-collab-chats/:tenantId
3

Parametri

tenantId (parameter poti, obvezno) je vaš FastComments Tenant ID.

Telo zahteve mora biti v formatu JSON in mora vsebovati naslednja obvezna polja.

urlId (string, obvezno) je osnovni identifikator strani.

urlIdWithRange (string, obvezno) je URL v kombinaciji z besedilnim razponom, na primer my-page:p:0:15,0:45{abc123}.

pageTitle (string, obvezno) je naslov strani.

selector (string, obvezno) je DOM pot do elementa, ki vsebuje izbrano besedilo.

range (string, obvezno) je serializiran besedilni razpon v formatu startOffset:endOffset,startOffset:endOffset{checksum}.

createdFromCommentId (string, obvezno) je ID komentarja, ki je sprožil ta chat.

broadcastId (string, obvezno) je UUID za sinhronizacijo v živo in preprečevanje odmevnih učinkov.

Odgovor

Odgovor vključuje stanje API-ja in ID novo ustvarjenega pogovora.

POST - primer zahteve

POST - primer zahteve
Copy Copy
1
2curl -X POST "https://fastcomments.com/comment-collab-chats/demo" \
3 --cookie "your-session-cookie" \
4 -H "Content-Type: application/json" \
5 -d '{
6 "urlId": "my-article-page",
7 "urlIdWithRange": "my-article-page:p:0:15,0:45{abc123}",
8 "pageTitle": "My Article Title",
9 "selector": "div#article > p:nth-child(2)",
10 "range": "0:15,0:45{abc123}",
11 "createdFromCommentId": "comment789",
12 "broadcastId": "550e8400-e29b-41d4-a716-446655440000"
13 }'
14

POST - primer odgovora

POST - primer odgovora
Copy Copy
1
2{
3 "status": "success",
4 "createdChatId": "conv789"
5}
6

Izbriši pogovor

Izbriši obstoječ besedilni pogovor. Ta končna točka zahteva skrbniške ali moderatorske pravice, ali pa mora biti pogovor ustvaril overjeni uporabnik.

Končna točka

DELETE končna točka
Copy Copy
1
2DELETE /comment-collab-chats/:tenantId/:chatId
3

Parametri

tenantId (parameter poti, obvezno) je vaš FastComments Tenant ID.

chatId (parameter poti, obvezno) je ID pogovora, ki ga želite izbrisati.

broadcastId (telo zahteve, obvezno) je UUID za sinhronizacijo v živo.

DELETE - primer zahteve

DELETE - primer zahteve
Copy Copy
1
2curl -X DELETE "https://fastcomments.com/comment-collab-chats/demo/conv789" \
3 --cookie "your-session-cookie" \
4 -H "Content-Type: application/json" \
5 -d '{
6 "broadcastId": "550e8400-e29b-41d4-a716-446655440001"
7 }'
8

DELETE - primer odgovora

DELETE - primer odgovora
Copy Copy
1
2{
3 "status": "success"
4}
5

Omejevanje števila zahtev

Te končne točke so predmet standardnega omejevanja števila zahtev API-ja FastComments. Vmesnik za omejevanje zahtev deluje na ravni najemnika, da prepreči zlorabe ob hkratnem dovoljevanju običajnih vzorcev uporabe.

Odzivi z napakami

Vse končne točke vračajo standardne HTTP statusne kode. Odziv 400 označuje neveljavne parametre zahteve. Odziv 401 pomeni, da avtentikacija ni uspela. Odziv 403 označuje neustrezna dovoljenja. Odziv 404 pomeni, da pogovor ni bil najden. Odziv 429 pomeni preseženo omejitev zahtev.

Odzivi z napako vključujejo JSON telo s podrobnostmi:

Primer odgovora z napako
Copy Copy
1
2{
3 "status": "error",
4 "message": "Conversation not found"
5}
6

Sledenje uporabe

Ustvarjanje pogovorov poveča vašo metriko uporabe conversationCreateCount. Vsa dejavnost sinhronizacije prek WebSocket poveča pubSubMessageCount in pubSubBandwidth. Te metrike lahko spremljate v nadzorni plošči FastComments pod analitiko uporabe.

Imate vprašanja?

To je vse za FastComments Collab Chat! Če imate kakršnakoli vprašanja, potrebujete pomoč pri implementaciji ali imate predloge za funkcije, nam to sporočite spodaj ali se obrnite na našo podporno ekipo.

Za žive primere si oglejte Govscent.org, ki uporablja Collab Chat v produkciji.

Prispevajte k temu vodniku