FastComments.com

Menu Icon

Jezik 🇭🇷 Hrvatski
🇺🇸 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
Primjeri
Dodavanje komentiranja u stvarnom vremenu u online knjige

Konfiguracija

Opcije konfiguracije
Ponašanje odabira teksta

Prilagodba

Prilagodba

Napredno

Sinkronizacija uživo
Referenca API-ja

Dodajte inline komentare uživo u dokumente, knjige itd.

FastComments Collab Chat omogućuje korisnicima da označavaju i bilješke na bilo koji tekstualni sadržaj na vašoj web-stranici, stvarajući uvlaknute razgovore vezane uz određene odabire teksta. Korisnici mogu odabrati riječi, rečenice ili cijele odlomke kako bi započeli suradničke razgovore izravno unutar vašeg sadržaja.

Ova značajka je savršena za uredničke povratne informacije, suradničko čitanje, obrazovne platforme, pregled dokumenata i bilo koji scenarij u kojem želite kontekstualne rasprave usidrene u određenom tekstu.

Imajte na umu da su ovi dokumenti specifični za funkcionalnost Collab Chat. Komentiranje možete dodati i za sadržaje s puno stranica, poput knjiga, s nitom po stranici, bez korištenja collab chata. FastComments također ne naplaćuje po stranici ni po niti. Collab Chat se koristi upravo kada želite omogućiti korisnicima da odaberu tekst i komentiraju označeni dio teksta.

Možete vidjeti primjer ovdje.

Početak rada Internal Link

Brzi početak

Početak rada s Collab Chatom je jednostavan. Potrebni su vam FastComments Collab Chat skripta, HTML element koji sadrži tekst koji želite anotirati te konfiguracijski objekt s vašim Tenant ID-om.

Instalacija

Dodajte Collab Chat skriptu na svoju stranicu:

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

Osnovna implementacija

Evo minimalnog primjera:

Osnovna implementacija 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 <!-- Vaš spremnik 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čitaj Collab Chat skriptu -->
16 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
17
18 <!-- Inicijaliziraj Collab Chat -->
19 <script>
20 FastCommentsCollabChat(document.getElementById('article-content'), {
21 tenantId: 'demo'
22 });
23 </script>
24</body>
25</html>
26

Zamijenite 'demo' sa svojim stvarnim FastComments Tenant ID-om ako već nije, koji možete pronaći u svojem FastComments nadzornom panelu.

Kako to radi

Kada je inicijalizirano, korisnici mogu odabrati bilo koji tekst unutar ciljanog elementa. Nakon kratke odgode (3.5 sekundi na desktopu), pojavljuje se upit koji im omogućuje pokretanje rasprave. Kada je rasprava stvorena, na tekstu se pojavljuje vizualno isticanje. Drugi korisnici mogu prijeći mišem ili kliknuti na istaknuti tekst da bi pregledali i sudjelovali u raspravi. Sve rasprave se sinkroniziraju u stvarnom vremenu među svim posjetiteljima.

Demo uživo

Collab Chat možete vidjeti u akciji na našoj stranici s demo prikazom uživo.

Sljedeći koraci

Sada kada imate osnovno funkcionalnost, možete prilagoditi izgled i ponašanje u vodiču za Konfiguracijske opcije. Pogledajte vodič o ponašanju odabira teksta kako biste razumjeli kako funkcionira odabir teksta. Saznajte o stiliziranju i podršci za tamni način rada u vodiču za Prilagodbu. Za napredne integracije, istražite API Reference.

Frontend biblioteke

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

Primjeri Internal Link

Osnovni primjer

Najjednostavniji način korištenja Collab Chata je ciljanje jednog spremnika sadržaja. Ovaj primjer pokazuje kako omogućiti označavanje teksta na članku:

Osnovni primjer 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

Primjer s prilagođenim URL ID-jem (po stranici knjige, članku itd.)

Po zadanim postavkama, Collab Chat koristi URL stranice u kombinaciji s putanjom elementa i rasponom teksta za identifikaciju razgovora. Možete navesti prilagođeni urlId kako biste imali veću kontrolu nad načinom grupiranja razgovora:

Collab Chat s 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 promijeni, ali želite zadržati iste razgovore, ili ako želite dijeliti iste bilješke razgovora na više stranica.

Primjer s tamnim načinom

Ako vaša stranica ima tamnu pozadinu, omogućite podršku za tamni način kako bi korisničko sučelje chata izgledalo ispravno:

Collab Chat s tamnim 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

Primjer s onemogućenom gornjom trakom

Po zadanim postavkama, Collab Chat prikazuje gornju traku s brojem korisnika i brojem rasprava. Možete je onemogućiti:

Collab Chat s onemogućenom gornjom trakom
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

Primjer s povratnim pozivom za broj komentara

Možete pratiti kada su komentari dodani ili ažurirani koristeći povratni poziv commentCountUpdated:

Collab Chat s povratnim pozivom za broj 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

Primjer s više odjeljaka

Možete inicijalizirati Collab Chat na više zasebnih odjeljaka vaše stranice. Svaki odjeljak imat će svoje neovisne bilješke:

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

Dodavanje komentiranja u stvarnom vremenu u online knjige Internal Link

Možete inicijalizirati Collab Chat po stranici ako želite, i imati odvojene niti po stranici, jednostavno proslijedite parametar urlId vrijednost poput book-one-page1. Ova konfiguracija također radi za uobičajeni widget komentiranja.

Opcije konfiguracije Internal Link

Overview

FastComments Collab Chat proširuje standardni FastComments widget za komentare, pa nasljeđuje sve opcije konfiguracije iz osnovnog widgeta dok dodaje nekoliko opcija specifičnih za tekstualne bilješke.

Required Configuration

tenantId

Zahtijeva se vaš FastComments Tenant ID. Možete ga pronaći u vašoj nadzornoj ploči FastComments.

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

Collab Chat Specific Options

urlId

Po zadanim postavkama, Collab Chat generira jedinstveni identifikator za svaki razgovor na temelju URL-a stranice, DOM putanje do elementa i odabranog raspona teksta. Ovo možete zamijeniti prilagođenim urlId.

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

Ovo je korisno kada se struktura URL-a može promijeniti, a želite zadržati iste razgovore, ili kada želite dijeliti bilješke između više stranica.

topBarTarget

Kontrolira prikaz gornje trake koja prikazuje broj korisnika i broj rasprava. Postavite na null da u potpunosti onemogućite gornju traku, ili navedite DOM element u koji će se prikazati na određenoj lokaciji.

Primjer 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đenom mjestu
9FastCommentsCollabChat(element, {
10 tenantId: 'demo',
11 topBarTarget: document.getElementById('custom-header')
12});
13

hasDarkBackground

Omogućite stilizaciju za tamni način kada vaša stranica ima tamnu pozadinu. Ovo otkrivanje je automatsko, ali ponekad je poželjno to nadjačati.

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

commentCountUpdated

Povratna funkcija (callback) koja se poziva kad god se broj komentara promijeni. Ovo je korisno za ažuriranje elemenata sučelja kao što su značke (badges) ili naslovi stranica.

Primjer 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

Budući da Collab Chat proširuje standardni widget za komentare, možete koristiti bilo koju konfiguracijsku opciju iz osnovnog FastComments widgeta. Evo nekoliko često korištenih opcija:

locale

Postavite jezik za korisničko sučelje widgeta. FastComments podržava desetke jezika.

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

readonly

Učinite sve razgovore samo za čitanje. Korisnici mogu pregledavati postojeće bilješke, ali ne mogu stvarati nove ni odgovarati.

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

sso and simpleSSO

Integrirajte se sa vašim sustavom autentifikacije koristeći Single Sign-On.

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

Pogledajte dokumentaciju za SSO za potpune detalje o opcijama autentifikacije.

maxReplyDepth

Kontrolirajte koliko razina ugniježđenih odgovora je dopušteno. Po zadanoj postavci, Collab Chat postavlja ovo na 0, što znači da su svi komentari ravni (bez ugniježđenih odgovora). To možete promijeniti ako želite razgovore u nitima.

