FastComments.com

Menu Icon

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

Početak rada

Početak rada
Primeri
Dodavanje komentara uživo u onlajn knjige

Konfiguracija

Opcije konfiguracije
Ponašanje pri izboru teksta

Prilagođavanje

Prilagođavanje

Napredno

Sinhronizacija uživo
API referenca

Collab Chat

Dodajte inline žive komentare u dokumente, knjige, itd

FastComments Collab Chat omogućava korisnicima da istaknu i dodaju beleške na bilo koji tekstualni sadržaj na vašem veb-sajtu, kreirajući tematske diskusije povezane sa određenim izabranim delovima teksta. Korisnici mogu izabrati reči, rečenice ili cele pasuse da započnu kolaborativne razgovore direktno u vašem sadržaju.

Ova funkcija je idealna za uređivačke povratne informacije, kolaborativna okruženja za čitanje, obrazovne platforme, pregled dokumenata i svaku situaciju u kojoj želite kontekstualne diskusije vezane za određeni tekst.

Note that these docs are specific to the Collab Chat functionality. You can add commenting for content with lots of pages, like Knjige, with thread-per-page, without using collab chat. FastComments also does not charge per-page or per-thread. Collab Chat is specifically when you want to allow users to select text and comment on the highlighted section of text.

You can see primer ovde.

Početak rada Internal Link

Brzi početak

Početak rada sa Collab Chat je jednostavan. Potreban vam je FastComments Collab Chat skript, HTML element koji sadrži tekst koji želite da anotirate, i konfiguracioni objekat sa vašim Tenant ID.

Instalacija

Dodajte Collab Chat skript na svoju stranicu:

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

Osnovna implementacija

Evo minimalnog primera:

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 <!-- Vaš kontejner sadržaja -->
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 <!-- Učitavanje Collab Chat skripta -->
16 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
17
18 <!-- Inicijalizacija Collab Chata -->
19 <script>
20 FastCommentsCollabChat(document.getElementById('article-content'), {
21 tenantId: 'demo'
22 });
23 </script>
24</body>
25</html>
26

Zamenite 'demo' svojim stvarnim FastComments Tenant ID-jem ako već nije, koji možete pronaći u svom FastComments kontrolnoj tabli.

Kako funkcioniše

Kada je inicijalizovan, korisnici mogu selektovati bilo koji tekst unutar ciljanog elementa. Nakon kratkog kašnjenja (3.5 seconds on desktop), pojavljuje se prompt koji im omogućava da započnu diskusiju. Kada se diskusija kreira, pojavljuje se vizuelno isticanje na tekstu. Ostali korisnici mogu preći mišem preko ili kliknuti na isticanje da vide i učestvuju u diskusiji. Sve diskusije se sinhronizuju u realnom vremenu među svim posetiocima.

Uživo demo

Možete videti Collab Chat u akciji na našoj stranici demonstracije uživo.

Sledeći koraci

Sada kada imate osnovno funkcionisanje, možete prilagoditi izgled i ponašanje u vodiču za opcije konfiguracije. Pogledajte vodič o ponašanju pri selekciji teksta da biste razumeli kako izbor teksta funkcioniše. Saznajte o stilizaciji i podršci za tamni režim u vodiču za prilagođavanje. Za napredne integracije, istražite Referencu API-ja.

Frontend biblioteke

Sve FastComments frontend biblioteke (react, vue, angular, itd.) imaju Collab Chat.

Primeri Internal Link

Osnovni primer

Najjednostavniji način korišćenja Collab Chat-a je da ciljate jedan sadržajni kontejner. Ovaj primer pokazuje kako omogućiti tekstualne anotacije na članku:

Osnovni primer 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 <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 sa prilagođenim URL ID-jem (po stranici knjige, članku, itd.)

Po default-u, Collab Chat koristi URL stranice u kombinaciji sa putem elementa i opsegom teksta za identifikaciju razgovora. Možete navesti prilagođeni urlId da biste imali veću kontrolu nad načinom grupisanja razgovora:

Collab Chat sa prilagođenim 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

Ovo je korisno ako se struktura vaših URL-ova menja, ali želite da zadržite iste razgovore, ili ako želite deliti iste anotacije razgovora preko više stranica.

Primer sa tamnim režimom

Ako vaš sajt ima tamnu pozadinu, omogućite podršku za tamni režim kako bi UI četa izgledao ispravno:

