FastComments.com

Menu Icon

Jezik 🇸🇮 Slovenščina
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇺🇸 English (US) 🇨🇦 Français (Canada) 🇫🇷 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

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

Hiter začetek

Začetek s Collab Chat je preprost. Potrebujete skripto FastComments Collab Chat, HTML element, 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 <!-- Kotejner z vašo vsebino -->
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 <!-- Naložite skripto Collab Chat -->
16 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
17
18 <!-- Inicializirajte Collab Chat -->
19 <script>
20 FastCommentsCollabChat(document.getElementById('article-content'), {
21 tenantId: 'demo'
22 });
23 </script>
24</body>
25</html>
26

Replace 'demo' with your actual FastComments Tenant ID if it's not already, which you can find in your nadzorni plošči FastComments.

Kako deluje

Ko je inicializirano, lahko uporabniki izberejo katerokoli besedilo znotraj ciljnega elementa. Po kratki zamudi (3,5 sekunde na namizju) se prikaže poziv, ki jim omogoči začetek razprave. Ko je razprava ustvarjena, se na besedilu prikaže vizualna označba. Drugi uporabniki se lahko z miško premaknejo nad ali kliknejo označbo, da si ogledajo in sodelujejo v razpravi. Vse razprave se sinhronizirajo v realnem času med vsemi obiskovalci.

Predstavitev v živo

Collab Chat si lahko ogledate v akciji na naši predstavitveni strani v živo.

Naslednji koraki

Sedaj, ko imate osnovno delujoče, lahko prilagodite videz in vedenje v vodiču o možnostih konfiguracije. Oglejte si vodič o vedenju izbire besedila, da razumete, kako deluje izbira besedila. Več o stiliranju in podpori temnega načina preberite v vodiču za prilagajanje. Za napredne integracije raziščite referenco API-ja.

Front-end knjižnice

Vse FastComments front-end knjižnice (react, vue, angular itd.) vključujejo 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 pripomoček za komentarje FastComments, zato deduje vse možnosti konfiguracije iz osnovnega gradnika in dodaja nekaj, specifičnih za besedilne oznake.

Zahtevana konfiguracija

tenantId

Za uporabo potrebujete vaš FastComments Tenant ID. Najdete ga v vaši FastComments nadzorni plošči.

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

Možnosti, specifične za Collab Chat

urlId

Privzeto Collab Chat ustvari edinstven identifikator za vsako pogovor glede na URL strani, DOM pot do elementa in izbrani obseg besedila. To lahko prevedete z lastnim urlId.

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

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

topBarTarget

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

Primer konfiguracije
Copy Copy
1
2// Onemogoči zgornjo vrstico
3FastCommentsCollabChat(element, {
4 tenantId: 'demo',
5 topBarTarget: null
6});
7
8// Prikaži zgornjo vrstico na prilagojenem mestu
9FastCommentsCollabChat(element, {
10 tenantId: 'demo',
11 topBarTarget: document.getElementById('custom-header')
12});
13

hasDarkBackground

Omogočite temno oblikovanje, ko ima vaša stran temno ozadje. To zaznavanje je samodejno, vendar ga včasih želite preseči.

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

commentCountUpdated

Funkcija povratnega klica, ki se sproži vsakič, ko se število komentarjev spremeni. To je uporabno za posodabljanje elementov uporabniškega 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 možnosti konfiguracije

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

locale

Nastavite jezik za uporabniški vmesnik gradnika. FastComments podpira desetine jezikov.

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

readonly

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

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

sso and simpleSSO

Integrirajte z vašim sistemom za overjanje z uporabo Single Sign-On.

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

Oglejte si dokumentacijo za SSO za popolne podrobnosti o možnostih overjanja.

maxReplyDepth

Nadzoruje, kako globoko se lahko odgovori gnezdo. Privzeto Collab Chat nastavi to na 0, kar pomeni, da so vsi komentarji ploski (brez gnezdenih odgovorov). To lahko spremenite, če želite navite pogovore.

Primer konfiguracije
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 maxReplyDepth: 3 // Dovoli 3 nivoje gnezdenja
5});
6

Notranja konfiguracija

Te možnosti nastavi Collab Chat samodejno in jih ne smete preglasiti:

The productId is automatically set to 3 for Collab Chat. The floating-chat extension is automatically loaded to provide the chat window functionality. The widget automatically detects mobile devices (screens under 768px wide) and adjusts the UI accordingly.

Celoten 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 // Vaša konfiguracija SSO
13 },
14 maxReplyDepth: 1
15});
16

Za popoln seznam vseh razpoložljivih možnosti konfiguracije, podedovanih iz osnovnega gradnika, glejte glavno FastComments dokumentacijo o konfiguraciji.

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