Czat z obrazami

Pozycjonowanie oparte na procentach

Image Chat używa współrzędnych procentowych zamiast współrzędnych pikselowych do pozycjonowania znaczników czatu na obrazach. Gdy użytkownik kliknie obraz, widżet konwertuje współrzędne pikselowe kliknięcia na procenty szerokości i wysokości obrazu. To podejście zapewnia, że znaczniki pozostają we właściwym miejscu niezależnie od tego, jak obraz jest wyświetlany.

Na przykład, jeśli użytkownik kliknie 250 pikseli od lewej krawędzi obrazu o szerokości 1000px, widżet zapisuje to jako 25% od lewej. Gdy inny użytkownik wyświetli ten sam obraz o szerokości 500px na urządzeniu mobilnym, znacznik pojawi się 125 pikseli od lewej, co nadal stanowi 25% szerokości.

Korzyści dla responsywnych układów

Ten system procentowy sprawia, że Image Chat działa płynnie na wszystkich rozmiarach i orientacjach urządzeń. Twoje obrazy mogą być wyświetlane w różnych rozmiarach w zależności od szerokości ekranu, reguł CSS lub ograniczeń kontenera, ale znaczniki zawsze będą poprawnie wyrównane z zamierzonymi lokalizacjami.

Użytkownicy na komputerach stacjonarnych z dużymi monitorami widzą znaczniki w tych samych pozycjach względnych co użytkownicy smartfonów z małymi ekranami. Znaczniki skalują się proporcjonalnie do samego obrazu.

Skalowanie obrazu i proporcje

Dopóki Twój obraz zachowuje swoje proporcje podczas skalowania (co jest domyślnym zachowaniem przeglądarki), znaczniki procentowe pozostaną idealnie wyrównane. Widżet zakłada, że obrazy skalują się proporcjonalnie i oblicza pozycje na podstawie tego założenia.

Jeśli zastosujesz CSS, który zniekształca proporcje obrazu (np. używając object-fit: cover z określonymi wymiarami), pozycje znaczników mogą nie być poprawnie wyrównane. Dla najlepszych rezultatów pozwól obrazom skalować się naturalnie lub użyj object-fit: contain, aby zachować proporcje.

Rozmiar kwadratów czatu

Wizualny rozmiar znaczników czatu również jest oparty na procentach. Opcja konfiguracji chatSquarePercentage ma domyślnie wartość 5%, co oznacza, że każdy kwadrat stanowi 5% szerokości obrazu. Zapewnia to spójną wagę wizualną w różnych rozmiarach obrazów.

Na obrazie o szerokości 1000px z domyślnym ustawieniem 5% znaczniki mają 50px kwadratu. Na obrazie o szerokości 500px te same znaczniki mają 25px kwadratu. Pozostają proporcjonalne do rozmiaru obrazu.

Zachowanie na urządzeniach mobilnych

Na ekranach o szerokości poniżej 768px Image Chat przełącza się na układ zoptymalizowany pod urządzenia mobilne. Okna czatu otwierają się na pełnym ekranie zamiast unosić się obok znacznika. Zapewnia to lepszą użyteczność na małych ekranach, gdzie pływające okna zasłaniałyby zbyt dużą część obrazu.

Same znaczniki pozostają widoczne i klikalne na swoich pozycjach procentowych. Użytkownicy nadal mogą zobaczyć, gdzie znajdują się wszystkie dyskusje, i dotknąć znaczników, aby otworzyć pełnoekranowy interfejs czatu.

Dynamiczne ładowanie obrazów

System procentowy działa poprawnie nawet wtedy, gdy obrazy ładują się asynchronicznie lub zmieniają rozmiar po załadowaniu strony. Widżet monitoruje element obrazu i przelicza pozycje znaczników za każdym razem, gdy wymiary obrazu się zmienią.

Jeśli stosujesz leniwe ładowanie obrazów lub implementujesz responsywne obrazy o różnych rozmiarach w różnych breakpointach, znaczniki automatycznie dostosują się po zmianie rozmiaru obrazu.

Spójność między urządzeniami

Ponieważ współrzędne są przechowywane jako procenty w bazie danych, dyskusja utworzona na komputerze stacjonarnym pojawia się w dokładnie tej samej pozycji względnej podczas wyświetlania na tablecie lub telefonie. Użytkownicy mogą współpracować między urządzeniami bez żadnych niespójności w pozycjonowaniu.