Collab Chat sa tamnim režimom
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 sa onemogućenom gornjom trakom

Po default-u, Collab Chat prikazuje gornju traku sa brojem korisnika i brojem diskusija. Možete je onemogućiti:

Collab Chat bez gornje trake
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 sa povratnim pozivom broja komentara

Možete pratiti kada se komentari dodaju ili ažuriraju koristeći commentCountUpdated callback:

Collab Chat sa povratnim pozivom broja komentara
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 sa više sekcija

Možete inicijalizovati Collab Chat na više odvojenih sekcija vaše stranice. Svaka sekcija će imati svoje nezavisne anotacije:

Collab Chat na više sekcija
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 // Inicijalizuj na uvodnom odeljku
15 FastCommentsCollabChat(document.getElementById('intro-section'), {
16 tenantId: 'demo',
17 urlId: 'my-article-intro'
18 });
19
20 // Inicijalizuj na glavnom odeljku
21 FastCommentsCollabChat(document.getElementById('main-section'), {
22 tenantId: 'demo',
23 urlId: 'my-article-main'
24 });
25</script>
26

Dodavanje komentara uživo u onlajn knjige Internal Link

Možete inicijalizovati Collab Chat po stranici ako želite i imati odvojene niti po stranici, jednostavno prosledite parametru urlId vrednost kao book-one-page1. Ova konfiguracija takođe radi za standardni widget za komentare.

Opcije konfiguracije Internal Link

Pregled

FastComments Collab Chat proširuje standardni FastComments vidžet za komentare, tako da nasleđuje sve konfiguracione opcije osnovnog vidžeta, uz dodavanje nekoliko specifičnih za tekstualne anotacije.

Obavezna konfiguracija

tenantId

Vaš FastComments Tenant ID je obavezan. Možete ga pronaći na svom FastComments dashboard-u.

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

Opcije specifične za Collab Chat

urlId

Podrazumevano, Collab Chat generiše jedinstveni identifikator za svaku konverzaciju na osnovu URL-a stranice, DOM putanje do elementa i izabranog opsega teksta. Ovo možete zameniti prilagođenim urlId.

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

Ovo je korisno kada se struktura vašeg URL-a može promeniti, ali želite da zadržite iste konverzacije, ili kada želite da delite anotacije na više stranica.

topBarTarget

Kontroliše prikaz gornje trake koja prikazuje broj korisnika i broj diskusija. Postavite na null da biste potpuno onemogućili gornju traku, ili navedite DOM element da biste je prikazali na određenoj lokaciji.

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

Omogućite stil tamnog režima kada vaša stranica ima tamnu pozadinu. Ova detekcija je automatska, ali može biti poželjno da je zamenite.

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

commentCountUpdated

Callback funkcija koja se aktivira svaki put kada se broj komentara promeni. Ovo je korisno za ažuriranje UI elemenata poput bedževa ili naslova stranica.

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

Nasleđene konfiguracione opcije

Pošto Collab Chat proširuje standardni vidžet za komentare, možete koristiti bilo koju konfiguracionu opciju osnovnog FastComments vidžeta. Evo nekih često korišćenih opcija:

locale

Postavite jezik za UI vidžeta. FastComments podržava desetine jezika.

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

readonly

Učinite sve konverzacije samo za čitanje. Korisnici mogu pregledati postojeće anotacije, ali ne mogu kreirati nove niti odgovarati.

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

sso i simpleSSO

Integrišite se sa svojim sistemom autentifikacije korišćenjem Single Sign-On-a.

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

Pogledajte SSO dokumentaciju za potpune detalje o opcijama autentifikacije.

maxReplyDepth

Kontrolišite koliko nivoa dubine odgovori mogu ići. Podrazumevano, Collab Chat postavlja ovo na 0, što znači da su svi komentari ravni (bez ugnježdenih odgovora). Ovo možete promeniti ako želite razgovore u nitima.

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

Interna konfiguracija

Ove opcije postavlja automatski Collab Chat i ne bi trebalo da budu zamenjene:

productId se automatski postavlja na 3 za Collab Chat. floating-chat ekstenzija se automatski učitava kako bi obezbedila funkcionalnost prozora za ćaskanje. Vidžet automatski detektuje mobilne uređaje (ekrani širi manje od 768px) i prilagođava UI u skladu s tim.

