FastComments.com

Menu Icon

Sprog 🇩🇰 Dansk
🇺🇸 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

Kom godt i gang

Kom godt i gang
Eksempler
Tilføjelse af live-kommentarer til onlinebøger

Konfiguration

Konfigurationsindstillinger
Adfærd ved tekstmarkering

Tilpasning

Tilpasning

Avanceret

Live-synkronisering
API-reference

Tilføj Inline Live-kommentarer til dokumenter, bøger osv

FastComments Collab Chat gør det muligt for brugere at markere og annotere enhver tekst på din hjemmeside og oprette trådede diskussioner knyttet til specifikke tekstudsnit. Brugere kan vælge ord, sætninger eller hele afsnit for at starte samarbejdsdiskussioner direkte i dit indhold.

Denne funktion er perfekt til redaktionel feedback, samarbejdslæsningsmiljøer, uddannelsesplatforme, dokumentgennemgang og enhver situation, hvor du ønsker kontekstuelle diskussioner forankret til specifik tekst.

Bemærk, at denne dokumentation er specifik for Collab Chat-funktionaliteten. Du kan tilføje kommentering til indhold med mange sider, som bøger, med tråd-per-side, uden at bruge collab chat. FastComments opkræver heller ikke pr. side eller pr. tråd. Collab Chat er specifikt, når du vil tillade brugere at vælge tekst og kommentere det fremhævede tekstafsnit.

Du kan se et eksempel her.

Kom godt i gang Internal Link

Kom godt i gang

Det er enkelt at komme i gang med Collab Chat. Du skal bruge FastComments Collab Chat-scriptet, et HTML-element, der indeholder den tekst, du vil annotere, og et konfigurationsobjekt med dit Tenant ID.

Installation

Tilføj Collab Chat-scriptet til din side:

Indlæsning af Collab Chat-scriptet
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-collab-chat.min.js"></script>
3

Grundlæggende implementering

Her er et minimalt eksempel:

Grundlæggende implementering af 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

Udskift 'demo' med dit faktiske FastComments Tenant ID, hvis det ikke allerede er det. Du kan finde det i dit FastComments-dashboard.

Sådan fungerer det

Når det er initialiseret, kan brugere markere enhver tekst inden for mål-elementet. Efter en kort forsinkelse (3,5 sekunder på desktop) vises en prompt, der gør det muligt for dem at starte en diskussion. Når en diskussion oprettes, vises en visuel markering på teksten. Andre brugere kan holde musen over eller klikke på markeringen for at se og deltage i diskussionen. Alle diskussioner synkroniseres i realtid mellem alle besøgende.

Live-demo

Du kan se Collab Chat i aktion på vores live demo-side.

Næste skridt

Nu hvor du har det grundlæggende til at fungere, kan du tilpasse udseende og adfærd i guiden Konfigurationsmuligheder. Se guiden om tekstmarkering for at forstå, hvordan tekstmarkering fungerer. Læs om styling og understøttelse af mørk tilstand i Tilpasningsguiden. For avancerede integrationer kan du udforske API-Referencen.

Frontend-biblioteker

Alle FastComments frontend-biblioteker (react, vue, angular, etc) har Collab Chat.

Eksempler Internal Link

Grundlæggende eksempel

Den enkleste måde at bruge Collab Chat på er at målrette et enkelt indholdsområde. Dette eksempel viser, hvordan du aktiverer tekstannoteringer på en artikel:

Grundlæggende Collab Chat-eksempel
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

Eksempel med tilpasset URL-id (pr. bogside, artikel osv.)

Som standard bruger Collab Chat sidens URL kombineret med elementstien og tekstområdet til at identificere samtaler. Du kan angive et tilpasset urlId for at få mere kontrol over, hvordan samtaler grupperes:

Collab Chat med tilpasset 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

Dette er nyttigt, hvis din URL-struktur ændrer sig, men du vil bevare de samme samtaler, eller hvis du vil dele de samme samtaleannoteringer på tværs af flere sider.

Eksempel med mørk tilstand

Hvis dit site har en mørk baggrund, aktiver understøttelse af mørk tilstand for at sikre, at chat-brugergrænsefladen ser korrekt ud:

Collab Chat med mørk tilstand
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

Eksempel med topbjælke deaktiveret