Primjer konfiguracije
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 maxReplyDepth: 3 // Dopusti 3 razine ugniježđivanja
5});
6

Internal Configuration

Ove opcije automatski postavlja Collab Chat i ne bi se trebale nadjačavati:

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 primjera koji prikazuje više opcija konfiguracije zajedno:

Primjer 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 popis svih dostupnih opcija konfiguracije naslijeđenih iz osnovnog widgeta, pogledajte glavnu FastComments dokumentaciju o konfiguraciji.

Ponašanje odabira teksta Internal Link

Kako funkcionira odabir teksta

Kad korisnici odaberu tekst unutar Collab Chat kontejnera, widget bilježi taj odabir i omogućuje im pokretanje rasprave. Odabir može biti mali poput jedne riječi ili velik koliko više odlomaka koji obuhvaćaju različite elemente.

Kašnjenje odabira

Na stolnim uređajima postoji kašnjenje od 3,5 sekunde između trenutka kada korisnik odabere tekst i pojave upita za raspravu. To sprječava treperenje korisničkog sučelja kada korisnici jednostavno označavaju tekst radi kopiranja ili čitanja. Na mobilnim uređajima upit se pojavljuje odmah jer je odabir teksta na zaslonima osjetljivim na dodir obično namjerniji.

Jedinstveni ID-ovi razgovora

Svaki razgovor dobiva jedinstveni urlId koji kombinira URL stranice, putanju DOM elementa i serijalizirani raspon teksta. To osigurava da svaki odabir teksta stvori poseban razgovor koji se kasnije može ponovno pronaći.

Ako u svojoj konfiguraciji navedete prilagođeni urlId, on će se kombinirati s putanjom elementa i rasponom teksta kako bi se stvorio konačni identifikator.

Vizualna isticanja

Kad za određeni odabir teksta postoji rasprava, taj tekst dobiva vizualno isticanje. Isticanje se ostvaruje pomoću boja pozadine i pojavljuje se pri prelasku mišem ili kada je pridruženi chat prozor otvoren.

Sustav isticanja radi tako da omota odabrani tekst u poseban element koji se može stilizirati. Ovaj pristup osigurava da isticanja ostanu točna čak i kada je temeljna HTML struktura složena.

Pozicioniranje prozora chata

Kada korisnik klikne na isticanje ili stvori novu bilješku, pored odabranog teksta pojavi se prozor chata. Widget automatski izračunava najbolju poziciju za taj prozor na temelju dostupnog prostora unutar prikaza (viewport).

Sustav pozicioniranja koristi CSS klase poput to-right, to-left, to-top i to-bottom za označavanje u kojem smjeru bi se prozor chata trebao proširiti od isticanja. Na mobilnim uređajima (zasloni širi manje od 768px), prozor chata uvijek se pojavljuje preko cijelog zaslona radi bolje upotrebljivosti.

Dimenzije chat prozora

Chat prozori na stolnim računalima široki su 410px s razmakom od 20px i vizualnom strelicom od 16px koja pokazuje na istaknuti tekst. Te dimenzije su fiksne kako bi se osiguralo dosljedno ponašanje, ali izgled možete prilagoditi pomoću CSS-a.

Odabiri koji obuhvaćaju više elemenata

Korisnici mogu odabrati tekst koji se proteže kroz više HTML elemenata, primjerice označavanje od sredine jednog odlomka do početka drugog. Sustav serijalizacije raspona ispravno obrađuje ovo i istaknut će sav odabrani tekst čak i preko granica elemenata.

Kompatibilnost preglednika

Sustav odabira teksta koristi standardni API window.getSelection() koji je podržan u svim modernim preglednicima. Za starije verzije Internet Explorera koristi se povratna kompatibilnost s document.selection.

Postojanost odabira

Kad se za odabir teksta stvori razgovor, ta bilješka ostaje čak i ako se stranica ponovno učita. Serijalizirani raspon i DOM putanja omogućuju widgetu da ponovno obnovi isticanja na točno istom mjestu kada se korisnici vrate na stranicu.