Kompletan primer

Evo primera koji prikazuje više konfiguracionih opcija zajedno:

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 kompletnu listu svih dostupnih konfiguracionih opcija nasleđenih iz osnovnog vidžeta, pogledajte glavnu FastComments dokumentaciju o konfiguraciji.

Ponašanje pri izboru teksta Internal Link

Kako funkcioniše izbor teksta

Kada korisnici izaberu tekst unutar kontejnera Collab Chat, vidžet zabeleži taj izbor i omogućava im da započnu diskusiju. Izbor može biti mali kao jedna reč ili obilniji kao više pasusa koji obuhvataju različite elemente.

Odgoda pri izboru

Na desktop uređajima postoji odgoda od 3,5 sekunde između trenutka kada korisnik izabere tekst i pojave upita za diskusiju. Ovo sprečava treperenje UI-ja kada korisnici samo ističu tekst da bi ga kopirali ili pročitali. Na mobilnim uređajima upit se pojavljuje odmah jer je izbor teksta na touch ekranima obično namerniji.

Jedinstveni ID-evi konverzacija

Svaka konverzacija dobija jedinstveni urlId koji kombinuje URL stranice, DOM putanju elementa i serijalizovani opseg teksta. Ovo osigurava da svaki izbor teksta kreira posebnu konverzaciju koju kasnije možete ponovo pronaći.

Ako u svojoj konfiguraciji obezbedite prilagođeni urlId, on će biti kombinovan sa element path i text range da bi se kreirao finalni identifikator.

Vizuelna isticanja

Kada za određeni izbor teksta postoji diskusija, taj tekst dobija vizuelno isticanje. Isticanje je realizovano korišćenjem pozadinskih boja i pojavljuje se pri prelasku miša ili kada je povezani chat prozor otvoren.

Sistem isticanja radi tako što obavije izabrani tekst u poseban element koji se može stilizovati. Ovakav pristup obezbeđuje da isticanja ostanu precizna čak i kada je osnovna HTML struktura kompleksna.

Pozicioniranje chat prozora

Kada korisnik klikne na isticanje ili kreira novu anotaciju, chat prozor se pojavljuje u blizini izabranog teksta. Vidžet automatski izračunava najbolju poziciju za ovaj prozor na osnovu raspoloživog prostora u viewportu.

Sistem pozicioniranja koristi CSS klase kao što su to-right, to-left, to-top i to-bottom da označi u kom pravcu bi chat prozor trebalo da se proširi od isticanja. Na mobilnim uređajima (ekrani manje od 768px širine), chat prozor se uvek prikazuje preko celog ekrana radi bolje upotrebljivosti.

Dimenzije chat prozora

Chat prozori su široki 410px na desktopu sa razmakom od 20px i vizuelnom strelicom od 16px koja pokazuje ka istaknutom tekstu. Ove dimenzije su fiksne kako bi se obezbedilo dosledno ponašanje, ali izgled možete prilagoditi pomoću CSS-a.

Selekcija preko više elemenata

Korisnici mogu izabrati tekst koji obuhvata više HTML elemenata, na primer isticanje od sredine jednog pasusa do početka drugog. Sistem serijalizacije opsega pravilno obrađuje ovakve situacije i istaknuće sav izabrani tekst čak i preko granica elemenata.

Kompatibilnost sa pregledačima

Sistem za izbor teksta koristi standardni window.getSelection() API koji je podržan u svim modernim pregledačima. Za starije verzije Internet Explorera koristi se fallback na document.selection radi kompatibilnosti.

Očuvanje selekcije

Kada se za izbor teksta kreira konverzacija, ta anotacija ostaje čak i ako se stranica ponovo učita. Serijalizovani opseg i DOM putanja omogućavaju vidžetu da obnovi isticanja na tačno istom mestu kada se korisnici vrate na stranicu.

Ovo funkcioniše pouzdano sve dok sadržaj vaše stranice ostane stabilan. Ako promenite tekstualni sadržaj ili restrukturirate svoj HTML, postojeće anotacije možda više neće biti pravilno poravnate sa tekstom. Iz tog razloga, najbolje je izbegavati velike promene sadržaja na stranicama sa aktivnim anotacijama, ili razmotriti migraciju anotacija kada su promene sadržaja neophodne.

Prilagođavanje Internal Link

Podrška za tamni režim

