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

Брзи почетак

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

Инсталација

Додајте Collab Chat скрипту на вашу страницу:

Учитавање Collab Chat скрипте
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
3

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

Ево минималног примера:

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

Замените 'demo' вашим стварним FastComments Tenant ID-ом ако већ није, који можете пронаћи у вашем FastComments контролном панелу.

Како то функционише

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

Демонстрација уживо

Можете видети Collab Chat у акцији на нашој страници са демонстрацијом уживо.

Следећи кораци

Сада када имате основну функционалност, можете прилагодити изглед и понашање у водичу Configuration Options. Погледајте водич Text Selection Behavior да бисте разумели како ради селекција текста. Сазнајте о стилизовању и подршци за тамни режим у водичу Customization. За напредне интеграције, истражите API Reference.

Фронтенд библиотеке

Све FastComments фронтенд библиотеке (react, vue, angular, итд.) садрже Collab Chat.

Примери Internal Link

Osnovni primjer

Najjednostavniji način upotrebe Collab Chat-a je da ciljate jedan kontejner sadržaja. Ovaj primjer pokazuje kako omogućiti označavanje teksta u članku:

Osnovni primjer Collab Chat-a
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 sa prilagođenim URL ID-om (po stranici knjige, članku, itd)

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

Collab Chat sa prilagođenim URL ID-om
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 URL-a promijeni, ali želite zadržati iste razgovore, ili ako želite dijeliti iste anotacije razgovora na više stranica.

Primjer sa tamnim režimom

Ako vaša stranica ima tamnu pozadinu, omogućite podršku za tamni režim kako bi korisnički interfejs chata izgledao ispravno:

Collab Chat sa tamnim režimom
Copy CopyRun External Link
1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>My Article with Collab Chat - Dark Mode</title>
6 <style>
7 body {
8 background-color: #1a1a1a !important;
9 color: #e0e0e0 !important;
10 font-family: system-ui, -apple-system, sans-serif;
11 padding: 20px;
12 margin: 0;
13 }
14 #article-content {
15 max-width: 800px;
16 margin: 0 auto;
17 background-color: #2d2d2d;
18 padding: 20px;
19 border-radius: 8px;
20 }
21 h1 {
22 color: #ffffff !important;
23 }
24 p {
25 color: #e0e0e0 !important;
26 line-height: 1.6;
27 }
28 .fastcomments-collab-chat-top-bar {
29 background-color: #2d2d2d !important;
30 color: #e0e0e0 !important;
31 border-bottom: 1px solid #444 !important;
32 }
33 </style>
34</head>
35<body>
36 <div id="article-content" style="min-height: 500px">
37 <h1>My Article Title</h1>
38 <p>This is a paragraph that users can annotate. Simply highlight any text to start a discussion!</p>
39 <p>You can have multiple paragraphs, and users can highlight text across any of them.</p>
40 </div>
41
42 <script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
43 <script>
44 FastCommentsCollabChat(document.getElementById('article-content'), {
45 tenantId: 'demo',
46 hasDarkBackground: true
47 });
48 </script>
49</body>
50</html>
51

Primjer sa isključenom gornjom trakom

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

Collab Chat sa isključ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 sa povratnim pozivom za broj komentara

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

Collab Chat sa 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 sa više sekcija

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

Collab Chat na više sekcija
Copy Copy
1
2<div id="intro-section">
3 <h2>Introduction</h2>
4 <p>Content for the introduction...</p>
5</div>
6
7<div id="main-section">
8 <h2>Main Content</h2>
9 <p>Content for the main article...</p>
10</div>
11
12<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
13<script>
14 // Inicijalizuj na uvodnoj sekciji
15 FastCommentsCollabChat(document.getElementById('intro-section'), {
16 tenantId: 'demo',
17 urlId: 'my-article-intro'
18 });
19
20 // Inicijalizuj na glavnoj sekciji
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

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

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

За комплетну листу свих доступних опција конфигурације наслеђених од основног видгета, видите главну FastComments документацију о конфигурацији.

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

Како ради одабир текста

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

Задршка при одабиру

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

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

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

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

Визуелно означавање

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

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

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

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

Систем позиционирања користи 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 UI ће то аутоматски поштовати без потребе за реиницијализацијом. Стилови видгета су дизајнирани да реагују на присуство ове класе.

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

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

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

Истакнути делови текста користе FastComments систем за стилизовање bubble коментара, па ће све прилагођавања која сте применили на стандардни коментарски видгет утицати и на 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 која показује ка истакнутом тексту. Прозори се позиционирају аутоматски у зависности од расположивог простора у viewport-у, користећи класе позиционирања као што су 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

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

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

Како WebSocket синхронизација функционише

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

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

Систем Broadcast ID-а

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

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

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

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

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

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

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

Разматрања пропусног опсега

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

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

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

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

Безбедност

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

API референца Internal Link

API Pregled

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

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

Base URL

Све Collab Chat API крајње тачке су под:

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

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

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

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

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

Endpoint

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

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

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

Endpoint

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

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

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

Endpoint

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 ограничавању захтева (rate limiting). Мидлвер за ограничење брзине се примењује по tenant-у како би се спречило злоупотреба, а истовремено омогућили нормални обрасци коришћења.

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

Све крајње тачке враћају стандардне 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 у продукцији.

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