Ovo radi pouzdano sve dok sadržaj vaše stranice ostane stabilan. Ako promijenite tekstualni sadržaj ili restrukturirate HTML, postojeće bilješke možda više neće pravilno odgovarati tekstu. Iz tog razloga najbolje je izbjegavati velike promjene sadržaja na stranicama s aktivnim bilješkama ili razmotriti migraciju bilješki kada su promjene sadržaja neophodne.

Prilagodba Internal Link

Podrška za tamni način

Dinamički tamni način

Ako je tamni način na vašoj stranici kontroliran dodavanjem klase .dark elementu body, Collab Chat UI automatski će to poštovati bez potrebe za ponovnim inicijaliziranjem. Stilovi widgeta dizajnirani su da reagiraju na prisutnost te klase.

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

Prilagođeno stiliziranje putem CSS-a

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

Isticanje teksta koristi sustav stiliziranja komentarskih oblačića FastComments, pa će sve prilagodbe koje ste primijenili na standardni widget za komentare također utjecati na Collab Chat.

Prilagodba gornje trake

Gornja traka prikazuje broj korisnika online i broj rasprava. Poziciju možete prilagoditi tako da navedete prilagođeni element kao topBarTarget:

Custom Top Bar Location
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: document.getElementById('my-custom-header')
5});
6

Ili je u potpunosti onemogućite postavljanjem na null:

Disable Top Bar
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: null
5});
6

Ponašanje na mobilnim uređajima

Na zaslonima užim od 768px, Collab Chat se automatski prebacuje u izgled optimiziran za mobilne uređaje. Prozori chata pojavljuju se preko cijelog zaslona umjesto da lebde pored teksta, a kašnjenje pri odabiru je uklonjeno radi brže interakcije.

Ovo ponašanje je ugrađeno i ne zahtijeva konfiguraciju. Widget automatski detektira veličinu zaslona i prilagođava se u skladu s tim.

Izgled prozora chata

Prozori chata na desktopu imaju širinu 410px uz strelicu od 16px koja pokazuje na istaknuti tekst. Prozori se automatski postavljaju ovisno o raspoloživom prostoru u viewportu, koristeći klase pozicioniranja poput to-right, to-left, to-top, i to-bottom.

Možete dodati prilagođeni CSS za podešavanje boja, fontova, razmaka ili drugih vizualnih svojstava tih prozora. Prozori chata koriste istu strukturu komponenata kao standardni FastComments widget, pa nasljeđuju sve globalne prilagodbe koje ste primijenili.

Lokalizacija

Collab Chat podržava sve iste opcije lokalizacije kao standardni FastComments widget. Postavite opciju locale kako biste prikazali tekst sučelja na različitim jezicima:

Set Locale
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 locale: 'es' // španjolski
5});
6

FastComments podržava desetke jezika. Postavka locale utječe na sav tekst sučelja, uključujući poruke, gumbe i tekst u poljima za unos (placeholder).

Naslijeđene opcije prilagodbe

Budući da Collab Chat proširuje standardni widget za komentare, nasljeđuje sve opcije prilagodbe iz osnovnog widgeta. To uključuje prilagođene CSS klase, prilagođene prijevode, prilagodbu avatara, formatiranje datuma i još mnogo toga.

Pogledajte glavnu FastComments dokumentaciju o prilagodbi za potpuni popis dostupnih opcija prilagodbe.

Rad s prilagođenim fontovima

Ako vaša stranica koristi prilagođene fontove, Collab Chat UI će naslijediti te fontove iz CSS-a vaše stranice. Možda ćete morati stvoriti pravilo za prilagodbu widgeta i @import bilo kojih fontova u prilagođenom CSS-u u tom pravilu ako želite da plutajući prozor chata koristi iste fontove.

Sinkronizacija uživo Internal Link

Ažuriranja u stvarnom vremenu

