10Portfolio
Wirechat — czat na żywo dla forum NodeBB
Wirechat to krótki czat na żywo dla forów na NodeBB 4: przycisk w rogu każdej strony otwiera rozmowę, a na telefonie panel wysuwa się od dołu ekranu. Na forum wirelab służy do szybkich pytań i luźnej rozmowy obok wątków.
W liczbach
- Znaków w jednej wiadomości
- 300
- Dni historii czatu
- 7
- Testy automatyczne
- 27
Problem
Nie każde pytanie zasługuje na osobny wątek. „Ktoś zna zamiennik tego tranzystora?” albo „czy forum działa?” zaśmiecają listę tematów, a użytkownicy uciekają z takimi rozmowami na zewnętrzne komunikatory. Istniejące shoutboxy dla NodeBB nie są dostosowane do czwartej wersji, nie mają wygodnego widoku na telefonie ani narzędzi do moderacji, a czat otwarty dla wszystkich szybko przyciąga spam.
Podejście
Napisałem wtyczkę, która działa na połączeniu websocket samego NodeBB i trzyma dane w jego bazie, więc nie wymaga osobnego serwera. Czat ma dwa widoki: dok dostępny na każdej stronie (na telefonie jako panel od dołu ekranu) i widżet z trzema ostatnimi wiadomościami, który można postawić w dowolnym miejscu forum. Wiadomości są zwykłym tekstem, a serwer sam zamienia je na HTML: pogrubienie, kursywa, kod w linii, linki, emoji i wzmianki z powiadomieniem. Żaden kod od użytkownika nie trafia na stronę. Kto może czytać, pisać i moderować, ustala się trzema uprawnieniami w panelu NodeBB. Żeby ograniczyć spam, pisać można dopiero z potwierdzonym adresem e-mail, kontem starszym niż doba i co najmniej jednym postem, a linki wysyłać dopiero od drugiego poziomu rangi z wtyczki rank-badges. Jest też limit tempa: pięć wiadomości na 20 sekund.
Efekt
Czat działa na forum.wirelab.pl pod nazwą „Wirechat”, po polsku i po angielsku. Moderatorzy usuwają wiadomości i wyciszają użytkowników na 15 minut, godzinę, dobę albo na stałe; powód widzą wszyscy w czacie, a każda decyzja trafia do dziennika w panelu. Historia obejmuje 7 dni albo 2000 wiadomości, więc baza nie rośnie bez końca. 27 automatycznych testów pilnuje limitów, uprawnień, wyciszeń i oczyszczania treści. Kod jest otwarty na licencji MIT, w npm i na GitHubie jako nodebb-plugin-wirelab-shoutbox.
Jak to działa
01
Dok, arkusz i widżet
Przycisk w prawym dolnym rogu otwiera czat na każdej stronie forum i pokazuje liczbę nowych wiadomości. Na telefonie czat wysuwa się od dołu ekranu. Widżet z trzema ostatnimi wiadomościami i liczbą osób online można postawić w dowolnym obszarze widżetów NodeBB.
02
Zwijany widżet
Od wersji 1.1.0 widżet można zwinąć przyciskiem „Zwiń czat”. Na dużym ekranie, gdy czat jest jedynym widżetem w kolumnie, kolumna znika, lista tematów zajmuje całą szerokość, a przy prawej krawędzi zostaje wąska zakładka „Wirechat”. Obok innych widżetów i na telefonie czat składa się do jednej linii. Przeglądarka pamięta wybór i stosuje go przed wyświetleniem strony, więc nic nie skacze.
03
Wzmianki, emoji i formatowanie
Po wpisaniu @ pojawia się lista pasujących użytkowników, obsługiwana także strzałkami i klawiszem Enter. Wspomniana osoba dostaje zwykłe powiadomienie NodeBB. Działają emoji, pogrubienie, kursywa, przekreślenie, kod w linii i linki.
04
Moderacja z dziennikiem
Moderator usuwa wiadomość albo wycisza autora na 15 minut, godzinę, dobę lub na stałe. Powód jest obowiązkowy: widzą go wszyscy w czacie, a wpis trafia do dziennika w panelu administracyjnym, razem z listą aktywnych wyciszeń.
05
Bezpieczna treść i ochrona przed spamem
Wiadomości są zapisywane jako zwykły tekst i zamieniane na HTML po stronie serwera, więc nikt nie wstawi na stronę własnego kodu. Pisać mogą konta z potwierdzonym adresem e-mail, starsze niż doba i z co najmniej jednym postem; linki odblokowuje dopiero wyższa ranga. Działa limit tempa, a same nazwy domen bez http też liczą się jako linki.
06
Dostępny z klawiatury
Lista wiadomości jest regionem na żywo dla czytników ekranu. Esc zamyka czat i wraca do przycisku, Enter wysyła, a Shift+Enter dodaje nową linię. Panel na telefonie trzyma fokus w środku, a animacje wyłączają się przy ustawieniu ograniczonego ruchu.
07
Kod i instalacja
Wtyczka jest otwarta na licencji MIT. Kod i zgłoszenia: github.com/nairdaweb/nodebb-plugin-wirelab-shoutbox. Pakiet npm: npmjs.com/package/nodebb-plugin-wirelab-shoutbox. W działaniu można ją zobaczyć na forum.wirelab.pl.