FastComments.com

Menu Icon

Jezik 🇷🇸 Srpski (Latinica)
🇺🇸 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

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

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

Overview

FastComments Collab Chat proširuje standardni FastComments komentarski widget, tako da nasleđuje sve opcije konfigurisanja iz osnovnog widgeta uz dodatak nekoliko opcija specifičnih za tekstualne anotacije.

Required Configuration

tenantId

Vaš FastComments Tenant ID je obavezan. Možete ga pronaći na vašoj FastComments kontrolnoj tabli.

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

Collab Chat Specific Options

urlId

Po defaultu, Collab Chat generiše jedinstveni identifikator za svaku konverzaciju zasnovan na URL-u stranice, DOM putanji do elementa i izabranom rasponu teksta. Možete ga prebrisati 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ših URL-ova može promeniti, ali želite sačuvati iste konverzacije, ili kada želite deliti anotacije preko više stranica.

topBarTarget

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

Primer konfiguracije
Copy Copy
1
2// Onemogući gornju traku
3FastCommentsCollabChat(element, {
4 tenantId: 'demo',
5 topBarTarget: null
6});
7
8// Prikaži gornju traku na prilagođenoj lokaciji
9FastCommentsCollabChat(element, {
10 tenantId: 'demo',
11 topBarTarget: document.getElementById('custom-header')
12});
13

hasDarkBackground

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

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

commentCountUpdated

Funkcija povratnog poziva koja se poziva kad god se promeni broj komentara. Ovo je korisno za ažuriranje UI elemenata kao što su bedževi ili naslovi 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

Inherited Configuration Options

Pošto Collab Chat proširuje standardni komentarski widget, možete koristiti bilo koju opciju konfigurisanja iz osnovnog FastComments widgeta. Evo nekoliko često korišćenih opcija:

locale

Podesite jezik za UI widgeta. FastComments podržava desetine jezika.

Primer konfiguracije
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 locale: 'es' // španski
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 and simpleSSO

Integracija sa vašim sistemom autentifikacije korišćenjem Single Sign-On.

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

Pogledajte SSO dokumentaciju za potpune detalje o opcijama autentifikacije.

maxReplyDepth

Kontrolišite koliko nivoa duboko mogu ići odgovori. Po defaultu, Collab Chat postavlja ovo na 0, što znači da su svi komentari pljosnati (nema ugnježdenih odgovora). Možete ovo promeniti ako želite threaded konverzacije.

Primer konfiguracije
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 maxReplyDepth: 3 // Dozvoli 3 nivoa ugnježđivanja
5});
6

Internal Configuration

Ove opcije se automatski postavljaju od strane Collab Chat-a i ne bi trebalo da ih prepisujete:

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.

Complete Example

Evo primera koji prikazuje više opcija konfigurisanja 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 // Vaša SSO konfiguracija
13 },
14 maxReplyDepth: 1
15});
16

Za potpuni spisak svih dostupnih opcija konfigurisanja nasledjenih iz osnovnog widgeta, 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

Dark Mode Support

Dynamic Dark Mode

If your site's dark mode is controlled by adding a .dark class to the body element, the Collab Chat korisnički interfejs će to automatski poštovati bez potrebe za reinicijalizacijom. Stilovi widgeta su dizajnirani da reaguju na prisustvo ove klase.

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

Custom Styling with CSS

Možete prilagoditi izgled isticanja teksta, prozora četa i drugih elemenata koristeći CSS. Widget dodaje specifične klase koje možete ciljati u vašem stylesheet-u.

Isticanje teksta koristi sistem stilova mehurića komentara FastComments, tako da bilo kakve prilagodbe koje ste primenili na standardni widget za komentare takođe će uticati na Collab Chat.

Top Bar Customization

Gornja traka prikazuje broj korisnika online i broj diskusija. Možete prilagoditi njenu poziciju pružanjem prilagođenog elementa kao topBarTarget:

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

Or disable it entirely by setting it to null:

Onemogući gornju traku
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: null
5});
6

Mobile Behavior

On screens under 768px wide, Collab Chat automatically switches to a mobile-optimized layout. Chat windows appear fullscreen instead of floating next to the text, and the selection delay is removed for more immediate interaction.

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

Chat Window Appearance

Chat windows are 410px wide on desktop with a 16px arrow pointing to the highlighted text. The windows position themselves automatically based on available viewport space, using positioning classes like to-right, to-left, to-top, and to-bottom.

Možete dodati prilagođeni CSS da podesite boje, fontove, razmake ili druge vizuelne osobine ovih prozora. Prozori četa koriste istu strukturu komponenti kao standardni FastComments widget, tako da nasleđuju sve globalne prilagodbe koje ste primenili.

Localization

Collab Chat podržava sve iste opcije lokalizacije kao standardni FastComments widget. Podesite opciju locale da prikažete tekst korisničkog interfejsa na različitim jezicima:

Podesite lokal
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 locale: 'es' // Španski
5});
6

FastComments podržava desetine jezika. Podešavanje locale utiče na sav tekst korisničkog interfejsa uključujući upite, dugmad i tekst u poljima za unos.

Inherited Customization Options

Pošto Collab Chat proširuje standardni widget za komentare, nasleđuje sve opcije prilagođavanja iz osnovnog widgeta. Ovo uključuje prilagođene CSS klase, prilagođene prevode, prilagođavanje avatara, formatiranje datuma i mnogo više.

Pogledajte glavnu FastComments dokumentaciju o prilagođavanju za kompletan spisak dostupnih opcija prilagođavanja.

Working with Custom Fonts

Ako vaš sajt koristi prilagođene fontove, Collab Chat korisnički interfejs će naslediti te fontove iz CSS-a vaše stranice. Možda ćete morati da kreirate pravilo za prilagođavanje widgeta i @import bilo koje fontove u prilagođenom CSS-u unutar tog pravila ako želite da plutajući prozor četa koristi iste fontove.

Sinhronizacija uživo Internal Link

Real-Time Updates

Collab Chat koristi WebSocket veze za sinhronizaciju svih razgovora u realnom vremenu između svih povezanih korisnika. Kada neko kreira novu anotaciju, doda komentar ili obriše diskusiju, svi ostali korisnici koji gledaju istu stranicu vide ažuriranje odmah bez osvežavanja.

How WebSocket Sync Works

Kada inicijalizujete Collab Chat, vidžet uspostavlja WebSocket vezu ka FastComments serverima. Ova veza ostaje otvorena tokom trajanja sesije korisnika 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 kreira 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.

Broadcast ID System

Da bi se sprečili efekti odjeka gde korisnici vide sopstvene akcije vraćene nazad njima, svako ažuriranje uključuje jedinstveni broadcastId. Kada korisnik kreira ili ažurira anotaciju, njihov klijent generiše UUID za tu operaciju. Kada WebSocket emituje ažuriranje nazad svim klijentima, originalni klijent ignoriše ažuriranje jer se poklapa sa njegovim broadcastId.

Ovo obezbeđuje glatku interakciju gde korisnici odmah vide svoje promene u UI bez čekanja na povratno slanje kroz server, a istovremeno svi ostali korisnici dobijaju ažuriranje.

Live User Count

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

Connection Resilience

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

Kada se veza ponovo uspostavi, vidžet se resinhronizuje kako bi se osiguralo da nijedno ažuriranje nije propušteno. Ovo se dešava transparentno bez potrebe za intervencijom korisnika.

Bandwidth Considerations

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 visokog intenziteta aktivnosti.

Vaši metrički podaci korišćenja u FastComments dashboard prate pubSubMessageCount i pubSubBandwidth kako biste mogli da nadgledate aktivnost real-time sinhronizacije na vašim sajtovima.

Cross-Tab Synchronization