Dinamički tamni režim

Ako se tamni režim vašeg sajta kontroliše dodavanjem .dark klase na body element, Collab Chat UI će to automatski poštovati bez potrebe za ponovnom inicijalizacijom. Stilovi vidžeta dizajnirani su da reaguju na prisustvo ove klase.

Primer CSS-a za tamni režim
Copy Copy
1
2/* Your dark mode CSS */
3body.dark {
4 background: #1a1a1a;
5 color: #ffffff;
6}
7

Prilagođeni stilovi pomoću CSS-a

Možete prilagoditi izgled isticanja teksta, prozora za ćaskanje i drugih elemenata pomoću CSS-a. Vidžet dodaje specifične klase koje možete ciljati u svom stilskom listu.

Isticanje teksta koristi sistem stilizovanja komentara FastComments, tako da će sve prilagodbe koje ste primenili na standardni vidžet za komentare uticati i na Collab Chat.

Prilagođavanje gornje trake

Gornja traka prikazuje broj korisnika na mreži i broj diskusija. Možete prilagoditi njenu poziciju tako što ćete obezbediti prilagođeni element kao topBarTarget:

Prilagođena lokacija gornje trake
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: document.getElementById('my-custom-header')
5});
6

Ili je potpuno onemogućite postavljanjem na null:

Onemogućavanje gornje trake
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: null
5});
6

Ponašanje na mobilnim uređajima

Na ekranima širine manje od 768px, Collab Chat automatski prelazi na mobilni optimizovani raspored. Prozori za ćaskanje se pojavljuju preko celog ekrana umesto da lebde pored teksta, a kašnjenje pri selekciji se uklanja radi brže interakcije.

Ovo ponašanje je ugrađeno i ne zahteva nikakvu konfiguraciju. Vidžet automatski detektuje veličinu ekrana i prilagođava se u skladu s tim.

Izgled prozora za ćaskanje

Prozori za ćaskanje su široki 410px na desktopu sa strelicom od 16px koja pokazuje na istaknuti tekst. Prozori se automatski pozicioniraju na osnovu dostupnog prostora u vidnom polju, koristeći klase pozicioniranja poput to-right, to-left, to-top i to-bottom.

Možete dodati prilagođeni CSS da biste prilagodili boje, fontove, razmake ili druge vizuelne osobine ovih prozora. Prozori za ćaskanje koriste istu strukturu komponenti kao standardni FastComments vidžet, tako da nasleđuju sve globalne prilagodbe koje ste primenili.

Lokalizacija

Collab Chat podržava sve iste opcije lokalizacije kao standardni FastComments vidžet. Postavite opciju locale da biste prikazali tekst UI na različitim jezicima:

Podešavanje lokalizacije
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 locale: 'es' // Spanish
5});
6

FastComments podržava desetine jezika. Podešavanje lokalizacije utiče na sav tekst UI, uključujući upite, dugmad i tekst rezervisanog mesta.

Nasleđene opcije prilagođavanja

Pošto Collab Chat proširuje standardni vidžet za komentare, nasleđuje sve opcije prilagođavanja osnovnog vidžeta. To uključuje prilagođene CSS klase, prilagođene prevode, prilagođavanje avatara, formatiranje datuma i mnogo više.

Pogledajte glavnu FastComments dokumentaciju za prilagođavanje za kompletnu listu dostupnih opcija prilagođavanja.

Rad sa prilagođenim fontovima

Ako vaš sajt koristi prilagođene fontove, Collab Chat UI će naslediti te fontove iz CSS-a vaše stranice. Možda ćete morati da kreirate pravilo prilagođavanja vidžeta i da @import-ujete fontove u prilagođeni CSS u tom pravilu ako želite da lebdeći prozor za ćaskanje koristi iste fontove.

Sinhronizacija uživo Internal Link

Ažuriranja u realnom vremenu

Collab Chat koristi WebSocket veze da sinhronizuje sve razgovore u realnom vremenu među svim povezanim korisnicima. Kada neko napravi novu anotaciju, doda komentar ili obriše diskusiju, svi ostali korisnici koji gledaju istu stranicu odmah vide ažuriranje bez osvežavanja.

Kako funkcioniše WebSocket sinhronizacija

