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-ја

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

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

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

Имајте на уму да су ови документи специфични за функционалност Collab Chat. Можете додати коментарисање за садржаје са многобројним страницама, попут књига, са по једном нити по страници, без коришћења collab chat. FastComments такође не наплаћује по страници или по нити. Collab Chat је посебно када желите да дозволите корисницима да означе текст и коментаришу означени део текста.

Можете видети пример овде.

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

Brzi početak

Početak rada sa Collab Chat je jednostavan. Potrebni su vam FastComments Collab Chat skripta, HTML element koji sadrži tekst koji želite da anotirate i objekat konfiguracije 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 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 sa sadržajem -->
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 <!-- Inicijalizuj Collab Chat -->
19 <script>
20 FastCommentsCollabChat(document.getElementById('article-content'), {
21 tenantId: 'demo'
22 });
23 </script>
24</body>
25</html>
26

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

Kako radi

Kada je inicijalizovano, korisnici mogu selektovati bilo koji tekst unutar ciljnog elementa. Nakon kratkog zadržavanja (3.5 sekundi na desktopu), pojavljuje se upit koji im omogućava da započnu diskusiju. Kada se diskusija kreira, vizuelno isticanje se pojavljuje na tekstu. Drugi korisnici mogu preći mišem preko ili kliknuti na isticanje da bi videli i učestvovali u diskusiji. Sve diskusije se sinhronizuju u realnom vremenu među svim posetiocima.

Demo uživo

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

Sledeći koraci

Sada kada imate osnovno funkcionalnost, možete prilagoditi izgled i ponašanje u Vodiču za opcije konfiguracije. Pogledajte Vodič za ponašanje pri izboru teksta da biste razumeli kako funkcioniše selekcija teksta. Saznajte o stilizaciji i podršci za tamni režim u Vodiču za prilagođavanje. Za napredne integracije, istražite API referencu.

Frontend biblioteke

Sve FastComments frontend biblioteke (react, vue, angular, itd.) 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 повратног позива:

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

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

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

Поставите језик за UI видгета. 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.

Комплетан пример

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

Пример конфигурације
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 секунде између тренутка када корисник одабере текст и појављивања упита за дискусију. Ово спречава треперење корисничког интерфејса када корисници само истичу текст ради копирања или читања. На мобилним уређајима упит се појављује одмах јер је одабир текста на екрану осетљивом на додир обично намернији.

Јединствени идентификатори разговора

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

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

Визуелно истицање

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

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

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

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

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

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

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

Одабири преко више елемената

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

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

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

Постојаност одабира

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

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

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

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

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

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

Пример 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 да бисте приказали текст корисничког интерфејса на различитим језицима:

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

FastComments подржава десетине језика. Поставка локала утиче на сав текст корисничког интерфејса укључујући упите, дугмад и текст места за унос (placeholder).

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

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

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

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

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

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

Ажурирања у реалном времену

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

Како ради синхронизација преко WebSocket-а

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

WebSocket систем користи три типа broadcast порука за Collab Chat. The new-text-chat догађај се активира када неко направи нову анотацију на страници. The updated-text-chat догађај се активира када неко ажурира постојећу конверзацију. The deleted-text-chat догађај се активира када неко обрише анотацију.

Broadcast ID System

Да би се спречили ефекти еха где корисници виде своје акције које им се враћају назад, свака измена укључује јединствени broadcastId. Када корисник креира или ажурира анотацију, њихов клијент генерише UUID за ту операцију. Када WebSocket емитује ажурирање назад свим клијентима, изворни клијент игнорише ажурирање јер се поклапа са његовим broadcastId.

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

Број корисника уживо

Горња трака приказује број корисника који тренутно гледају страницу. Овај број се ажурира у реалном времену како корисници приступају и напуштају страницу. Број корисника се обезбеђује преко исте WebSocket везе и аутоматски се увећава/смањује на основу догађаја повезивања и прекида везе.

Отпорност везе

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

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

Напомене о пропусном опсегу

WebSocket поруке су лагане и садрже само основне информације потребне за синхронизацију стања. Креирање нове анотације обично користи мање од 1KB пропусног опсега. Систем такође укључује интелигентно груписање порука како би се смањила учесталост порука током периода високе активности.

Ваше метрике коришћења у FastComments контролној табли прате pubSubMessageCount и pubSubBandwidth тако да можете пратити активност синхронизације у реалном времену на вашим сајтовима.

Синхронизација између картица

Ако корисник има исту страницу отворену у више прегледачких картица, ажурирања у једној картици појављују се одмах у другим картицама. Ово функционише кроз исти WebSocket механизам синхронизације и не захтева додатну конфигурацију.

Безбедност

WebSocket поруке се преносе преко сигурних веза (WSS) и укључују валидацију тенанта како би се осигурало да корисници примају само ажурирања за конверзације за које су овлашћени. Сервер валидаује све операције пре него што их емитује како би спречио неовлашћен приступ или манипулацију.

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

Преглед API-ја

Collab Chat обезбеђује три REST API крајње тачке за програмско управљање текстуалним разговорима. Ове крајње тачке вам омогућавају да преузмете, креирате и бришете анотације без коришћења widget-а у прегледачу.

Ово су јавне крајње тачке које аутентификују кориснике преко колачића у прегледачу. Оне не користе API кључеве. Корисници морају бити пријављени у FastComments у свом прегледачу да би приступили овим крајњим тачкама.