Som standard viser Collab Chat en topbjælke med antal brugere og antal diskussioner. Du kan deaktivere den:

Collab Chat with Top Bar Disabled
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

Eksempel med callback for kommentarantal

Du kan registrere, når kommentarer bliver tilføjet eller opdateret, ved hjælp af commentCountUpdated-callback'en:

Collab Chat med callback for kommentarantal
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

Eksempel med flere sektioner

Du kan initialisere Collab Chat på flere separate sektioner af din side. Hver sektion får sine egne uafhængige annoteringer:

Collab Chat on Multiple Sections
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 // Initialiser på intro-sektionen
15 FastCommentsCollabChat(document.getElementById('intro-section'), {
16 tenantId: 'demo',
17 urlId: 'my-article-intro'
18 });
19
20 // Initialiser på hovedsektionen
21 FastCommentsCollabChat(document.getElementById('main-section'), {
22 tenantId: 'demo',
23 urlId: 'my-article-main'
24 });
25</script>
26

Tilføjelse af live-kommentarer til onlinebøger Internal Link

Du kan initialisere Collab Chat pr. side, hvis ønsket, og have separate tråde pr. side, giv blot urlId-parameteren en værdi som book-one-page1. Denne konfiguration virker også for den normale kommenteringswidget.

Konfigurationsindstillinger Internal Link

Oversigt

FastComments Collab Chat udvider den standard FastComments-kommenteringswidget, så den arver alle konfigurationsmuligheder fra basis-widgeten, samtidig med at den tilføjer nogle få specifikke muligheder til tekstannoteringer.

Påkrævet konfiguration

tenantId

Dit FastComments Tenant ID er påkrævet. Du kan finde dette i dit FastComments dashboard.

Eksempel på konfiguration
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo'
4});
5

Specifikke muligheder for Collab Chat

urlId

Som standard genererer Collab Chat en unik identifikator for hver samtale baseret på side-URL'en, DOM-stien til elementet og det valgte tekstområde. Du kan tilsidesætte dette med en brugerdefineret urlId.

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

Dette er nyttigt, når din URL-struktur kan ændre sig, men du ønsker at bevare de samme samtaler, eller når du ønsker at dele annoteringer på tværs af flere sider.

topBarTarget

Styrer visningen af topbaren, som viser antal brugere og antal diskussioner. Sæt til null for helt at deaktivere topbaren, eller angiv et DOM-element for at rendere den i en specifik placering.

Eksempel på konfiguration
Copy Copy
1
2// Deaktiver topbaren
3FastCommentsCollabChat(element, {
4 tenantId: 'demo',
5 topBarTarget: null
6});
7
8// Vis topbaren i en brugerdefineret placering
9FastCommentsCollabChat(element, {
10 tenantId: 'demo',
11 topBarTarget: document.getElementById('custom-header')
12});
13

hasDarkBackground

Aktivér mørktilstand-styling, når din side har en mørk baggrund. Denne detektion er automatisk, men det kan være ønskeligt at tilsidesætte den.

Eksempel på konfiguration
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 hasDarkBackground: true
5});
6

commentCountUpdated

En callback-funktion, der kaldes, hver gang kommentartællingen ændres. Dette er nyttigt til at opdatere UI-elementer som badges eller sidetitler.

Eksempel på konfiguration
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

Arvede konfigurationsmuligheder

Da Collab Chat udvider den standard kommenteringswidget, kan du bruge enhver konfigurationsmulighed fra basis FastComments-widgeten. Her er nogle ofte anvendte muligheder:

locale

Indstil sproget for widgetens brugerflade. FastComments understøtter dusinvis af sprog.

Eksempel på konfiguration
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 locale: 'es' // Spansk
5});
6

readonly

Gør alle samtaler skrivebeskyttede. Brugere kan se eksisterende annoteringer, men kan ikke oprette nye eller svare.

Eksempel på konfiguration
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 readonly: true
5});
6

sso and simpleSSO

Integrer med dit autentificeringssystem ved hjælp af Single Sign-On.

Eksempel på konfiguration
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 sso: {
5 // SSO-konfiguration
6 }
7});
8

Se SSO-dokumentationen for fulde detaljer om godkendelsesmuligheder.

maxReplyDepth