Collab Chat koristi WebSocket veze za sinkronizaciju svih razgovora u stvarnom vremenu među svim povezanim korisnicima. Kada netko stvori novu bilješku, doda komentar ili obriše raspravu, svi ostali korisnici koji gledaju istu stranicu odmah vide ažuriranje bez osvježavanja.

Kako WebSocket sinkronizacija funkcionira

Kad inicijalizirate Collab Chat, widget uspostavlja WebSocket vezu s FastComments poslužiteljima. Ta veza ostaje otvorena tijekom trajanja korisničke sesije i sluša ažuriranja vezana uz trenutnu stranicu.

Sustav WebSocket koristi tri vrste broadcast poruka za Collab Chat. Događaj new-text-chat aktivira se kad netko kreira novu bilješku na stranici. Događaj updated-text-chat aktivira se kad netko ažurira postojeći razgovor. Događaj deleted-text-chat aktivira se kad netko obriše bilješku.

Sustav Broadcast ID-a

Kako bi se spriječio efekt odjeka u kojem korisnici vide svoje vlastite akcije kako im se vraćaju, svako ažuriranje uključuje jedinstveni broadcastId. Kad korisnik stvori ili ažurira bilješku, njegov klijent generira UUID za tu operaciju. Kada WebSocket emitira ažuriranje natrag svim klijentima, izvorni klijent zanemaruje ažuriranje jer odgovara njegovom vlastitom broadcastId.

To osigurava glatku interakciju u kojoj korisnici odmah vide svoje promjene u korisničkom sučelju bez čekanja na putovanje podataka kroz poslužitelj, a istovremeno jamči da svi ostali korisnici dobiju ažuriranje.

Broj korisnika uživo

Gornja traka prikazuje broj korisnika koji trenutno gledaju stranicu. Taj se broj ažurira u stvarnom vremenu kako se korisnici pridružuju i napuštaju. Broj korisnika se prenosi putem iste WebSocket veze i automatski se povećava/smanjuje na temelju događaja povezivanja i prekida veze.

Otpornost veze

Ako WebSocket veza padne zbog mrežnih problema ili održavanja poslužitelja, widget automatski pokušava ponovno uspostaviti vezu. Tijekom razdoblja ponovnog povezivanja, korisnici i dalje mogu raditi s postojećim bilješkama, ali neće vidjeti ažuriranja u stvarnom vremenu od drugih korisnika dok veza ne bude ponovno uspostavljena.

Nakon ponovnog povezivanja, widget se ponovo sinkronizira kako bi osigurao da nijedno ažuriranje nije propušteno. To se događa transparentno bez potrebe za intervencijom korisnika.

Razmatranja propusnosti

WebSocket poruke su male i sadrže samo osnovne informacije potrebne za sinkronizaciju stanja. Kreiranje nove bilješke obično koristi manje od 1KB propusnosti. Sustav također uključuje inteligentno grupiranje poruka kako bi se smanjila učestalost poruka tijekom perioda visoke aktivnosti.

Vaše metrike korištenja u FastComments nadzornoj ploči prate pubSubMessageCount i pubSubBandwidth kako biste mogli pratiti aktivnost sinkronizacije u stvarnom vremenu na vašim stranicama.

Sinkronizacija između kartica

Ako korisnik ima istu stranicu otvorenu u više pregledničkih kartica, ažuriranja u jednoj kartici pojavljuju se odmah u ostalim karticama. To radi putem istog WebSocket mehanizma sinkronizacije i ne zahtijeva dodatnu konfiguraciju.

Sigurnost

WebSocket poruke se prenose preko sigurnih veza (WSS) i uključuju provjeru tenanta kako bi se osiguralo da korisnici primaju samo ažuriranja za razgovore za koje su ovlašteni. Poslužitelj validira sve operacije prije njihovog emitiranja kako bi spriječio neovlašteni pristup ili manipulaciju.

Referenca API-ja Internal Link

Pregled API-ja

Collab Chat pruža tri REST API krajnje točke za programsko upravljanje tekstualnim razgovorima. Ove krajnje točke omogućuju dohvaćanje, stvaranje i brisanje bilješki bez korištenja widgeta u pregledniku.