Основни URL

All Collab Chat API endpoints are under:

Основни URL
Copy Copy
1
2https://fastcomments.com/comment-collab-chats
3

Аутентификација

Ове крајње тачке аутентификују кориснике преко колачића у прегледачу. Оне не користе API кључеве. Корисници морају бити пријављени у FastComments у свом прегледачу да би приступили овим крајњим тачкама.

Преузми све разговоре

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

Крајња тачка

GET крајња тачка
Copy Copy
1
2GET /comment-collab-chats/:tenantId?urlId=<urlId>
3

Параметри

tenantId (путни параметар, обавезан) је ваш FastComments Tenant ID.

urlId (query параметар, обавезан) је идентификатор странице за коју желите да преузмете разговоре.

Одговор

Одговор укључује статус API-ја, информације о тренутној корисничкој сесији ако је аутентификована, низ разговора са њиховим ID-јевима, URL-овима и опсезима текста, очишћени идентификатор URL-а, ознаку која указује да ли је тренутни корисник администратор сајта или модератор, и детаље о WebSocket вези за синхронизацију уживо укључујући tenantIdWS, urlIdWS, и userIdWS.

Пример захтева

Пример GET захтева
Copy Copy
1
2curl "https://fastcomments.com/comment-collab-chats/demo?urlId=my-article-page" \
3 --cookie "your-session-cookie"
4

Пример одговора

Пример GET одговора
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

Креирај разговор

Креирајте нов текстуални разговор за одређени избор текста.

Крајња тачка

POST крајња тачка
Copy Copy
1
2POST /comment-collab-chats/:tenantId
3

Параметри

tenantId (путни параметар, обавезан) је ваш FastComments Tenant ID.

Тело захтева мора бити JSON и садржати следећа обавезна поља.

urlId (string, обавезно) је базни идентификатор странице.

urlIdWithRange (string, обавезно) је URL комбиниран са опсегом текста, на пример my-page:p:0:15,0:45{abc123}.

pageTitle (string, обавезно) је наслов странице.

selector (string, обавезно) је DOM путања до елемента који садржи изабрани текст.

range (string, обавезно) је серијализовани опсег текста у формату startOffset:endOffset,startOffset:endOffset{checksum}.

createdFromCommentId (string, обавезно) је ID коментара који је иницирао овај разговор.

broadcastId (string, обавезно) је UUID за синхронизацију уживо како би се спречили ефекти еха.

Одговор

Одговор садржи статус API-ја и ID новокреираног разговора.

Пример захтева

Пример POST захтева
Copy Copy
1
2curl -X POST "https://fastcomments.com/comment-collab-chats/demo" \
3 --cookie "your-session-cookie" \
4 -H "Content-Type: application/json" \
5 -d '{
6 "urlId": "my-article-page",
7 "urlIdWithRange": "my-article-page:p:0:15,0:45{abc123}",
8 "pageTitle": "My Article Title",
9 "selector": "div#article > p:nth-child(2)",
10 "range": "0:15,0:45{abc123}",
11 "createdFromCommentId": "comment789",
12 "broadcastId": "550e8400-e29b-41d4-a716-446655440000"
13 }'
14

Пример одговора

Пример POST одговора
Copy Copy
1
2{
3 "status": "success",
4 "createdChatId": "conv789"
5}
6

Избриши разговор

Избришите постојећи текстуални разговор. Ова крајња тачка захтева дозволу администратора или модератора, или разговор мора бити креиран од стране аутентификованог корисника.

Крајња тачка

DELETE крајња тачка
Copy Copy
1
2DELETE /comment-collab-chats/:tenantId/:chatId
3

Параметри

tenantId (путни параметар, обавезан) је ваш FastComments Tenant ID.

chatId (путни параметар, обавезан) је ID разговора који треба избрисати.

broadcastId (тело захтева, обавезно) је UUID за синхронизацију уживо.

Пример захтева

Пример DELETE захтева
Copy Copy
1
2curl -X DELETE "https://fastcomments.com/comment-collab-chats/demo/conv789" \
3 --cookie "your-session-cookie" \
4 -H "Content-Type: application/json" \
5 -d '{
6 "broadcastId": "550e8400-e29b-41d4-a716-446655440001"
7 }'
8

Пример одговора

Пример DELETE одговора
Copy Copy
1
2{
3 "status": "success"
4}
5

Ограничење стопе

Ове крајње тачке подлежу стандардном FastComments ограничењу стопе API захтева. Middleware за ограничење стопе примењује се по тенанту како би се спречила злоупотреба уз омогућавање нормалних образаца коришћења.

Одговори о грешкама

Све крајње тачке враћају стандардне HTTP статус кодове. Одговор 400 указује на невалидне параметре захтева. Одговор 401 значи да аутентификација није успела. Одговор 403 указује на недовољне дозволе. Одговор 404 значи да разговор није пронађен. Одговор 429 указује да је прекорачено ограничење стопе.

Одговори о грешкама укључују JSON тело са детаљима:

Пример одговора о грешци
Copy Copy
1
2{
3 "status": "error",
4 "message": "Conversation not found"
5}
6

Праћење коришћења

Креирање разговора повећава вашу метрику коришћења conversationCreateCount. Сва активност WebSocket синхронизације повећава pubSubMessageCount и pubSubBandwidth. Ове метрике можете пратити на вашем FastComments контролној табли у делу аналитике коришћења.

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

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

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

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