Styr, hvor mange niveauer svar kan gå i dybden. Som standard sætter Collab Chat dette til 0, hvilket betyder, at alle kommentarer er flade (ingen indlejrede svar). Du kan ændre dette, hvis du ønsker trådede samtaler.

Eksempel på konfiguration
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 maxReplyDepth: 3 // Tillad 3 niveauer af indlejring
5});
6

Intern konfiguration

Disse muligheder sættes automatisk af Collab Chat og bør ikke tilsidesættes:

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.

Komplet eksempel

Her er et eksempel, der viser flere konfigurationsmuligheder samlet:

Eksempel på konfiguration
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 // Din SSO-konfiguration
13 },
14 maxReplyDepth: 1
15});
16

For en komplet liste over alle tilgængelige konfigurationsmuligheder arvet fra basis-widgeten, se hoveddokumentationen for FastComments-konfiguration.

Adfærd ved tekstmarkering Internal Link

How Text Selection Works

Når brugere vælger tekst inden for Collab Chat containeren, fanger widgeten det valg og giver dem mulighed for at starte en diskussion. Valget kan være så lille som et enkelt ord eller så stort som flere afsnit, der går på tværs af forskellige elementer.

Selection Delay

På stationære enheder er der en forsinkelse på 3,5 sekunder mellem tidspunktet, hvor en bruger vælger tekst, og hvor diskussionsprompten vises. Dette forhindrer, at brugergrænsefladen (UI) blinker, når brugere blot markerer tekst for at kopiere eller læse. På mobile enheder vises prompten øjeblikkeligt, da tekstvalg er mere bevidst på touchskærme.

Unique Conversation IDs

Hver samtale får et unikt urlId, der kombinerer side-URL'en, DOM-elementstien og det serialiserede tekstrækkevidde. Dette sikrer, at hvert tekstvalg opretter en særskilt samtale, som kan findes igen senere.

Hvis du angiver et brugerdefineret urlId i din konfiguration, kombineres det med elementstien og tekstrækkevidden for at skabe den endelige identifikator.

Visual Highlights

Når der findes en diskussion for et bestemt tekstvalg, får den tekst en visuel fremhævning. Fremhævningen er implementeret ved hjælp af baggrundsfarver og vises ved museover eller når det tilknyttede chatvindue er åbent.

Fremhævningssystemet fungerer ved at indpakke den valgte tekst i et specielt element, der kan styles. Denne tilgang sikrer, at fremhævninger forbliver nøjagtige, selv når den underliggende HTML-struktur er kompleks.

Chat Window Positioning

Når en bruger klikker på en fremhævning eller opretter en ny annotation, vises et chatvindue nær den valgte tekst. Widgeten beregner automatisk den bedste position for dette vindue baseret på tilgængelig visningsplads.

Positionssystemet bruger CSS-klasser som to-right, to-left, to-top og to-bottom til at angive, i hvilken retning chatvinduet skal udvides fra fremhævningen. På mobile enheder (skærme under 768px i bredden) vises chatvinduet altid i fuldskærm for bedre brugervenlighed.

Chat Window Dimensions

Chatvinduer er 410px brede på desktop med 20px afstand og en 16px visuel pil, der peger på den fremhævede tekst. Disse dimensioner er faste for at sikre konsekvent adfærd, men du kan tilpasse udseendet med CSS.

Cross-Element Selections

Brugere kan vælge tekst, der spænder over flere HTML-elementer, såsom at markere fra midten af et afsnit til starten af et andet. Range-serialiseringssystemet håndterer dette korrekt og vil fremhæve al den valgte tekst, selv på tværs af elementgrænser.

Browser Compatibility

Tekstudvælgelsessystemet bruger den standard window.getSelection() API, som understøttes i alle moderne browsere. For ældre versioner af Internet Explorer falder det tilbage til document.selection for kompatibilitet.

Selection Persistence

Når en samtale er oprettet for et tekstvalg, bevares den annotation, selv hvis siden genindlæses. Det serialiserede rækkevidde og DOM-stien gør det muligt for widgeten at gendanne fremhævninger på præcis samme sted, når brugere vender tilbage til siden.

Dette fungerer pålideligt, så længe dit sideindhold forbliver stabilt. Hvis du ændrer tekstindholdet eller omstrukturerer din HTML, kan eksisterende annotationer muligvis ikke længere være korrekt tilpasset teksten. Af denne grund er det bedst at undgå større indholdsændringer på sider med aktive annotationer eller overveje at migrere annotationer, når indholdsændringer er nødvendige.