Działa to dwukierunkowo. Dyskusja utworzona przez dotknięcie konkretnego miejsca na urządzeniu mobilnym pojawia się w tej samej pozycji względnej podczas wyświetlania na dużym monitorze komputera stacjonarnego.

Uwagi dotyczące viewportu

Widżet oblicza procenty względem samego elementu obrazu, a nie viewportu. Oznacza to, że przewijanie strony lub zmiana rozmiaru okna przeglądarki nie wpływa na pozycje znaczników. Znaczniki pozostają zakotwiczone w swoich lokalizacjach na obrazie niezależnie od zmian viewportu.

Przyszłościowa zawartość

Podejście oparte na procentach sprawia, że Twoje dyskusje na obrazach są odporne na zmiany układu, designu lub ekosystemu urządzeń. Gdy pojawią się nowe rozmiary ekranów i urządzenia, istniejące dyskusje będą nadal wyświetlać się poprawnie bez konieczności jakichkolwiek aktualizacji lub migracji.

Obsługa trybu ciemnego

Image Chat zawiera wbudowaną obsługę trybu ciemnego. Gdy ustawisz hasDarkBackground: true w swojej konfiguracji, okna czatu i elementy interfejsu automatycznie dostosują się do ciemnych tł.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    hasDarkBackground: true
});

Stylizacja trybu ciemnego dotyczy okien czatu, kwadratowych znaczników i wszystkich elementów interaktywnych. Jeśli Twoja witryna ma przełącznik trybu ciemnego, możesz ponownie zainicjować widżet po zmianie trybu lub użyć podejścia z klasą body opisanego poniżej.

Dynamiczny tryb ciemny

Jeśli tryb ciemny Twojej witryny jest kontrolowany przez dodanie klasy .dark do elementu body, interfejs Image Chat automatycznie to uwzględni bez konieczności ponownej inicjalizacji. Style widżetu zostały zaprojektowane tak, aby reagować na obecność tej klasy.

/* Twoje CSS trybu ciemnego */
body.dark {
    background: #1a1a1a;
    color: #ffffff;
}

Niestandardowa stylizacja za pomocą CSS

Możesz dostosować wygląd znaczników, okien czatu i innych elementów za pomocą CSS. Widżet dodaje określone klasy, które możesz wykorzystać w swoim arkuszu stylów.

Kwadraty i okna czatu korzystają z systemu stylizacji dymków komentarzy FastComments, więc wszelkie dostosowania zastosowane do standardowego widżetu komentarzy będą miały również wpływ na Image Chat.

Rozmiar kwadratów czatu

Opcja chatSquarePercentage kontroluje rozmiar klikalnych znaczników. Wartość domyślna to 5% szerokości obrazu:

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    chatSquarePercentage: 7  // Większe, bardziej widoczne kwadraty
});

Mniejsze wartości tworzą bardziej subtelne znaczniki, które wtapiają się w obraz. Większe wartości sprawiają, że znaczniki są bardziej widoczne i łatwiejsze do kliknięcia, szczególnie na urządzeniach mobilnych lub ze względów dostępności.

Zachowanie na urządzeniach mobilnych

Na ekranach o szerokości poniżej 768px Image Chat automatycznie przełącza się na układ zoptymalizowany pod kątem urządzeń mobilnych. Okna czatu pojawiają się na pełnym ekranie zamiast unosić się obok znaczników, co zapewnia lepszą użyteczność na małych ekranach.

Znaczniki pozostają widoczne w swoich responsywnych pozycjach na obrazie. Użytkownicy mogą dotknąć dowolnego znacznika, aby otworzyć pełnoekranowy interfejs czatu. To zachowanie jest wbudowane i nie wymaga żadnej konfiguracji.

Wygląd okna czatu

Okna czatu mają 300px szerokości na komputerach stacjonarnych ze strzałką 16px wskazującą znacznik. Okna pozycjonują się automatycznie w zależności od dostępnej przestrzeni w oknie widoku, używając klas pozycjonowania takich jak to-right, to-left, to-top i to-bottom.

Możesz dodać niestandardowy CSS, aby dostosować kolory, czcionki, odstępy lub inne właściwości wizualne tych okien. Okna czatu używają tej samej struktury komponentów co standardowy widżet FastComments, więc dziedziczą wszelkie globalne dostosowania, które zastosowałeś.

Leniwa inicjalizacja

