FastComments.com

Menu Icon

Језик 🇧🇦 Српски (БиХ)
🇺🇸 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

Почетак рада

Почетак рада
Примери
Додавање живог коментарисања у онлајн књиге

Конфигурација

Опције конфигурације
Понашање при одабиру текста

Прилагођавање

Прилагођавање

Напредно

Синхронизација уживо
Референца API-ја

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

FastComments Collab Chat omogućava korisnicima da označe i komentarišu bilo koji tekstualni sadržaj na vašoj web-stranici, stvarajući rasprave u nitima vezane za određene odabire teksta. Korisnici mogu odabrati riječi, rečenice ili čitave odlomke da započnu kolaborativne razgovore direktno u okviru vašeg sadržaja.

Ova funkcionalnost je savršena za uređivačke povratne informacije, okruženja za zajedničko čitanje, obrazovne platforme, pregled dokumenata i svaku situaciju u kojoj želite kontekstualne diskusije vezane za određeni dio teksta.

Imajte na umu da su ovi dokumenti specifični za funkcionalnost Collab Chat. Možete dodati komentare za sadržaj koji ima mnogo stranica, poput knjiga, koristeći nit-po-stranici, bez korištenja Collab Chat-a. FastComments također ne naplaćuje po stranici ili po niti. Collab Chat je posebno namijenjen kada želite omogućiti korisnicima da odaberu tekst i komentarišu označeni dio teksta.

Možete vidjeti primjer ovdje.

Почетак рада Internal Link

Brzi početak

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

Instalacija

Dodajte Collab Chat skriptu na vašu 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 primera:

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

Zamijenite 'demo' sa vašim stvarnim FastComments Tenant ID ako već nije, koji možete pronaći u vašem FastComments dashboard.

Kako funkcioniše

Kada se inicijalizuje, korisnici mogu izabrati bilo koji tekst unutar ciljanog elementa. Nakon kratkog kašnjenja (3.5 sekunde na desktopu), pojavljuje se prompt koji im omogućava da započnu diskusiju. Kada se kreira diskusija, na tekstu se pojavi vizuelno isticanje. Drugi korisnici mogu preći mišem ili kliknuti na istaknuti dio da vide i učestvuju u diskusiji. Sve diskusije se sinhronizuju u realnom vremenu za sve posjetioce.

Demo uživo

Možete vidjeti 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 Configuration Options. Pogledajte vodič o ponašanju pri odabiru teksta da biste razumjeli kako selekcija teksta funkcioniše. Saznajte o stilizaciji i podršci za tamni režim u vodiču za Customization. Za napredne integracije, istražite API referencu.

Frontend biblioteke

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

Примери Internal Link

Основни примјер

Најједноставнији начин коришћења Collab Chat-а је да циљате један контејнер садржаја. Овај пример показује како омогућити анотације текста на чланку:

Основни примјер 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

Примјер са прилагођеним URL ID-јем (по страници књиге, чланку итд.)

По подразумјевању, Collab Chat користи URL странице у комбинацији са путањом елемента и опсегом текста да идентификује разговоре. Можете обезбиједити прилагођени urlId да бисте имали већу контролу над тим како се разговори групишу:

Collab Chat са прилагођеним URL ID-јем
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

Ово је корисно ако се структура вашег URL-а промијени, а желите задржати исте разговоре, или ако желите дијелити исте анотације разговора преко више страница.

Примјер са тамним режимом

Ако ваша страница има тамну позадину, омогућите подршку за тамни режим како би кориснички интерфејс чата изгледао исправно:

Collab Chat са тамним режимом
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

Примјер са онемогућеном горњом траком

По подразумјевању, Collab Chat приказује горњу траку са бројем корисника и бројем дискусија. Можете је онемогућити:

Collab Chat са онемогућеном горњом траком
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

Примјер са повратним позивом за број коментара

Можете пратити када се коментари додају или ажурирају користећи commentCountUpdated callback:

Collab Chat са повратним позивом за број коментара
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

Примјер са више секција

Можете иницијализовати Collab Chat на више одвојених секција ваше странице. Свака секција ће имати своје независне анотације:

Collab Chat на више секција
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 // Иницијализујте на уводној секцији
15 FastCommentsCollabChat(document.getElementById('intro-section'), {
16 tenantId: 'demo',
17 urlId: 'my-article-intro'
18 });
19
20 // Иницијализујте на главној секцији
21 FastCommentsCollabChat(document.getElementById('main-section'), {
22 tenantId: 'demo',
23 urlId: 'my-article-main'
24 });
25</script>
26

Додавање живог коментарисања у онлајн књиге Internal Link

Можете иницијализовати Collab Chat по страници ако желите, и имати одвојене теме по страници, једноставно проследите параметар urlId вредност попут book-one-page1. Ова конфигурација такође функционише са уобичајеним видгетом за коментаре.

Опције конфигурације Internal Link

Преглед

FastComments Collab Chat проширује стандардни FastComments видгет за коментаре, тако да наслеђује све опције конфигурације из основног видгета уз додавање неколико специфичних за текстуалне анотације.

Обавезна конфигурација

tenantId

Потребан је ваш FastComments Tenant ID. Можете га пронаћи на вашој FastComments контролној табли.

Примјер конфигурације
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo'
4});
5

Опције специфичне за Collab Chat

urlId

По подразумеваном, Collab Chat генерише јединствени идентификатор за сваки разговор на основу URL странице, DOM путање до елемента и изабраног опсега текста. Ово можете превазићи прилагођеним urlId.

Примјер конфигурације
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 urlId: 'my-custom-page-id'
5});
6

Ово је корисно када се структура ваших URL-ова може промијенити али желите задржати исте разговоре, или када желите дијелити анотације преко више страница.

topBarTarget

Контролише приказ горње траке која показује број корисника и број дискусија. Поставите на null да у потпуности онемогућите горњу траку, или наведите DOM елемент да бисте је рендеровали на одређеном месту.

Примјер конфигурације
Copy Copy
1
2// Онемогући горњу траку
3FastCommentsCollabChat(element, {
4 tenantId: 'demo',
5 topBarTarget: null
6});
7
8// Прикажи горњу траку на прилагођеној локацији
9FastCommentsCollabChat(element, {
10 tenantId: 'demo',
11 topBarTarget: document.getElementById('custom-header')
12});
13

hasDarkBackground

Омогућите стилове за тамни режим када ваша страница има тамну позадину. Ово се аутоматски детектује, али може бити пожељно да то ручно превазиђете.

Примјер конфигурације
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 hasDarkBackground: true
5});
6

commentCountUpdated

Функција повратног позива која се извршава кад год се број коментара промијени. Ово је корисно за ажурирање елемената корисничког интерфејса као што су ознаке или наслови страница.

Примјер конфигурације
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

Насљедне опције конфигурације

Пошто Collab Chat проширује стандардни видгет за коментаре, можете користити било коју опцију конфигурације из основног FastComments видгета. Ево неких често кориштених опција:

locale

Подесите језик за кориснички интерфејс видгета. FastComments подржава десетине језика.

Примјер конфигурације
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 locale: 'es' // Шпански
5});
6

readonly

Учините све разговоре само за читање. Корисници могу прегледати постојеће анотације али не могу креирати нове или одговарати.

Примјер конфигурације
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 readonly: true
5});
6

sso and simpleSSO

Интегришите са вашим системом аутентификације користећи Single Sign-On.

Примјер конфигурације
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 sso: {
5 // SSO конфигурација
6 }
7});
8

Погледајте документацију о SSO-у за детаљне информације о опцијама аутентификације.

maxReplyDepth

Контролишите колико нивоа дубоко одговори могу ићи. По подразумеваном, Collab Chat поставља ово на 0, што значи да су сви коментари равни (нема угњежђених одговора). Ово можете промијенити ако желите нитоване разговоре.

Примјер конфигурације
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 maxReplyDepth: 3 // Дозволи 3 нивоа угнијежења
5});
6

Интерна конфигурација

Ове опције се аутоматски подешавају од стране Collab Chat-а и не би требало да буду премашиване:

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.

Потпуни примјер

Ево примјера који показује вишe опција конфигурације заједно:

Примјер конфигурације
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 // Ваша SSO конфигурација
13 },
14 maxReplyDepth: 1
15});
16

For a complete list of all available configuration options inherited from the base widget, see the main FastComments configuration documentation.

Понашање при одабиру текста Internal Link

Како функционише одабир текста

Када корисници одаберу текст унутар Collab Chat контејнера, видгет ухвати ту селекцију и омогућава им да започну дискусију. Селекција може бити толико мала као једна реч или толико велика колико више параграфа који се простиру преко различитих елемената.