Tilpasning Internal Link

Understøttelse af mørk tilstand

Dynamisk mørk tilstand

Hvis dit sites mørke tilstand styres ved at tilføje en .dark-klasse til body-elementet, vil Collab Chat UI automatisk respektere dette uden at kræve reinitialisering. Widget'ens stile er designet til at reagere på tilstedeværelsen af denne klasse.

Eksempel på CSS til mørk tilstand
Copy Copy
1
2/* Din CSS til mørk tilstand */
3body.dark {
4 background: #1a1a1a;
5 color: #ffffff;
6}
7

Brugerdefineret styling med CSS

Du kan tilpasse udseendet af markeringer, chatvinduer og andre elementer ved hjælp af CSS. Widget'en tilføjer specifikke klasser, som du kan målrette i dit stylesheet.

Tekstmarkeringer bruger FastComments' comment bubble-styling system, så eventuelle tilpasninger, du har anvendt på den standard kommenteringswidget, også vil påvirke Collab Chat.

Tilpasning af topbjælken

Topbjælken viser antallet af brugere online og antallet af diskussioner. Du kan tilpasse dens position ved at angive et brugerdefineret element som topBarTarget:

Brugerdefineret topbjælkeplacering
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: document.getElementById('my-custom-header')
5});
6

Eller deaktiver den helt ved at sætte den til null:

Deaktiver topbjælken
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 topBarTarget: null
5});
6

Mobiladfærd

På skærme under 768px bredde skifter Collab Chat automatisk til et mobiloptimeret layout. Chatvinduer vises fuldskærm i stedet for at flyde ved siden af teksten, og forsinkelsen ved markering fjernes for mere umiddelbar interaktion.

Denne opførsel er indbygget og kræver ingen konfiguration. Widget'en registrerer skærmstørrelsen automatisk og tilpasser sig derefter.

Udseende af chatvinduet

Chatvinduer er 410px brede på desktop med en 16px pil, der peger mod den fremhævede tekst. Vinduerne positionerer sig automatisk baseret på tilgængelig viewport-plads og bruger positioneringsklasser som to-right, to-left, to-top og to-bottom.

Du kan tilføje brugerdefineret CSS for at justere farver, skrifttyper, afstande eller andre visuelle egenskaber af disse vinduer. Chatvinduerne bruger samme komponentstruktur som den standard FastComments-widget, så de arver alle globale tilpasninger, du har anvendt.

Lokalisering

Collab Chat understøtter alle de samme lokaliseringsmuligheder som den standard FastComments-widget. Indstil locale-optionen for at vise UI-tekst på forskellige sprog:

Indstil lokalitet
Copy Copy
1
2FastCommentsCollabChat(element, {
3 tenantId: 'demo',
4 locale: 'es' // Spansk
5});
6

FastComments understøtter dusinvis af sprog. Locale-indstillingen påvirker al UI-tekst, inklusive prompts, knapper og pladsholdertekst.

Arvede tilpasningsmuligheder

Da Collab Chat udvider den standard kommenteringswidget, arver den alle tilpasningsmuligheder fra basiswidget'en. Dette inkluderer brugerdefinerede CSS-klasser, brugerdefinerede oversættelser, avatar-tilpasning, datoformattering og meget mere.

Se hoveddokumentationen for FastComments-tilpasning for den komplette liste over tilpasningsmuligheder, der er tilgængelige.

Arbejde med brugerdefinerede skrifttyper

Hvis dit site bruger brugerdefinerede skrifttyper, vil Collab Chat UI arve disse skrifttyper fra din sides CSS. Du kan være nødt til at oprette en widget-tilpasningsregel og @import eventuelle skrifttyper i den brugerdefinerede CSS i den regel, hvis du ønsker, at det flydende chatvindue skal bruge de samme skrifttyper.

Live-synkronisering Internal Link

Opdateringer i realtid

Collab Chat bruger WebSocket-forbindelser til at synkronisere alle samtaler i realtid på tværs af alle tilsluttede brugere. Når nogen opretter en ny annotering, tilføjer en kommentar eller sletter en diskussion, ser alle andre brugere, der ser samme side, opdateringen med det samme uden at genindlæse.