Okna czatu inicjalizują się po najechaniu kursorem dla użytkowników komputerów stacjonarnych lub natychmiast po utworzeniu. Zmniejsza to początkowe obciążenie ładowania, renderując interfejs czatu tylko wtedy, gdy użytkownicy faktycznie wchodzą w interakcję ze znacznikiem.

Leniwa inicjalizacja odbywa się w sposób niewidoczny. Użytkownicy nie zauważają żadnego opóźnienia, ale przeglądarka nie musi renderować dziesiątek ukrytych okien czatu, jeśli na obrazie znajduje się wiele znaczników.

Lokalizacja

Image Chat obsługuje te same opcje lokalizacji co standardowy widżet FastComments. Ustaw opcję locale, aby wyświetlać tekst interfejsu w różnych językach:

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    locale: 'fr'  // Francuski
});

FastComments obsługuje dziesiątki języków. Ustawienie locale wpływa na cały tekst interfejsu, w tym podpowiedzi, przyciski i tekst zastępczy.

Odziedziczone opcje dostosowywania

Ponieważ Image Chat rozszerza standardowy widżet komentarzy, dziedziczy wszystkie opcje dostosowywania z bazowego widżetu. Obejmuje to niestandardowe klasy CSS, niestandardowe tłumaczenia, dostosowywanie awatarów, formatowanie dat i wiele więcej.

Zobacz główną dokumentację dostosowywania FastComments, aby zapoznać się z pełną listą dostępnych opcji dostosowywania.

Praca z niestandardowymi czcionkami

Jeśli Twoja witryna używa niestandardowych czcionek, interfejs Image Chat odziedziczy te czcionki z CSS Twojej strony. Okna czatu są renderowane wewnątrz DOM Twojej strony i respektują istniejące ustawienia typografii.

Aby uzyskać najlepsze rezultaty, upewnij się, że niestandardowe czcionki są załadowane przed zainicjowaniem Image Chat, albo zaakceptuj, że może wystąpić krótki błysk tekstu bez stylizacji podczas ładowania czcionek.

Projekt wizualny znaczników

Kwadratowe znaczniki mają subtelny projekt wizualny, który sprawia, że są zauważalne, nie przytłaczając obrazu. Możesz dostosować ich wygląd za pomocą CSS, jeśli chcesz uzyskać inny efekt wizualny.

Znaczniki zawierają stany hover, które zapewniają informację zwrotną, gdy użytkownicy przesuwają nad nimi kursor. Na urządzeniach dotykowych interakcja dotknięcia zapewnia natychmiastową informację zwrotną poprzez otwarcie okna czatu.

Aktualizacje w czasie rzeczywistym

Image Chat używa połączeń WebSocket do synchronizacji wszystkich konwersacji w czasie rzeczywistym między wszystkimi podłączonymi użytkownikami. Gdy ktoś tworzy nowy znacznik, dodaje komentarz lub usuwa dyskusję, wszyscy inni użytkownicy oglądający ten sam obraz widzą aktualizację natychmiast, bez odświeżania.

Jak działa synchronizacja przez WebSocket

Gdy inicjujesz Image Chat, widget nawiązuje połączenie WebSocket z serwerami FastComments. Połączenie to pozostaje otwarte przez cały czas trwania sesji użytkownika i nasłuchuje aktualizacji związanych z bieżącym obrazem.

System WebSocket używa trzech typów komunikatów rozgłoszeniowych dla Image Chat. Zdarzenie new-image-chat wywoływane jest, gdy ktoś tworzy nowy znacznik na obrazie. Zdarzenie image-chat-updated wywoływane jest, gdy ktoś aktualizuje istniejącą konwersację. Zdarzenie deleted-image-chat wywoływane jest, gdy ktoś usuwa znacznik.

System identyfikatorów broadcast

Aby zapobiec efektom echa, w których użytkownicy widzą własne działania rozgłaszane z powrotem do nich, każda aktualizacja zawiera unikalny broadcastId. Gdy użytkownik tworzy lub aktualizuje znacznik, jego klient generuje UUID dla tej operacji. Gdy WebSocket rozgłasza aktualizację z powrotem do wszystkich klientów, klient źródłowy ignoruje tę aktualizację, ponieważ pasuje ona do jego własnego broadcastId.

Zapewnia to płynną interakcję, w której użytkownicy widzą swoje zmiany natychmiast w interfejsie użytkownika bez oczekiwania na pełną podróż przez serwer, jednocześnie zapewniając, że wszyscy inni użytkownicy otrzymają aktualizację.