Задршка селекције

На десктоп уређајима постоји задршка од 3.5 секунде између тренутка када корисник одабере текст и када се појави позив за дискусију. Ово спречава треперење корисничког интерфејса када корисници једноставно истичу текст да би га копирали или прочитали. На мобилним уређајима позив се појављује одмах јер је одабир текста на уређајима на додир обично намернији.

Јединствени ID-ови разговора

Сваки разговор добије јединствени urlId који комбинује URL странице, путању DOM елемента и серијализовани опсег текста. Ово осигурава да свака селекција текста креира посебан разговор који се може поново пронаћи касније.

Ако у вашој конфигурацији наведете прилагођени urlId, он ће се комбиновати са путањом елемента и опсегом текста како би се креирао финални идентификатор.

Визуелна истакања

Када постоји дискусија за одређену селекцију текста, тај текст добија визуелно истакање. Истакање се реализује коришћењем боја позадине и појављује се при прелазу мишем или када је повезани прозор ћаскања отворен.

Систем за истицање ради тако што умотава одабрани текст у посебан елемент који се може стиловати. Овај приступ осигурава да истакања остану прецизна чак и када је основна HTML структура сложена.

Позиционирање прозора ћаскања

Када корисник кликне на истакнути део или креира нову анотацију, прозор ћаскања се појављује у близини одабраног текста. Видгет аутоматски израчунава најбољу позицију за овај прозор на основу расположивог простора у viewport-у.

Систем позиционирања користи CSS класе попут to-right, to-left, to-top и to-bottom да означи у ком правцу би прозор ћаскања требао да се прошири од истакнутог текста. На мобилним уређајима (екрани ширине мање од 768px), прозор ћаскања се увек појављује преко целог екрана ради боље употребљивости.

Димензије прозора ћаскања

Прозори ћаскања на десктопу имају ширину 410px са размаком од 20px и визуелном стрелицом од 16px која показује на истакнути текст. Ове димензије су фиксне како би се обезбедило конзистентно понашање, али можете прилагодити изглед помоћу CSS-а.

Селекције кроз више елемената

Корисници могу одабрати текст који се протеже кроз више HTML елемената, на пример истичући од средине једног параграфа до почетка другог. Систем серијализације опсега правилно то обрађује и истакнуће сав изабрани текст чак и преко граница елемената.

Компатибилност прегледача

Систем за одабир текста користи стандардни window.getSelection() API који је подржан у свим модерним прегледачима. За старије верзије Internet Explorer-а, прелази се на document.selection ради компатибилности.

Постојаност селекције

Када се за селекцију текста креира разговор, та анотација остаје чак и ако се страница освежи. Серијализовани опсег и путања DOM-а омогућавају видгету да врати истакања на тачно исто место када се корисници врате на страницу.

Ово ради поуздано све док садржај ваше странице остане стабилан. Ако промените текстуални садржај или реструктуришете HTML, постојеће анотације можда више неће бити правилно усклађене са текстом. Због тога је најбоље избегавати велике измене садржаја на страницама са активним анотацијама, или размотрити миграцију анотација када су измене садржаја неопходне.

Прилагођавање Internal Link

Подршка за тамни режим

Динамички тамни режим

Ако је тамни режим на вашем сајту контролисан додавањем класе .dark на body елемент, Collab Chat кориснички интерфејс ће то аутоматски поштовати без потребе за поновном иницијализацијом. Стилови видџета су дизајнирани да реагују на присуство ове класе.

Пример CSS-а за тамни режим
Copy Copy
1
2/* Ваш CSS за тамни режим */
3body.dark {
4 background: #1a1a1a;
5 color: #ffffff;
6}
7

Прилагођено обликовање помоћу CSS-а

Можете прилагодити изглед истакака, прозора за ћаскање и других елемената помоћу CSS-а. Видџет додаје одређене класе које можете циљати у вашем стилском листу.

Истакање текста користи FastComments систем стилова за балоне коментара, тако да ће било какве прилагодбе које сте применили на стандардни видџет за коментаре такође утицати на Collab Chat.

Прилагођавање горње траке

Горња трака показује број корисника који су на мрежи и број дискусија. Можете прилагодити њен положај тако што ћете као topBarTarget навести прилагођени елемент:

Прилагођена локација горње траке
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: document.getElementById('my-custom-header')
5});
6

Или га у потпуности онемогућите постављањем на null:

Онемогућавање горње траке
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: null
5});
6

Понашање на мобилним уређајима

На екранима у ширини мањој од 768px, Collab Chat аутоматски прелази на оптимизовани изглед за мобилне уређаје. Прозори за ћаскање се приказују у пуној величини уместо да лебде поред текста, а кашњење при селекцији је уклоњено ради непосредније интеракције.

Ово понашање је уграђено и не захтева конфигурацију. Видџет аутоматски детектује величину екрана и прилагођава се у складу с тим.

Изглед прозора ћаскања

Прозори за ћаскање имају ширину 410px на десктопу са стрелицом од 16px која показује на истакнути текст. Прозори се позиционирају аутоматски на основу расположивог простора видљивог дела странице, користећи позиционирајуће класе као што су to-right, to-left, to-top и to-bottom.

Можете додати прилагођени CSS да бисте подесили боје, фонтове, размаке или друге визуелне особине ових прозора. Прозори за ћаскање користе исту структуру компоненти као стандардни FastComments видџет, па наслеђују све глобалне прилагодбе које сте применили.

Локализација

Collab Chat подржава све исте опције локализације као стандардни FastComments видџет. Подесите опцију locale да бисте приказали UI текст на различитим језицима:

Подешавање локала
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 locale: 'es' // Шпански
5});
6

FastComments подржава десетине језика. Подешавање локала утиче на сав UI текст, укључујући упитнике, дугмад и текст у плејсхолдерима.

Наслеђене опције прилагођавања

Пошто Collab Chat проширује стандардни видџет за коментаре, он наслеђује све опције прилагођавања из основног видџета. То укључује прилагођене CSS класе, прилагођена превођења, прилагођавање аватара, форматирање датума и још много тога.

Погледајте главну документацију за прилагођавање FastComments за комплетну листу доступних опција прилагођавања.

Рад са прилагођеним фонтовима

Ако ваш сајт користи прилагођене фонтове, Collab Chat UI ће наслеђивати те фонтове из CSS-а ваше странице. Можда ћете морати да креирате правило за прилагођавање видџета и @import било које фонтове у прилагођеном CSS-у у том правилу ако ви желите да лебдећи прозор за ћаскање користи исте фонтове.

Синхронизација уживо Internal Link

Ažuriranja u realnom vremenu

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

Kako WebSocket sinhronizacija radi

Kada inicijalizujete Collab Chat, widget uspostavlja WebSocket vezu sa FastComments serverima. Ta 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. new-text-chat događaj se pokreće kada neko kreira novu anotaciju na stranici. updated-text-chat događaj se pokreće kada neko ažurira postojeći razgovor. deleted-text-chat događaj se pokreće kada neko obriše anotaciju.

Sistem Broadcast ID-a

Da bi se spriječili efekti odjeka gdje korisnici vide svoje vlastite akcije emitovane nazad sebi, svako ažuriranje sadrži 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, klijent koji je inicirao akciju ignoriše ažuriranje jer se poklapa sa njegovim vlastitim broadcastId.

Ovo osigurava glatku interakciju gdje korisnici vide svoje promjene odmah u UI bez čekanja na povratni put preko servera, a istovremeno osigurava 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 dok se korisnici pridružuju i napuštaju. Broj korisnika se prenosi preko iste WebSocket veze i automatski se povećava/smanjuje na osnovu događaja povezivanja i prekida veze.

Otpornost veze

Ako WebSocket veza padne zbog mrežnih problema ili održavanja servera, widget automatski pokušava ponovo uspostaviti vezu. Tokom perioda ponovnog povezivanja, korisnici i dalje mogu komunicirati sa postojećim anotacijama, ali neće vidjeti ažuriranja u realnom vremenu od drugih korisnika dok veza ne bude ponovo uspostavljena.

Kada se veza ponovo uspostavi, widget vrši resinhronizaciju kako bi osigurao da nijedno ažuriranje nije propušteno. Ovo se dešava transparentno bez potrebe za intervencijom korisnika.

Razmatranja propusnosti