Ako korisnik ima istu stranicu otvorenu u više kartica pregledača, ažuriranja u jednoj kartici se pojavljuju odmah u ostalim karticama. Ovo funkcioniše kroz isti WebSocket mehanizam sinhronizacije i ne zahteva dodatnu konfiguraciju.

Security

WebSocket poruke se prenose preko sigurnih veza (WSS) i uključuju validaciju tenant-a kako bi se osiguralo da korisnici primaju samo ažuriranja za razgovore za koje su ovlašćeni. Server validira sve operacije pre nego što ih emituje kako bi sprečio neovlašćen pristup ili manipulaciju.

API referenca Internal Link

Pregled API-ja

Collab Chat obezbeđuje tri REST API endpointa za programsko upravljanje tekstualnim razgovorima. Ovi endpointi vam omogućavaju da preuzimate, kreirate i brišete anotacije bez upotrebe browser widgeta.

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

Base URL

All Collab Chat API endpoints are under:

Osnovni 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 u FastComments u svom browseru da bi pristupili ovim endpointima.

Dobavite sve razgovore

Dobavite sve tekstualne razgovore za određenu stranicu.

Endpoint

GET Krajnja tačka
Copy Copy
1
2GET /comment-collab-chats/:tenantId?urlId=<urlId>
3

Parametri

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

urlId (parametar upita, obavezan) je identifikator stranice za koju želite dobaviti razgovore.

Odgovor

Odgovor sadrži status API-ja, informacije o trenutnoj korisničkoj sesiji ako je korisnik autentifikovan, niz razgovora sa njihovim ID-evima, URL-ovima i tekstualnim opsezima, očišćeni identifikator URL-a, indikator da li je trenutni korisnik administrator sajta ili moderator, i detalje WebSocket konekcije za sinhronizaciju uživo 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

Kreirajte novi tekstualni razgovor za određeni izbor teksta.

Endpoint

POST Krajnja tačka
Copy Copy
1
2POST /comment-collab-chats/:tenantId
3

Parametri

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

Telo zahteva mora biti u JSON formatu i sadržati sledeća obavezna polja.

urlId (string, obavezno) je osnovni identifikator stranice.

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

pageTitle (string, obavezno) je naslov stranice.

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

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

createdFromCommentId (string, obavezno) je ID komentara koji je inicirao ovaj chat.

broadcastId (string, obavezno) je UUID za sinhronizaciju uživo kako bi se sprečili efekti odjeka.

Odgovor

Odgovor sadrži 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

Obrišite postojeći tekstualni razgovor. Ovaj endpoint zahteva administratorske ili moderatorske dozvole, ili razgovor mora biti kreiran od strane autentifikovanog korisnika.

Endpoint

DELETE Krajnja tačka
Copy Copy
1
2DELETE /comment-collab-chats/:tenantId/:chatId
3

Parametri

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

chatId (parametar putanje, obavezan) je ID razgovora koji treba obrisati.

broadcastId (telo zahteva, obavezno) je UUID za sinhronizaciju uživo.

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 brzine

Ovi endpointi podložni su standardnom ograničenju stope zahteva FastComments API-ja. Middleware za ograničenje stope primenjuje se po tenant-u kako bi se sprečila zloupotreba, a istovremeno omogućili normalni obrasci korišćenja.

Odgovori sa greškama

Svi endpointi vraćaju standardne HTTP status kodove. Odgovor 400 označava nevažeće parametre zahteva. Odgovor 401 znači da je autentifikacija neuspešna. Odgovor 403 ukazuje na nedovoljne dozvole. Odgovor 404 znači da razgovor nije pronađen. Odgovor 429 ukazuje na prekoračenje ograničenja stope.

Odgovori sa greškom uključuju JSON telo sa detaljima:

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

Praćenje upotrebe

Kreiranje razgovora povećava vašu metriku korišćenja conversationCreateCount. Sva WebSocket sinhronizaciona aktivnost povećava pubSubMessageCount i pubSubBandwidth. Ove metrike možete pratiti na vašem FastComments kontrolnom panelu u odeljku za analitiku upotrebe.

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