10Portfolio
Wirechat — Live-Chat für NodeBB-Foren
Wirechat ist ein kurzer Live-Chat für NodeBB-4-Foren: Ein Button in der Ecke jeder Seite öffnet das Gespräch, am Smartphone fährt das Panel vom unteren Bildschirmrand ein. Im wirelab-Forum dient er für schnelle Fragen und lockere Unterhaltung neben den Threads.
In Zahlen
- Zeichen pro Nachricht
- 300
- Tage Chatverlauf
- 7
- Automatisierte Tests
- 27
Aufgabe
Nicht jede Frage verdient einen eigenen Thread. „Kennt jemand einen Ersatz für diesen Transistor?“ oder „Läuft das Forum?“ verstopfen die Themenliste, und Nutzer weichen mit solchen Gesprächen auf externe Messenger aus. Bestehende Shoutboxen für NodeBB sind nicht auf Version 4 ausgelegt, haben keine bequeme Smartphone-Ansicht und keine Moderationswerkzeuge, und ein Chat für alle zieht schnell Spam an.
Vorgehen
Ich habe ein Plugin geschrieben, das über die WebSocket-Verbindung von NodeBB selbst läuft und seine Daten in dessen Datenbank speichert, also keinen eigenen Server braucht. Der Chat hat zwei Ansichten: ein Dock auf jeder Seite (am Smartphone als Panel vom unteren Bildschirmrand) und ein Widget mit den drei letzten Nachrichten, das sich an beliebiger Stelle im Forum platzieren lässt. Nachrichten sind reiner Text, und der Server wandelt sie selbst in HTML um: Fett, Kursiv, Inline-Code, Links, Emoji und Erwähnungen mit Benachrichtigung. Kein Code von Nutzern gelangt auf die Seite. Wer lesen, schreiben und moderieren darf, wird über drei Berechtigungen im NodeBB-Administrationsbereich festgelegt. Gegen Spam darf erst mit bestätigter E-Mail-Adresse, einem mehr als einen Tag alten Konto und mindestens einem Beitrag geschrieben werden, und Links lassen sich erst ab der zweiten Rangstufe des Plugins rank-badges senden. Außerdem gibt es ein Tempolimit: fünf Nachrichten pro 20 Sekunden.
Ergebnis
Der Chat läuft auf forum.wirelab.pl unter dem Namen „Wirechat“, auf Polnisch und Englisch. Moderatoren löschen Nachrichten und sperren Nutzer für 15 Minuten, eine Stunde, einen Tag oder dauerhaft; den Grund sehen alle im Chat, und jede Entscheidung landet in einem Protokoll im Administrationsbereich. Der Verlauf umfasst 7 Tage oder 2000 Nachrichten, die Datenbank wächst also nicht endlos. 27 automatisierte Tests prüfen Limits, Berechtigungen, Sperren und die Bereinigung von Inhalten. Der Code ist unter der MIT-Lizenz offen, auf npm und GitHub als nodebb-plugin-wirelab-shoutbox.
So funktioniert es
01
Dock, Sheet und Widget
Eine Schaltfläche unten rechts öffnet den Chat auf jeder Seite des Forums und zeigt die Zahl neuer Nachrichten. Auf dem Smartphone fährt der Chat vom unteren Bildschirmrand hoch. Ein Widget mit den drei letzten Nachrichten und der Zahl der Online-Mitglieder lässt sich in jedem Widget-Bereich von NodeBB platzieren.
02
Ein einklappbares Widget
Seit Version 1.1.0 lässt sich das Widget mit der Schaltfläche „Chat einklappen“ einklappen. Auf großen Bildschirmen verschwindet die Spalte, wenn der Chat das einzige Widget in der Spalte ist, die Themenliste nimmt die volle Breite ein, und am rechten Rand bleibt ein schmaler Reiter „Wirechat“. Neben anderen Widgets und auf dem Smartphone klappt der Chat zu einer einzigen Zeile zusammen. Der Browser merkt sich die Wahl und wendet sie an, bevor die Seite angezeigt wird, sodass nichts springt.
03
Erwähnungen, Emojis und Formatierung
Nach der Eingabe von @ erscheint eine Liste passender Mitglieder, die sich auch mit den Pfeiltasten und der Eingabetaste bedienen lässt. Die erwähnte Person erhält eine gewöhnliche NodeBB-Benachrichtigung. Emojis, Fettdruck, Kursivschrift, Durchstreichung, Inline-Code und Links funktionieren.
04
Moderation mit Protokoll
Ein Moderator löscht eine Nachricht oder schaltet den Autor für 15 Minuten, eine Stunde, einen Tag oder dauerhaft stumm. Eine Begründung ist Pflicht: Alle im Chat sehen sie, und der Eintrag landet im Protokoll im Admin-Bereich, zusammen mit der Liste der aktiven Stummschaltungen.
05
Sichere Inhalte und Spam-Schutz
Nachrichten werden als einfacher Text gespeichert und serverseitig in HTML umgewandelt, daher kann niemand eigenen Code in die Seite einschleusen. Schreiben dürfen Konten mit bestätigter E-Mail-Adresse, die älter als ein Tag sind und mindestens einen Beitrag haben; Links schaltet erst ein höherer Rang frei. Es gibt ein Tempolimit, und auch bloße Domainnamen ohne http zählen als Links.
06
Per Tastatur bedienbar
Die Nachrichtenliste ist eine Live-Region für Screenreader. Esc schließt den Chat und springt zurück zur Schaltfläche, Enter sendet, Shift+Enter fügt eine neue Zeile ein. Das Panel auf dem Smartphone hält den Fokus in seinem Inneren, und Animationen schalten sich ab, wenn reduzierte Bewegung eingestellt ist.
07
Code und Installation
Das Plugin ist Open Source unter der MIT-Lizenz. Code und Meldungen: github.com/nairdaweb/nodebb-plugin-wirelab-shoutbox. npm-Paket: npmjs.com/package/nodebb-plugin-wirelab-shoutbox. Im Einsatz können Sie es im Forum forum.wirelab.pl sehen.