WebSocket poruke su lake i sadrže samo osnovne informacije potrebne za sinhronizaciju stanja. Kreiranje nove anotacije obično koristi manje od 1KB propusnosti. Sistem takođe uključuje inteligentno grupisanje poruka kako bi se smanjila frekvencija poruka tokom perioda velike aktivnosti.

Vaši metrički podaci u FastComments kontrolnoj tabli prate pubSubMessageCount i pubSubBandwidth tako da možete pratiti aktivnost sinhronizacije u realnom vremenu na vašim stranicama.

Sinhronizacija između tabova

Ako korisnik ima istu stranicu otvorenu u više tabova preglednika, ažuriranja u jednom tabu pojavljuju se odmah u ostalim tabovima. Ovo radi preko istog WebSocket mehanizma sinhronizacije i ne zahtijeva dodatnu konfiguraciju.

Sigurnost

WebSocket poruke se prenose preko sigurnih veza (WSS) i sadrže validaciju zakupca (tenant) kako bi se osiguralo da korisnici primaju samo ažuriranja za razgovore koje su ovlašteni vidjeti. Server validira sve operacije prije nego što ih emitira kako bi spriječio neovlašteni pristup ili manipulaciju.

Референца API-ја Internal Link

Pregled API-ja

Collab Chat pruža tri REST API krajnje tačke za programatsko upravljanje tekstualnim razgovorima. Ove krajnje tačke omogućavaju dohvat, kreiranje i brisanje anotacija bez korištenja widgeta u pregledniku.

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

Osnovni URL

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

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

Autentifikacija

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

Dohvati sve razgovore

Dohvati sve tekstualne razgovore za određenu stranicu.

Krajnja tačka

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

Parametri

tenantId (path parameter, required) je vaš FastComments Tenant ID.

urlId (query parameter, required) je identifikator stranice za koju želite dohvatiti razgovore.

Odgovor

Odgovor uključuje status API-ja, informacije o trenutnoj korisničkoj sesiji ako je autentifikovan, niz razgovora sa njihovim ID-jevima, URL-ovima i tekstualnim rasponima, očišćen identifikator URL-a, zastavicu koja označava da li je trenutni korisnik administrator sajta ili moderator, i detalje WebSocket konekcije za sinhronizaciju uživo uključujući tenantIdWS, urlIdWS, i userIdWS.

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

Kreiraj razgovor

Kreirajte novi tekstualni razgovor za određeni izbor teksta.

Krajnja tačka

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

Parametri

tenantId (path parameter, required) je vaš FastComments Tenant ID.

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

urlId (string, required) je osnovni identifikator stranice.

urlIdWithRange (string, required) je URL u kombinaciji s rasponom teksta, na primjer my-page:p:0:15,0:45{abc123}.

pageTitle (string, required) je naslov stranice.

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

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

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

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

Odgovor

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

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

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

Brisanje razgovora

Izbrišite postojeći tekstualni razgovor. Ova krajnja tačka zahtijeva administratorske ili moderatorske dozvole, ili razgovor mora biti kreiran od strane autentifikovanog korisnika.

Krajnja tačka

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

Parametri

tenantId (path parameter, required) je vaš FastComments Tenant ID.

chatId (path parameter, required) je ID razgovora koji želite izbrisati.

broadcastId (request body, required) je UUID za sinhronizaciju uživo.

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

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

Ograničenja zahtjeva

Ove krajnje tačke podliježu standardnim ograničenjima brzine FastComments API-ja. Middleware za ograničenje se primjenjuje po tenant-u kako bi spriječio zloupotrebu, uz dopuštanje normalnih obrazaca korištenja.

Odgovori o greškama

Sve krajnje tačke vraćaju standardne HTTP status kodove. Odgovor 400 označava neispravne parametre zahtjeva. Odgovor 401 znači da autentifikacija 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 brzine.

Odgovori o greškama uključuju JSON tijelo s detaljima:

Primjer 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 upotrebe conversationCreateCount. Sva WebSocket sinhronizacija povećava pubSubMessageCount i pubSubBandwidth. Možete pratiti ove metrike u vašem FastComments kontrolnom panelu pod analitikom upotrebe.

Имате питања?

То је то за FastComments Collab Chat! Ако имате било каквих питања, треба вам помоћ при имплементацији или имате приједлоге за нове функције, јавите нам испод или се обратите нашем тиму за подршку.

За живе примјере, погледајте Govscent.org који користи Collab Chat у продукцији.

Допринесите овом водичу