Odporność połączenia

Jeśli połączenie WebSocket zostanie przerwane z powodu problemów sieciowych lub konserwacji serwera, widget automatycznie próbuje ponownie nawiązać połączenie. W okresie ponownego łączenia użytkownicy nadal mogą wchodzić w interakcje z istniejącymi znacznikami, ale nie będą widzieć aktualizacji w czasie rzeczywistym od innych użytkowników, dopóki połączenie nie zostanie przywrócone.

Po ponownym połączeniu widget ponownie synchronizuje stan, aby upewnić się, że nie pominął żadnych aktualizacji. Dzieje się to w sposób przezroczysty, bez potrzeby interwencji użytkownika.

Uwagi dotyczące przepustowości

Komunikaty WebSocket są lekkie i zawierają tylko niezbędne informacje potrzebne do synchronizacji stanu. Utworzenie nowego znacznika zwykle zużywa mniej niż 1KB przepustowości. System zawiera również inteligentne grupowanie, aby zmniejszyć częstotliwość komunikatów w okresach dużej aktywności.

Twoje metryki użycia w panelu FastComments śledzą pubSubMessageCount i pubSubBandwidth, dzięki czemu możesz monitorować aktywność synchronizacji w czasie rzeczywistym na swoich witrynach.

Synchronizacja między kartami

Jeśli użytkownik ma tę samą stronę otwartą w wielu kartach przeglądarki, aktualizacje w jednej karcie pojawiają się natychmiast w pozostałych kartach. Działa to przez ten sam mechanizm synchronizacji WebSocket i nie wymaga żadnej dodatkowej konfiguracji.

Użytkownicy mogą mieć Twoją witrynę otwartą na wielu urządzeniach jednocześnie, i wszystkie będą pozostawać zsynchronizowane. Znacznik utworzony na komputerze stacjonarnym pojawi się natychmiast na tablecie użytkownika, jeśli oba urządzenia wyświetlają ten sam obraz.

Bezpieczeństwo

Komunikaty WebSocket są przesyłane przez bezpieczne połączenia (WSS) i zawierają walidację najemcy, aby upewnić się, że użytkownicy otrzymują tylko aktualizacje do rozmów, do których są uprawnieni. Serwer weryfikuje wszystkie operacje przed ich rozgłoszeniem, aby zapobiec nieautoryzowanemu dostępowi lub manipulacji.

Zachowanie w trybie offline

Gdy użytkownicy są całkowicie offline, nadal mogą przeglądać istniejące znaczniki, ale nie mogą tworzyć nowych ani zobaczyć aktualizacji od innych. Widget wykrywa stan offline i wyświetla odpowiednie komunikaty.

Jeśli użytkownik spróbuje utworzyć znacznik będąc offline, a następnie wróci online, operacja zakończy się niepowodzeniem zamiast być kolejkowana, co zapewnia spójność danych. Użytkownicy powinni ponowić próbę operacji po przywróceniu połączenia.

Wpływ na wydajność

Połączenie WebSocket ma minimalny wpływ na wydajność. Połączenie pozostaje bezczynne, gdy nie występują żadne aktualizacje i przetwarza komunikaty tylko wtedy, gdy pojawia się aktywność. Dla typowego obrazu przy umiarkowanej aktywności znaczników, WebSocket zużywa mniej CPU niż samo renderowanie obrazu.

Dla stron z setkami jednoczesnych użytkowników i wysoką aktywnością tworzenia znaczników, system skaluje się horyzontalnie, aby utrzymać wydajność bez wpływu na pojedyncze połączenia klientów.

Zastosowania w pracy zespołowej

Synchronizacja w czasie rzeczywistym czyni Image Chat szczególnie przydatnym w przepływach pracy wymagających współpracy. Zespoły projektowe mogą wspólnie przeglądać makiety, a wszyscy widzą rozmieszczenie znaczników w czasie rzeczywistym. Zespoły wsparcia klienta mogą wspólnie adnotować zrzuty ekranu, aby zidentyfikować problemy. Grupy edukacyjne mogą omawiać diagramy, a wszyscy uczestnicy widzą znaczniki dodawane przez innych w miarę ich tworzenia.

Natychmiastowa informacja zwrotna tworzy bardziej angażujące i produktywne doświadczenie współpracy w porównaniu z tradycyjnymi systemami komentarzy, gdzie użytkownicy muszą odświeżyć stronę, aby zobaczyć aktualizacje.