FastComments Image Chat ermöglicht interaktive Diskussionen über Bilder, indem Benutzer überall auf ein Bild klicken können, um Diskussionspunkte zu erstellen. Benutzer können auf bestimmte Bereiche von Bildern klicken, um Gespräche über diese Bereiche zu beginnen, wodurch visuelle Markierungen entstehen, die zeigen, wo die Diskussionen stattfinden.
Diese Funktion eignet sich hervorragend für Design-Feedback, Produktbewertungen, Lehrmaterialien mit Diagrammen, Fotogalerien mit Kommentaren und jedes Szenario, in dem Sie kontextbezogene Diskussionen an bestimmten Positionen im Bild verankern möchten.
Erste Schritte 
Anwendungsfälle
Image Chat eignet sich hervorragend für Design-Feedback, bei dem Teams bestimmte Elemente in Mockups oder Screenshots diskutieren müssen. Produktbewertungsseiten können Kunden ermöglichen, über spezifische Merkmale auf Produktfotos zu diskutieren. Bildungsplattformen können es zur Besprechung von Diagrammen, Karten oder wissenschaftlichen Bildern verwenden. Fotogalerien können mit standortbezogenen Kommentaren interaktiv werden. Immobilienseiten können Betrachtern erlauben, bestimmte Merkmale auf Objektfotos zu diskutieren.
Schnellstart
Der Einstieg in Image Chat ist einfach. Sie benötigen das FastComments Image Chat-Skript, ein Image-Element oder einen Container mit einem Bild und ein Konfigurationsobjekt mit Ihrer Tenant ID.
Installation
Fügen Sie das Image Chat-Skript zu Ihrer Seite hinzu:
Grundlegende Implementierung
Hier ist ein minimales Beispiel:
Run 
Ersetzen Sie 'demo' durch Ihre tatsächliche FastComments Tenant ID, falls diese nicht bereits korrekt ist. Sie finden sie in Ihrem FastComments-Dashboard.
Funktionsweise
Sobald Image Chat initialisiert ist, können Benutzer überall auf das Bild klicken. Wenn ein Klick erfolgt, erscheint an dieser Stelle ein sichtbarer quadratischer Marker und ein Chatfenster öffnet sich. Andere Benutzer können alle Marker sehen und darauf klicken, um diese Diskussionen anzusehen oder daran teilzunehmen. Alle Diskussionen werden in Echtzeit über alle Besucher hinweg synchronisiert.
Das Widget verwendet prozentbasierte Positionierung, sodass die Marker an der richtigen Stelle bleiben, selbst wenn sich die Bildgröße ändert oder das Bild auf unterschiedlichen Bildschirmgrößen angezeigt wird.
Live-Demo
Sie können Image Chat in Aktion auf unserer Live-Demo-Seite sehen.
Nächste Schritte
Nachdem Sie die Grundlagen eingerichtet haben, können Sie das Aussehen und Verhalten in der Anleitung zu Konfigurationsoptionen anpassen. Sehen Sie sich die Anleitung zum Responsive Design an, um zu verstehen, wie die prozentbasierte Positionierung funktioniert. Erfahren Sie mehr über Styling und Unterstützung für den Dunkelmodus in der Anpassungsanleitung. Für fortgeschrittene Integrationen sehen Sie sich das API-Referenzhandbuch an.
Frontend-Bibliotheken
Alle Frontend-Bibliotheken von FastComments (react, vue, angular usw.) bieten Image Chat.
Beispiele
Einfaches Beispiel
Die einfachste Möglichkeit, Image Chat zu verwenden, besteht darin, ein einzelnes Image-Element anzusprechen. Dieses Beispiel zeigt, wie man interaktive Diskussionen für ein Bild aktiviert:
Run Beispiel mit Container-Element
Sie können auch ein Container-Element übergeben, das ein Bild enthält:
Run Beispiel mit benutzerdefinierter URL-ID
Standardmäßig verwendet Image Chat die Seiten-URL kombiniert mit der Bildquelle und den Koordinaten, um Unterhaltungen zu identifizieren. Sie können eine benutzerdefinierte urlId angeben:
Run Das ist nützlich, wenn sich Ihre URL-Struktur ändert, Sie aber dieselben Unterhaltungen beibehalten möchten, oder wenn Sie dieselben Diskussionspunkte über mehrere Seiten teilen möchten.
Beispiel mit Dunkelmodus
Falls Ihre Seite einen dunklen Hintergrund hat und das Widget diesen nicht automatisch erkennt wie es sollte, können wir die Unterstützung für den Dunkelmodus manuell aktivieren:
Run Beispiel mit benutzerdefinierter Chat-Quadratgröße
Sie können die Größe der anklickbaren Quadrate, die auf dem Bild erscheinen, anpassen. Die Größe wird als Prozentsatz der Bildbreite angegeben:
Run Beispiel mit Kommentaranzahl-Callback
Verfolgen Sie, wann Kommentare hinzugefügt oder aktualisiert werden, mithilfe des commentCountUpdated-Callbacks:
Beispiel mit mehreren Bildern
Sie können Image Chat auf mehreren Bildern initialisieren. Jedes Bild hat seine eigenen unabhängigen Diskussionspunkte:
Run Konfigurationsoptionen
Überblick
FastComments Image Chat erweitert das standardmäßige FastComments-Kommentarmodul, sodass es alle Konfigurationsoptionen des Basis-Widgets übernimmt und zusätzlich einige speziell für Bildannotationen hinzufügt.
Erforderliche Konfiguration
tenantId
Ihre FastComments Tenant ID wird benötigt. Sie finden diese in Ihrem FastComments dashboard.
FastCommentsImageChat(imageElement, {
tenantId: 'demo'
});Image Chat-spezifische Optionen
urlId
Standardmäßig erzeugt Image Chat für jede Konversation eine eindeutige Kennung basierend auf der Seiten-URL, der Bildquelle und den X/Y-Koordinaten. Sie können dies mit einer benutzerdefinierten urlId überschreiben.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
urlId: 'my-custom-image-id'
});Das ist nützlich, wenn sich Ihre URL-Struktur ändern kann, Sie aber die gleichen Konversationen behalten möchten, oder wenn Sie Anmerkungen über mehrere Seiten hinweg teilen möchten.
chatSquarePercentage
Steuert die Größe der anklickbaren Chat-Markierungen als Prozentsatz der Bildbreite. Standardmäßig sind es 5 %, das heißt jede Markierung entspricht 5 % der Bildbreite.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 8 // Größere, besser sichtbare Marker
});Kleinere Werte erzeugen weniger aufdringliche Markierungen, die sich besser für detailreiche Bilder eignen. Größere Werte machen die Markierungen leichter sichtbar und anklickbar bei überladenen Bildern oder für Nutzer mobiler Geräte.
hasDarkBackground
Aktivieren Sie das Dark-Mode-Styling, wenn Ihre Seite einen dunklen Hintergrund hat.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});commentCountUpdated
Eine Callback-Funktion, die ausgelöst wird, sobald sich die Kommentaranzahl ändert. Nützlich, um UI-Elemente wie Badges oder Seitentitel zu aktualisieren.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
commentCountUpdated: function(count) {
console.log('Total comments:', count);
document.getElementById('badge').textContent = count;
}
});Vererbte Konfigurationsoptionen
Da Image Chat das Standard-Commenting-Widget erweitert, können Sie jede Konfigurationsoption des Basis-FastComments-Widgets verwenden. Hier sind einige häufig verwendete Optionen:
locale
Legt die Sprache für die Widget-Oberfläche fest. FastComments unterstützt Dutzende von Sprachen.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'es' // Spanisch
});readonly
Machen Sie alle Konversationen schreibgeschützt. Nutzer können vorhandene Markierungen und Diskussionen ansehen, aber keine neuen erstellen oder antworten.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
readonly: true
});sso and simpleSSO
Integrieren Sie Ihr Authentifizierungssystem mit Single Sign-On.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
sso: {
// SSO-Konfiguration
}
});Siehe die SSO-Dokumentation für vollständige Details zu den Authentifizierungsoptionen.
maxReplyDepth
Steuern Sie, wie tief Antworten verschachtelt sein dürfen. Standardmäßig setzt Image Chat dies auf 0, d.h. alle Kommentare sind flach (keine verschachtelten Antworten). Sie können dies ändern, wenn Sie verschachtelte Konversationen wünschen.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
maxReplyDepth: 3 // Erlaube 3 Verschachtelungsebenen
});Interne Konfiguration
Diese Optionen werden automatisch von Image Chat gesetzt und sollten nicht überschrieben werden:
Der productId wird für Image Chat automatisch auf 2 gesetzt. Die floating-chat Erweiterung wird automatisch geladen, um die Chatfenster-Funktionalität bereitzustellen. Das Widget erkennt automatisch mobile Geräte (Bildschirme mit weniger als 768px Breite) und passt die UI entsprechend mit Vollbild-Chatfenstern an.
Flexibilität des Ziel-Elements
Der erste Parameter von FastCommentsImageChat kann entweder ein <img>-Element direkt oder ein Containerelement mit einem darin befindlichen Bild sein:
// Direktes <img>-Element
FastCommentsImageChat(document.getElementById('my-image'), config);
// Container mit Bild darin
FastCommentsImageChat(document.querySelector('.image-wrapper'), config);Das Widget findet das Bild automatisch, wenn Sie ein Containerelement übergeben.
Vollständiges Beispiel
Hier ein Beispiel, das mehrere Konfigurationsoptionen zusammen zeigt:
FastCommentsImageChat(document.getElementById('product-image'), {
tenantId: 'demo',
urlId: 'product-v2-main',
chatSquarePercentage: 6,
hasDarkBackground: false,
locale: 'en',
commentCountUpdated: function(count) {
document.title = count > 0 ? `(${count}) Product Photo` : 'Product Photo';
},
sso: {
// Ihre SSO-Konfiguration
},
maxReplyDepth: 1
});Für eine vollständige Liste aller verfügbaren Konfigurationsoptionen, die vom Basis-Widget übernommen werden, siehe die Hauptdokumentation zur FastComments-Konfiguration.
Responsives Design
Prozentbasierte Positionierung
Image Chat verwendet prozentbasierte Koordinaten statt Pixelkoordinaten, um Chat-Markierungen auf Bildern zu positionieren. Wenn ein Benutzer auf ein Bild klickt, wandelt das Widget die Pixelkoordinaten des Klicks in Prozentsätze der Bildbreite und -höhe um. Dieser Ansatz stellt sicher, dass die Markierungen an der richtigen Stelle bleiben, unabhängig davon, wie das Bild angezeigt wird.
Zum Beispiel: Wenn ein Benutzer 250 Pixel vom linken Rand eines 1000px breiten Bildes klickt, speichert das Widget dies als 25% vom linken Rand. Wenn ein anderer Benutzer dasselbe Bild auf einem Mobilgerät mit 500px Breite betrachtet, erscheint die Markierung 125 Pixel vom linken Rand entfernt, was immer noch 25% der Breite entspricht.
Vorteile für responsive Layouts
Dieses Prozent-System ermöglicht, dass Image Chat auf allen Gerätegrößen und Ausrichtungen nahtlos funktioniert. Ihre Bilder können je nach Bildschirmbreite, CSS-Regeln oder Containerbeschränkungen in unterschiedlichen Größen dargestellt werden, aber die Markierungen richten sich immer korrekt an den vorgesehenen Positionen aus.
Benutzer an Desktop-Computern mit großen Monitoren sehen Markierungen an denselben relativen Positionen wie Benutzer auf Smartphones mit kleinen Bildschirmen. Die Markierungen skalieren proportional mit dem Bild selbst.
Bildskalierung und Seitenverhältnis
Solange Ihr Bild sein Seitenverhältnis beim Skalieren beibehält (was das Standardverhalten des Browsers ist), bleiben die prozentbasierten Markierungen perfekt ausgerichtet. Das Widget geht davon aus, dass Bilder proportional skaliert werden, und berechnet die Positionen basierend auf dieser Annahme.
Wenn Sie CSS anwenden, das das Seitenverhältnis des Bildes verzerrt (wie die Verwendung von object-fit: cover mit spezifischen Abmessungen), können die Markierungspositionen möglicherweise nicht korrekt ausgerichtet sein. Für beste Ergebnisse lassen Sie Bilder natürlich skalieren oder verwenden Sie object-fit: contain, um das Seitenverhältnis beizubehalten.
Größe der Chat-Quadrate
Die visuelle Größe der Chat-Markierungen ist ebenfalls prozentbasiert. Die Konfigurationsoption chatSquarePercentage hat standardmäßig 5% eingestellt, was bedeutet, dass jedes Quadrat 5% der Bildbreite ausmacht. Dies sorgt für ein gleichmäßiges visuelles Gewicht bei unterschiedlichen Bildgrößen.
Bei einem 1000px breiten Bild mit der Standard-Einstellung von 5% sind die Markierungen 50px quadratisch. Bei einem 500px breiten Bild sind dieselben Markierungen 25px quadratisch. Sie bleiben proportional zur Bildgröße.
Verhalten auf Mobilgeräten
Bei Bildschirmen unter 768px Breite wechselt Image Chat zu einem mobil-optimierten Layout. Chat-Fenster öffnen sich im Vollbildmodus statt neben der Markierung zu schweben. Dies bietet eine bessere Benutzerfreundlichkeit auf kleinen Bildschirmen, wo schwebende Fenster zu viel vom Bild verdecken würden.
Die Markierungen selbst bleiben sichtbar und an ihren prozentbasierten Positionen anklickbar. Benutzer können weiterhin sehen, wo sich alle Diskussionen befinden, und Markierungen antippen, um die Vollbild-Chat-Oberfläche zu öffnen.
Dynamisches Laden von Bildern
Das prozentbasierte System funktioniert korrekt, selbst wenn Bilder asynchron geladen werden oder sich nach dem Laden der Seite in der Größe ändern. Das Widget überwacht das Bildelement und berechnet die Markierungspositionen neu, wann immer sich die Bildabmessungen ändern.
Wenn Sie Bilder verzögert laden (lazy-loading) oder responsive Bilder mit unterschiedlichen Größen bei verschiedenen Breakpoints implementieren, passen sich die Markierungen automatisch an, wenn sich die Bildgröße ändert.
Konsistenz über Geräte hinweg
Da Koordinaten in der Datenbank als Prozentwerte gespeichert werden, erscheint eine Diskussion, die auf einem Desktop-Computer erstellt wurde, an exakt derselben relativen Position, wenn sie auf einem Tablet oder Telefon angezeigt wird. Benutzer können geräteübergreifend zusammenarbeiten, ohne Positionsinkonsistenzen.
Dies funktioniert bidirektional. Eine Diskussion, die durch Antippen einer bestimmten Stelle auf einem Mobilgerät erstellt wurde, erscheint an derselben relativen Position, wenn sie auf einem großen Desktop-Monitor betrachtet wird.
Betrachtung des Viewports
Das Widget berechnet die Prozentsätze relativ zum Bildelement selbst, nicht zum Viewport. Das bedeutet, dass Scrollen auf der Seite oder das Ändern der Browserfenstergröße die Markierungspositionen nicht beeinflusst. Markierungen bleiben unabhängig von Viewport-Änderungen an ihren Positionen auf dem Bild verankert.
Zukunftssicherheit von Inhalten
Der prozentbasierte Ansatz macht Ihre Bilddiskussionen widerstandsfähig gegenüber Änderungen im Layout, Design oder Gerätespektrum. Mit dem Aufkommen neuer Bildschirmgrößen und Geräte werden die vorhandenen Diskussionen weiterhin korrekt angezeigt, ohne dass Aktualisierungen oder Migrationen erforderlich sind.
Anpassung
Dark-Mode-Unterstützung
Image Chat enthält eingebaute Unterstützung für den Dark-Mode. Wenn Sie hasDarkBackground: true in Ihrer Konfiguration setzen, passen sich die Chat-Fenster und UI-Elemente automatisch an dunkle Hintergründe an.
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
hasDarkBackground: true
});Die Dark-Mode-Stylingregeln gelten für Chat-Fenster, Marker-Quadrate und alle interaktiven Elemente. Wenn Ihre Seite einen Dark-Mode-Schalter hat, können Sie das Widget beim Moduswechsel neu initialisieren oder die unten beschriebene Body-Class-Methode verwenden.
Dynamischer Dark-Mode
Wenn der Dark-Mode Ihrer Seite durch Hinzufügen einer .dark-Klasse zum Body-Element gesteuert wird, respektiert die Image Chat-Oberfläche dies automatisch ohne erneute Initialisierung. Die Styles des Widgets sind darauf ausgelegt, auf das Vorhandensein dieser Klasse zu reagieren.
/* Ihr Dark-Mode-CSS */
body.dark {
background: #1a1a1a;
color: #ffffff;
}Benutzerdefiniertes Styling mit CSS
Sie können das Aussehen von Markern, Chat-Fenstern und anderen Elementen mit CSS anpassen. Das Widget fügt bestimmte Klassen hinzu, die Sie in Ihrem Stylesheet ansprechen können.
Die Chat-Quadrate und -Fenster verwenden das FastComments-Comment-Bubble-Styling-System, sodass alle Anpassungen, die Sie am Standard-Kommentar-Widget vorgenommen haben, auch Image Chat beeinflussen.
Größe der Chat-Quadrate
Die Option chatSquarePercentage steuert die Größe der klickbaren Marker. Der Standardwert ist 5% der Bildbreite:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
chatSquarePercentage: 7 // Größere, besser sichtbare Quadrate
});Kleinere Werte erzeugen subtilere Marker, die sich ins Bild einfügen. Größere Werte machen die Marker prominenter und leichter anklickbar, besonders auf Mobilgeräten oder aus Gründen der Barrierefreiheit.
Mobilverhalten
Auf Bildschirmen unter 768px Breite schaltet Image Chat automatisch auf ein mobiloptimiertes Layout um. Chat-Fenster erscheinen im Vollbild statt neben den Markern zu schweben, was die Bedienbarkeit auf kleinen Bildschirmen verbessert.
Die Marker bleiben an ihren responsiven Positionen im Bild sichtbar. Benutzer können einen Marker antippen, um die Vollbild-Chat-Oberfläche zu öffnen. Dieses Verhalten ist eingebaut und erfordert keine Konfiguration.
Aussehen des Chat-Fensters
Chat-Fenster sind auf Desktop 300px breit und haben einen 16px-Pfeil, der auf den Marker zeigt. Die Fenster positionieren sich automatisch basierend auf dem verfügbaren Viewport-Platz und verwenden Positionierungsklassen wie to-right, to-left, to-top und to-bottom.
Sie können benutzerliches CSS hinzufügen, um Farben, Schriftarten, Abstände oder andere visuelle Eigenschaften dieser Fenster anzupassen. Die Chat-Fenster verwenden dieselbe Komponentenstruktur wie das Standard-FastComments-Widget, daher erben sie alle globalen Anpassungen, die Sie vorgenommen haben.
Lazy-Initialisierung
Chat-Fenster initialisieren sich bei Desktop-Benutzern beim Hover oder sofort, wenn sie erstellt werden. Dadurch wird die anfängliche Ladebelastung reduziert, da die Chat-Oberfläche nur gerendert wird, wenn Benutzer tatsächlich mit einem Marker interagieren.
Die Lazy-Initialisierung geschieht transparent. Benutzer bemerken keine Verzögerung, aber der Browser muss nicht Dutzende von versteckten Chat-Fenstern rendern, wenn Sie viele Marker auf einem Bild haben.
Lokalisierung
Image Chat unterstützt alle dieselben Lokalisierungsoptionen wie das Standard-FastComments-Widget. Setzen Sie die Option locale, um UI-Text in verschiedenen Sprachen anzuzeigen:
FastCommentsImageChat(imageElement, {
tenantId: 'demo',
locale: 'fr' // Französisch
});FastComments unterstützt Dutzende von Sprachen. Die Locale-Einstellung beeinflusst alle UI-Texte einschließlich Eingabeaufforderungen, Buttons und Platzhaltertexte.
Vererbte Anpassungsoptionen
Da Image Chat das Standard-Kommentar-Widget erweitert, erbt es alle Anpassungsoptionen des Basis-Widgets. Dies umfasst benutzerdefinierte CSS-Klassen, benutzerdefinierte Übersetzungen, Avatar-Anpassungen, Datumsformatierung und vieles mehr.
Siehe die Hauptdokumentation zu FastComments für die vollständige Liste der verfügbaren Anpassungsoptionen.
Arbeiten mit benutzerdefinierten Schriftarten
Wenn Ihre Seite benutzerdefinierte Schriftarten verwendet, übernimmt die Image Chat-Oberfläche diese Schriftarten aus dem CSS Ihrer Seite. Die Chat-Fenster werden innerhalb des DOM Ihrer Seite gerendert und respektieren Ihre bestehende Typografie-Einstellungen.
Für beste Ergebnisse stellen Sie sicher, dass Ihre benutzerdefinierten Schriftarten geladen sind, bevor Sie Image Chat initialisieren, oder akzeptieren Sie, dass es einen kurzen Flash ungstilisierter Schriftarten geben kann, während die Schriftarten geladen werden.
Visuelles Design der Marker
Die Quadrat-Markierungen haben ein dezentes visuelles Design, das sie bemerkbar macht, ohne das Bild zu überlagern. Sie können deren Aussehen mit CSS anpassen, wenn Sie eine andere visuelle Behandlung wünschen.
Die Marker enthalten Hover-Zustände, die Feedback geben, wenn Benutzer mit der Maus darüber fahren. Auf Touch-Geräten liefert die Tippen-Interaktion sofortiges Feedback, indem das Chat-Fenster geöffnet wird.
Live-Synchronisierung
Echtzeit-Aktualisierungen
Image Chat verwendet WebSocket-Verbindungen, um alle Unterhaltungen in Echtzeit über alle verbundenen Nutzer hinweg zu synchronisieren. Wenn jemand einen neuen Marker erstellt, einen Kommentar hinzufügt oder eine Diskussion löscht, sehen alle anderen Nutzer, die dasselbe Bild anzeigen, die Aktualisierung sofort, ohne die Seite neu zu laden.
Wie die WebSocket-Synchronisation funktioniert
Wenn Sie Image Chat initialisieren, stellt das Widget eine WebSocket-Verbindung zu den FastComments-Servern her. Diese Verbindung bleibt für die Dauer der Sitzung des Nutzers offen und hört auf Updates, die das aktuelle Bild betreffen.
Das WebSocket-System verwendet drei Arten von Broadcast-Nachrichten für Image Chat. Das Ereignis new-image-chat wird ausgelöst, wenn jemand einen neuen Marker auf dem Bild erstellt. Das Ereignis image-chat-updated wird ausgelöst, wenn jemand eine bestehende Konversation aktualisiert. Das Ereignis deleted-image-chat wird ausgelöst, wenn jemand einen Marker löscht.
Broadcast-ID-System
Um Echo-Effekte zu verhindern, bei denen Nutzer ihre eigenen Aktionen als Broadcast zurücksehen, enthält jedes Update eine eindeutige broadcastId. Wenn ein Nutzer einen Marker erstellt oder aktualisiert, generiert sein Client eine UUID für diesen Vorgang. Wenn das WebSocket-Update an alle Clients zurückgesendet wird, ignoriert der ursächliche Client das Update, weil es mit seiner eigenen broadcastId übereinstimmt.
Das stellt sicher, dass Nutzer ihre Änderungen sofort in der Benutzeroberfläche sehen, ohne auf den Hin- und Rückweg über den Server warten zu müssen, während gleichzeitig alle anderen Nutzer das Update erhalten.
Verbindungsresilienz
Falls die WebSocket-Verbindung aufgrund von Netzwerkproblemen oder Serverwartung unterbrochen wird, versucht das Widget automatisch, die Verbindung wiederherzustellen. Während der Wiederverbindungsphase können Nutzer weiterhin mit bestehenden Markern interagieren, sehen jedoch keine Echtzeit-Updates von anderen Nutzern, bis die Verbindung wiederhergestellt ist.
Sobald die Verbindung wieder besteht, synchronisiert das Widget erneut, um sicherzustellen, dass keine Updates verpasst wurden. Dies geschieht transparent, ohne dass der Nutzer eingreifen muss.
Bandbreitenüberlegungen
WebSocket-Nachrichten sind schlank und enthalten nur die erforderlichen Informationen zur Synchronisation des Zustands. Das Erstellen eines neuen Markers benötigt typischerweise weniger als 1 KB Bandbreite. Das System beinhaltet zudem intelligente Bündelung, um die Nachrichtenfrequenz in Zeiten hoher Aktivität zu reduzieren.
Ihre Nutzungsmetriken im FastComments-Dashboard verfolgen pubSubMessageCount und pubSubBandwidth, damit Sie die Echtzeit-Synchronisationsaktivität auf Ihren Seiten überwachen können.
Synchronisation über mehrere Tabs
Wenn ein Nutzer dieselbe Seite in mehreren Browser-Tabs geöffnet hat, erscheinen Aktualisierungen in einem Tab sofort in den anderen Tabs. Dies funktioniert über denselben WebSocket-Synchronisationsmechanismus und erfordert keine zusätzliche Konfiguration.
Nutzer können Ihre Seite gleichzeitig auf mehreren Geräten geöffnet haben, und alle bleiben synchron. Ein auf einem Desktop-Computer erstellter Marker erscheint sofort auf dem Tablet des Nutzers, wenn beide Geräte dasselbe Bild anzeigen.
Sicherheit
WebSocket-Nachrichten werden über sichere Verbindungen (WSS) übertragen und enthalten Tenant-Validierung, um sicherzustellen, dass Nutzer nur Updates für Konversationen erhalten, die sie sehen dürfen. Der Server validiert alle Vorgänge, bevor er sie broadcastet, um unbefugten Zugriff oder Manipulation zu verhindern.
Offline-Verhalten
Wenn Nutzer komplett offline sind, können sie weiterhin bestehende Marker ansehen, aber keine neuen erstellen oder Updates von anderen sehen. Das Widget erkennt den Offline-Status und zeigt entsprechende Hinweise an.
Wenn ein Nutzer versucht, einen Marker offline zu erstellen und dann wieder online kommt, schlägt die Operation fehl, anstatt in die Warteschlange gestellt zu werden, um Datenkonsistenz zu gewährleisten. Nutzer sollten die Aktion erneut versuchen, sobald ihre Verbindung wiederhergestellt ist.
Auswirkungen auf die Leistung
Die WebSocket-Verbindung hat nur minimale Auswirkungen auf die Leistung. Die Verbindung bleibt inaktiv, wenn keine Updates stattfinden, und verarbeitet nur Nachrichten, wenn Aktivität auftritt. Bei einem typischen Bild mit moderater Marker-Aktivität verwendet das WebSocket weniger CPU als das Rendern des Bildes selbst.
Bei Seiten mit Hunderten gleichzeitiger Nutzer und hoher Marker-Erstellungsaktivität skaliert das System horizontal, um die Leistung aufrechtzuerhalten, ohne einzelne Client-Verbindungen zu beeinträchtigen.
Kollaborative Anwendungsfälle
Die Echtzeit-Synchronisation macht Image Chat besonders leistungsfähig für kollaborative Arbeitsabläufe. Design-Teams können Mockups gemeinsam überprüfen, wobei alle Beteiligten die Markerplatzierungen in Echtzeit sehen. Kundensupport-Teams können gemeinsam Screenshots annotieren, um Probleme zu identifizieren. Lerngruppen können Diagramme diskutieren, wobei alle Teilnehmer die Marker anderer sehen, sobald sie erstellt werden.
Das unmittelbare Feedback schafft ein ansprechenderes und produktiveres Zusammenarbeitserlebnis im Vergleich zu herkömmlichen Kommentarsystemen, bei denen Nutzer aktualisieren müssen, um Änderungen zu sehen.
API-Referenz
API-Übersicht
Image Chat stellt drei REST-API-Endpunkte bereit, um Bild-Konversationen programmgesteuert zu verwalten. Über diese Endpunkte können Sie Marker abrufen, erstellen und löschen, ohne das Browser-Widget zu verwenden.
Alle API-Endpunkte erfordern eine Authentifizierung und folgen den Standardmustern der FastComments-API. Dies sind öffentliche Endpunkte, die sich über Browser-Cookies authentifizieren und nicht über API-Schlüssel.
Basis-URL
Alle Image-Chat-API-Endpunkte befinden sich unter:
https://fastcomments.com/comment-image-chatsAuthentifizierung
Diese Endpunkte authentifizieren Benutzer über Browser-Cookies. Sie verwenden keine API-Schlüssel. Benutzer müssen in ihrem Browser bei FastComments angemeldet sein, um auf diese Endpunkte zugreifen zu können.
Alle Konversationen abrufen
Alle Bild-Konversationen für ein bestimmtes Bild abrufen.
Endpoint
GET /comment-image-chats/:tenantId?urlId=<urlId>Parameters
tenantId (Pfadparameter, erforderlich) ist Ihre FastComments Tenant-ID.
urlId (Query-Parameter, erforderlich) ist die Bildkennung, für die Sie Konversationen abrufen möchten.
Response
Die Antwort enthält den API-Status, Informationen zur aktuellen Benutzersitzung (falls authentifiziert), ein Array von Konversationen mit ihren IDs, URLs und X/Y-Koordinaten, einen bereinigten URL-Identifier, ein Flag, das angibt, ob der aktuelle Benutzer Site-Admin oder Moderator ist, sowie WebSocket-Verbindungsdetails für die Live-Synchronisation einschließlich tenantIdWS, urlIdWS und userIdWS.
Example Request
curl "https://fastcomments.com/comment-image-chats/demo?urlId=my-product-image" \
--cookie "your-session-cookie"Example Response
{
"status": "success",
"user": {
"id": "user123",
"username": "john_doe"
},
"conversations": [
{
"_id": "conv123",
"urlId": "my-product-image:/images/product.jpg:25:30",
"x": 25.5,
"y": 30.2
},
{
"_id": "conv456",
"urlId": "my-product-image:/images/product.jpg:60:45",
"x": 60.8,
"y": 45.1
}
],
"urlIdClean": "my-product-image",
"isSiteAdmin": false,
"tenantIdWS": "demo",
"urlIdWS": "my-product-image",
"userIdWS": "user123"
}Konversation erstellen
Erstellen Sie eine neue Bild-Konversation für eine bestimmte Position auf einem Bild.
Endpoint
POST /comment-image-chats/:tenantIdParameters
tenantId (Pfadparameter, erforderlich) ist Ihre FastComments Tenant-ID.
Der Request-Body muss JSON sein und die folgenden erforderlichen Felder enthalten.
urlId (string, erforderlich) ist die Basisseitenkennung.
windowUrlId (string, erforderlich) ist die URL kombiniert mit der Bildquelle und den Koordinaten, zum Beispiel my-page:/images/photo.jpg:25.5:30.2.
pageTitle (string, erforderlich) ist der Titel der Seite.
src (string, erforderlich) ist die Bildquelle (URL).
x (number, erforderlich) ist die X-Koordinate als Prozentsatz (0–100).
y (number, erforderlich) ist die Y-Koordinate als Prozentsatz (0–100).
createdFromCommentId (string, erforderlich) ist die ID des Kommentars, der diesen Chat initiiert hat.
broadcastId (string, erforderlich) ist eine UUID für die Live-Synchronisation, um Echo-Effekte zu verhindern.
Response
Die Antwort enthält den API-Status und die ID der neu erstellten Konversation.
Example Request
curl -X POST "https://fastcomments.com/comment-image-chats/demo" \
--cookie "your-session-cookie" \
-H "Content-Type: application/json" \
-d '{
"urlId": "my-product-image",
"windowUrlId": "my-product-image:/images/product.jpg:25.5:30.2",
"pageTitle": "Product Gallery",
"src": "/images/product.jpg",
"x": 25.5,
"y": 30.2,
"createdFromCommentId": "comment789",
"broadcastId": "550e8400-e29b-41d4-a716-446655440000"
}'Example Response
{
"status": "success",
"createdChatId": "conv789"
}Konversation löschen
Löscht eine vorhandene Bild-Konversation. Dieser Endpunkt erfordert Admin- oder Moderatorrechte, oder die Konversation muss vom authentifizierten Benutzer erstellt worden sein.
Endpoint
DELETE /comment-image-chats/:tenantId/:chatIdParameters
tenantId (Pfadparameter, erforderlich) ist Ihre FastComments Tenant-ID.
chatId (Pfadparameter, erforderlich) ist die ID der zu löschenden Konversation.
broadcastId (Request-Body, erforderlich) ist eine UUID für die Live-Synchronisation.
Example Request
curl -X DELETE "https://fastcomments.com/comment-image-chats/demo/conv789" \
--cookie "your-session-cookie" \
-H "Content-Type: application/json" \
-d '{
"broadcastId": "550e8400-e29b-41d4-a716-446655440001"
}'Example Response
{
"status": "success"
}Koordinatensystem
Die X- und Y-Koordinaten werden als Prozentsätze der Bilddimensionen gespeichert. X repräsentiert die horizontale Position vom linken Rand (0 = linker Rand, 100 = rechter Rand). Y repräsentiert die vertikale Position vom oberen Rand (0 = oberer Rand, 100 = unterer Rand).
Diese Prozentwerte können Dezimalstellen für Genauigkeit enthalten. Zum Beispiel bedeutet x: 25.5, dass es 25,5 % vom linken Rand des Bildes entfernt ist.
Ratenbegrenzung
Diese Endpunkte unterliegen der standardmäßigen FastComments-API-Ratenbegrenzung. Die Rate-Limit-Middleware wird pro Tenant angewendet, um Missbrauch zu verhindern und gleichzeitig normale Nutzungsmuster zuzulassen.
Fehlerantworten
Alle Endpunkte geben standardmäßige HTTP-Statuscodes zurück. Eine 400-Antwort weist auf ungültige Anfrageparameter hin. Eine 401-Antwort bedeutet, dass die Authentifizierung fehlgeschlagen ist. Eine 403-Antwort zeigt unzureichende Berechtigungen an. Eine 404-Antwort bedeutet, dass die Konversation nicht gefunden wurde. Eine 429-Antwort zeigt an, dass das Rate-Limit überschritten wurde.
Fehlerantworten enthalten einen JSON-Body mit Details:
{
"status": "error",
"message": "Conversation not found"
}Nutzungsverfolgung
Das Erstellen von Konversationen erhöht Ihre Nutzungsmetrik conversationCreateCount. Alle WebSocket-Synchronisationsaktivitäten erhöhen pubSubMessageCount und pubSubBandwidth. Sie können diese Metriken in Ihrem FastComments-Dashboard unter den Nutzungs-Analytics überwachen.
Noch Fragen?
Das war's für FastComments Image Chat! Wenn Sie Fragen haben, Hilfe bei der Implementierung benötigen oder Funktionsvorschläge haben, lassen Sie es uns bitte unten wissen oder wenden Sie sich an unser Support-Team.
Sehen Sie sich die Live-Demo auf unserer Demo-Seite an, um Image Chat in Aktion zu sehen.