Kada inicijalizujete Collab Chat, vidžet uspostavlja WebSocket vezu sa FastComments serverima. Ova veza ostaje otvorena tokom trajanja korisničke sesije i sluša ažuriranja vezana za trenutnu stranicu.

WebSocket sistem koristi tri tipa broadcast poruka za Collab Chat. Događaj new-text-chat se aktivira kada neko napravi novu anotaciju na stranici. Događaj updated-text-chat se aktivira kada neko ažurira postojeći razgovor. Događaj deleted-text-chat se aktivira kada neko obriše anotaciju.

Sistem broadcast ID-jeva

Da bi se sprečili efekti odjeka gde korisnici vide sopstvene akcije koje im se vraćaju, svako ažuriranje sadrži jedinstveni broadcastId. Kada korisnik kreira ili ažurira anotaciju, njegov klijent generiše UUID za tu operaciju. Kada WebSocket emituje ažuriranje svim klijentima, klijent koji je pokrenuo operaciju ignoriše ažuriranje jer se poklapa sa sopstvenim broadcastId.

Ovo obezbeđuje glatku interakciju gde korisnici odmah vide svoje promene u UI-ju bez čekanja na povratni put kroz server, a istovremeno se obezbeđuje da svi ostali korisnici dobiju ažuriranje.

Broj korisnika uživo

Gornja traka prikazuje broj korisnika koji trenutno gledaju stranicu. Ovaj broj se ažurira u realnom vremenu kako korisnici dolaze i odlaze. Broj korisnika se dostavlja kroz istu WebSocket vezu i automatski se povećava/smanjuje na osnovu događaja povezivanja i prekida veze.

Otpornost veze

Ako se WebSocket veza prekine zbog problema sa mrežom ili održavanja servera, vidžet automatski pokušava da se ponovo poveže. Tokom perioda ponovnog povezivanja, korisnici i dalje mogu da komuniciraju sa postojećim anotacijama, ali neće videti ažuriranja u realnom vremenu od drugih korisnika dok se veza ne uspostavi ponovo.

Kada se veza ponovo uspostavi, vidžet se resinhronizuje da bi se obezbedilo da nijedno ažuriranje nije promašeno. Ovo se dešava transparentno, bez potrebe za intervencijom korisnika.

Razmatranja o propusnom opsegu

WebSocket poruke su lagane i sadrže samo osnovne informacije potrebne za sinhronizaciju stanja. Kreiranje nove anotacije obično koristi manje od 1KB propusnog opsega. Sistem takođe uključuje inteligentno grupisanje kako bi smanjio učestalost poruka tokom perioda visoke aktivnosti.

Vaše metrike korišćenja u FastComments kontrolnoj tabli prate pubSubMessageCount i pubSubBandwidth tako da možete pratiti aktivnost sinhronizacije u realnom vremenu na svojim sajtovima.

Sinhronizacija između tabova

Ako korisnik ima istu stranicu otvorenu u više tabova pregledača, ažuriranja u jednom tabu se odmah pojavljuju u ostalim tabovima. Ovo funkcioniše kroz isti mehanizam WebSocket sinhronizacije i ne zahteva nikakvu dodatnu konfiguraciju.

Bezbednost

WebSocket poruke se prenose preko sigurnih veza (WSS) i uključuju validaciju tenanta kako bi se obezbedilo da korisnici primaju samo ažuriranja za razgovore koje imaju ovlašćenje da vide. Server validira sve operacije pre emitovanja kako bi sprečio neovlašćen pristup ili manipulaciju.

API referenca Internal Link

Pregled API-ja

Collab Chat pruža tri REST API endpointa za programsko upravljanje tekstualnim razgovorima. Ovi endpointi vam omogućavaju da preuzimate, kreirate i brišete anotacije bez korišćenja browser vidžeta.

Ovo su javni endpointi koji autentifikuju korisnike putem browser kolačića. Ne koriste API ključeve. Korisnici moraju biti prijavljeni na FastComments u svom browseru da bi pristupili ovim endpointima.

Bazni URL

Svi Collab Chat API endpointi se nalaze pod:

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

Autentifikacija

Ovi endpointi autentifikuju korisnike putem browser kolačića. Ne koriste API ključeve. Korisnici moraju biti prijavljeni na FastComments u svom browseru da bi pristupili ovim endpointima.

Preuzimanje svih razgovora

Preuzima sve tekstualne razgovore za određenu stranicu.

Endpoint