Ovo su javne krajnje točke koje provjeravaju korisnike putem kolačića preglednika. Ne koriste API ključeve. Korisnici moraju biti prijavljeni u FastComments u svom pregledniku da bi pristupili ovim krajnjim točkama.

Base URL

Sve Collab Chat API krajnje točke nalaze se na:

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

Autentikacija

Ove krajnje točke provjeravaju korisnike putem kolačića preglednika. Ne koriste API ključeve. Korisnici moraju biti prijavljeni u FastComments u svom pregledniku da bi pristupili ovim krajnjim točkama.

Dohvati sve razgovore

Dohvatite sve tekstualne razgovore za određenu stranicu.

Krajnja točka

GET krajnja toč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 dohvatiti razgovore.

Odgovor

Odgovor uključuje status API-ja, informacije o trenutnoj korisničkoj sesiji ako je autentificiran, polje razgovora s njihovim ID-evima, URL-ovima i rasponima teksta, očišćeni identifikator URL-a, zastavicu koja pokazuje je li trenutni korisnik administrator stranice ili moderator, te detalje WebSocket veze za sinkronizaciju uživo koji uključuju tenantIdWS, urlIdWS i userIdWS.

Primjer zahtjeva

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

Primjer odgovora

Primjer 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

Stvorite novi tekstualni razgovor za određeni odabir teksta.

Krajnja točka

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

Parametri

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

Tijelo zahtjeva mora biti JSON i sadržavati sljedeća obavezna polja.

urlId (string, obavezno) je osnovni identifikator stranice.

urlIdWithRange (string, obavezno) je URL kombiniran s rasponom teksta, na primjer 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 odabrani tekst.

range (string, obavezno) je serijalizirani raspon teksta u formatu startOffset:endOffset,startOffset:endOffset{checksum}.

createdFromCommentId (string, obavezno) je ID komentara koji je pokrenuo ovaj razgovor.

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

Odgovor

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

Primjer zahtjeva

Primjer POST zahtjeva
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

Primjer odgovora

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

Brisanje razgovora

Obrišite postojeći tekstualni razgovor. Ova krajnja točka zahtijeva dozvole administratora ili moderatora, ili razgovor mora biti stvoren od strane prijavljenog korisnika.

Krajnja točka

DELETE krajnja toč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 (tijelo zahtjeva, obavezno) je UUID za sinkronizaciju uživo.

Primjer zahtjeva

Primjer DELETE zahtjeva
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

Primjer odgovora

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

Ograničenje brzine

Ove krajnje točke podliježu standardnom ograničavanju brzine FastComments API-ja. Middleware za ograničenje brzine primjenjuje se po tenantu kako bi se spriječila zlouporaba, a istovremeno omogućili normalni obrasci korištenja.

Odgovori s pogreškom

Sve krajnje točke vraćaju standardne HTTP statusne kodove. Odgovor 400 označava nevažeće parametre zahtjeva. Odgovor 401 znači da autentikacija nije uspjela. Odgovor 403 označava nedostatak dozvola. Odgovor 404 znači da razgovor nije pronađen. Odgovor 429 označava prekoračenje ograničenja stope.

Odgovori s pogreškom uključuju JSON tijelo s detaljima:

Primjer odgovora s pogreškom
Copy Copy
1
2{
3 "status": "error",
4 "message": "Conversation not found"
5}
6

Praćenje upotrebe

Stvaranje razgovora povećava vašu metriku upotrebe conversationCreateCount. Sva aktivnost sinkronizacije putem WebSocket-a povećava pubSubMessageCount i pubSubBandwidth. Te metrike možete pratiti u vašoj FastComments nadzornoj ploči pod analizom upotrebe.

Imate pitanja?

To je sve za FastComments Collab Chat! Ako imate bilo kakvih pitanja, trebate pomoć s implementacijom ili imate prijedloge za značajke, molimo obavijestite nas u nastavku ili se obratite našem timu za podršku.

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

Doprinesite ovom vodiču