Hvordan WebSocket-synkronisering fungerer

Når du initialiserer Collab Chat, etablerer widgeten en WebSocket-forbindelse til FastComments-serverne. Denne forbindelse forbliver åben i brugerens session og lytter efter opdateringer relateret til den aktuelle side.

WebSocket-systemet bruger tre typer broadcast-beskeder for Collab Chat. new-text-chat-begivenheden udløses, når nogen opretter en ny annotering på siden. updated-text-chat-begivenheden udløses, når nogen opdaterer en eksisterende samtale. deleted-text-chat-begivenheden udløses, når nogen sletter en annotering.

Broadcast ID-system

For at forhindre ekko-effekter, hvor brugere ser deres egne handlinger blive broadcastet tilbage til dem, indeholder hver opdatering en unik broadcastId. Når en bruger opretter eller opdaterer en annotering, genererer deres klient en UUID for den handling. Når WebSocket'en broadcaster opdateringen tilbage til alle klienter, ignorerer den oprindelige klient opdateringen, fordi den matcher dens eget broadcastId.

Dette sikrer en glidende interaktion, hvor brugere ser deres ændringer med det samme i brugergrænsefladen uden at vente på tur/retur gennem serveren, samtidig med at alle andre brugere stadig modtager opdateringen.

Live-brugerantal

Topbaren viser antallet af brugere, der i øjeblikket ser siden. Dette antal opdateres i realtid, efterhånden som brugere slutter sig til og forlader siden. Brugerantallet leveres gennem den samme WebSocket-forbindelse og øges/formindskes automatisk baseret på forbindelses- og afbrydelsesbegivenheder.

Forbindelsesstabilitet

Hvis WebSocket-forbindelsen falder på grund af netværksproblemer eller servervedligeholdelse, forsøger widgeten automatisk at genoprette forbindelsen. I løbet af genoprettelsesperioden kan brugere stadig interagere med eksisterende annoteringer, men de vil ikke se realtidsopdateringer fra andre brugere, indtil forbindelsen er genoprettet.

Når forbindelsen er genoprettet, resynkroniserer widgeten for at sikre, at ingen opdateringer gik tabt. Dette sker transparent uden at kræve brugerintervention.

Båndbreddehensyn

WebSocket-beskeder er lette og indeholder kun de væsentlige oplysninger, der er nødvendige for at synkronisere tilstanden. Oprettelse af en ny annotering bruger typisk mindre end 1KB båndbredde. Systemet inkluderer også intelligent batching for at reducere beskedfrekvensen under perioder med høj aktivitet.

Dine brugermetrikker i FastComments-dashboardet sporer pubSubMessageCount og pubSubBandwidth, så du kan overvåge realtids-synkroniseringsaktivitet på tværs af dine sites.

Synkronisering på tværs af faner

Hvis en bruger har samme side åben i flere faner i browseren, vises opdateringer i én fane med det samme i de andre faner. Dette fungerer gennem den samme WebSocket-synkroniseringsmekanisme og kræver ingen ekstra konfiguration.

Sikkerhed

WebSocket-beskeder transmitters over sikre forbindelser (WSS) og inkluderer tenant-validering for at sikre, at brugere kun modtager opdateringer for samtaler, de har tilladelse til at se. Serveren validerer alle operationer, før de broadcastes, for at forhindre uautoriseret adgang eller manipulation.

API-reference Internal Link

API Oversigt

Collab Chat tilbyder tre REST API-endepunkter til at administrere tekstsamtaler programmatisk. Disse endepunkter giver dig mulighed for at hente, oprette og slette annotationer uden at bruge browser-widget'en.

Disse er offentlige endepunkter, der autentificerer brugere via browser-cookies. De bruger ikke API-nøgler. Brugere skal være logget ind på FastComments i deres browser for at få adgang til disse endepunkter.

Base URL

Alle Collab Chat API-endepunkter findes under:

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

Authentication

Disse endepunkter autentificerer brugere via browser-cookies. De bruger ikke API-nøgler. Brugere skal være logget ind på FastComments i deres browser for at få adgang til disse endepunkter.

Get All Conversations

Hent alle tekstsamtaler for en bestemt side.

Endpoint