GET Endpoint
Copy Copy
1
2GET /comment-collab-chats/:tenantId?urlId=<urlId>
3

Parametri

tenantId (path parametar, obavezan) je vaš FastComments Tenant ID.

urlId (query parametar, obavezan) je identifikator stranice za koju želite da preuzmete razgovore.

Odgovor

Odgovor uključuje status API-ja, informacije o sesiji trenutnog korisnika ako je autentifikovan, niz razgovora sa njihovim ID-jevima, URL-ovima i tekstualnim opsezima, očišćeni URL identifikator, oznaku da li je trenutni korisnik site admin ili moderator, i detalje WebSocket konekcije za sinhronizaciju u realnom vremenu uključujući tenantIdWS, urlIdWS i userIdWS.

Primer zahteva

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

Primer odgovora

Primer GET 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

Kreiranje razgovora

Kreira novi tekstualni razgovor za određenu selekciju teksta.

Endpoint

POST Endpoint
Copy Copy
1
2POST /comment-collab-chats/:tenantId
3

Parametri

tenantId (path parametar, obavezan) je vaš FastComments Tenant ID.

Telo zahteva mora biti JSON i mora uključivati sledeća obavezna polja.

urlId (string, obavezan) je bazni identifikator stranice.

urlIdWithRange (string, obavezan) je URL kombinovan sa tekstualnim opsegom, na primer my-page:p:0:15,0:45{abc123}.

pageTitle (string, obavezan) je naslov stranice.

selector (string, obavezan) je DOM putanja do elementa koji sadrži selektovani tekst.

range (string, obavezan) je serijalizovani tekstualni opseg u formatu startOffset:endOffset,startOffset:endOffset{checksum}.

createdFromCommentId (string, obavezan) je ID komentara koji je inicirao ovaj razgovor.

broadcastId (string, obavezan) je UUID za sinhronizaciju u realnom vremenu radi sprečavanja eho efekata.

Odgovor

Odgovor uključuje status API-ja i ID novokreiranog razgovora.

Primer zahteva

Primer POST zahteva
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

Primer odgovora

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

Brisanje razgovora

Briše postojeći tekstualni razgovor. Ovaj endpoint zahteva admin ili moderator dozvole, ili razgovor mora biti kreiran od strane autentifikovanog korisnika.

Endpoint

DELETE Endpoint
Copy Copy
1
2DELETE /comment-collab-chats/:tenantId/:chatId
3

Parametri

tenantId (path parametar, obavezan) je vaš FastComments Tenant ID.

chatId (path parametar, obavezan) je ID razgovora koji se briše.

broadcastId (telo zahteva, obavezan) je UUID za sinhronizaciju u realnom vremenu.

Primer zahteva

Primer DELETE zahteva
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

Primer odgovora

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

Ograničenje učestalosti zahteva

Ovi endpointi podležu standardnom ograničenju učestalosti zahteva FastComments API-ja. Middleware za ograničenje učestalosti primenjuje se po tenantu radi sprečavanja zloupotrebe, uz dozvoljavanje normalnih obrazaca korišćenja.

Odgovori o greškama

Svi endpointi vraćaju standardne HTTP statusne kodove. Odgovor 400 označava nevažeće parametre zahteva. Odgovor 401 znači da autentifikacija nije uspela. Odgovor 403 označava nedovoljne dozvole. Odgovor 404 znači da razgovor nije pronađen. Odgovor 429 označava prekoračenje ograničenja učestalosti.

Odgovori o greškama uključuju JSON telo sa detaljima:

Primer odgovora o grešci
Copy Copy
1
2{
3 "status": "error",
4 "message": "Conversation not found"
5}
6

Praćenje korišćenja

Kreiranje razgovora povećava vašu metriku korišćenja conversationCreateCount. Sva WebSocket aktivnost sinhronizacije povećava pubSubMessageCount i pubSubBandwidth. Ove metrike možete pratiti na svom FastComments dashboardu u okviru analitike korišćenja.

Imate pitanja?

To je sve za FastComments Collab Chat! Ako imate bilo kakvih pitanja, treba vam pomoć pri implementaciji, ili imate predloge za funkcionalnosti, javite nam se ispod ili kontaktirajte naš tim za podršku.

Za primere uživo, pogledajte Govscent.org koji koristi Collab Chat u produkciji.

Doprinesite ovom vodiču