GET-endepunkt
Copy Copy
1
2GET /comment-collab-chats/:tenantId?urlId=<urlId>
3

Parameters

tenantId (sti-parameter, påkrævet) er dit FastComments Tenant ID.

urlId (forespørgselsparameter, påkrævet) er sideidentifikatoren, du vil hente samtaler for.

Response

Svaret indeholder API-status, oplysninger om den aktuelle brugers session hvis autentificeret, et array af samtaler med deres ID'er, URL'er og tekstområder, en renset URL-identifikator, et flag der angiver om den aktuelle bruger er site-admin eller moderator, samt WebSocket-forbindelsesdetaljer til live-synkronisering inklusive tenantIdWS, urlIdWS, og userIdWS.

Example Request

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

Example Response

Eksempel på GET-svar
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

Create Conversation

Opret en ny tekstsamtale for et bestemt tekstudsnit.

Endpoint

POST-endepunkt
Copy Copy
1
2POST /comment-collab-chats/:tenantId
3

Parameters

tenantId (sti-parameter, påkrævet) er dit FastComments Tenant ID.

Request-body'en skal være JSON og indeholde disse påkrævede felter.

urlId (string, påkrævet) er den grundlæggende sideidentifikator.

urlIdWithRange (string, påkrævet) er URL'en kombineret med tekstområdet, for eksempel my-page:p:0:15,0:45{abc123}.

pageTitle (string, påkrævet) er sidens titel.

selector (string, påkrævet) er DOM-stien til elementet, der indeholder den valgte tekst.

range (string, påkrævet) er det serialiserede tekstområde i formatet startOffset:endOffset,startOffset:endOffset{checksum}.

createdFromCommentId (string, påkrævet) er ID'et på kommentaren, der initierede denne chat.

broadcastId (string, påkrævet) er en UUID til live-synkronisering for at forhindre echo-effekter.

Response

Svaret inkluderer API-status og ID'et på den nyskabte samtale.

Example Request

Eksempel på POST-anmodning
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

Example Response

Eksempel på POST-svar
Copy Copy
1
2{
3 "status": "success",
4 "createdChatId": "conv789"
5}
6

Delete Conversation

Slet en eksisterende tekstsamtale. Dette endepunkt kræver admin- eller moderatorrettigheder, eller samtalen skal være oprettet af den autentificerede bruger.

Endpoint

DELETE-endepunkt
Copy Copy
1
2DELETE /comment-collab-chats/:tenantId/:chatId
3

Parameters

tenantId (sti-parameter, påkrævet) er dit FastComments Tenant ID.

chatId (sti-parameter, påkrævet) er ID'et på samtalen, der skal slettes.

broadcastId (request body, påkrævet) er en UUID til live-synkronisering.

Example Request

Eksempel på DELETE-anmodning
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

Example Response

Eksempel på DELETE-svar
Copy Copy
1
2{
3 "status": "success"
4}
5

Rate Limiting

Disse endepunkter er underlagt FastComments' standard ratebegrænsning for API'et. Rate limit-middleware'en gælder per-tenant for at forhindre misbrug, samtidig med at normale brugsmønstre tillades.

Error Responses

Alle endepunkter returnerer standard HTTP-statuskoder. Et 400-svar angiver ugyldige anmodningsparametre. Et 401-svar betyder, at autentificeringen mislykkedes. Et 403-svar angiver utilstrækkelige rettigheder. Et 404-svar betyder, at samtalen ikke blev fundet. Et 429-svar angiver, at rategrænsen er overskredet.

Fejlsvar indeholder en JSON-krop med detaljer:

Eksempel på fejlrespons
Copy Copy
1
2{
3 "status": "error",
4 "message": "Conversation not found"
5}
6

Usage Tracking

Oprettelse af samtaler øger dit conversationCreateCount-brugsmetrik. Al WebSocket-synkroniseringsaktivitet øger pubSubMessageCount og pubSubBandwidth. Du kan overvåge disse metrics i dit FastComments-dashboard under brugsanalyse.

Har du spørgsmål?

Det var det for FastComments Collab Chat! Hvis du har spørgsmål, har brug for hjælp med implementeringen, eller har forslag til funktioner, så lad os det vide nedenfor eller kontakt vores supportteam.

For live-eksempler, se Govscent.org, som bruger Collab Chat i produktion.

Bidrag til denne guide