Fortsetzung der
Publikation "Server Push Messages"Bei der Entwicklung des Client-Teils gab es kein Ziel, das Design zu wiederholen und wie andere zu gestalten.
Andererseits ist es schwierig, Bereiche in der Desktop-Version zu ändern und neu anzuordnen. Der Kontaktbereich links, die Nachricht rechts und der Eingabebereich für eine neue Nachricht unten sind nicht so einfach besser und bequemer zu gestalten. In vielen modernen Lösungen sind Design und Designelemente bei mobilen Programmen identisch. Ich denke, deshalb ist es unmöglich, das Nachrichteneingabefeld zu erweitern, um zwei oder mehr Zeilen zu erstellen.
Das gestrichelte Trennzeichen ist im Bild sichtbar, wenn Sie mit der Maus darüber fahren, wird es gelb-schwarz gestreift. Durch Verschieben des Trennzeichens können Sie die Höhe des Felds für die Eingabe von Nachrichten anpassen.
Ebenso können Sie die Breite der Kontaktliste und der Nachrichtenliste ändern.
Das Senden von Nachrichten ist animiert. Beim Senden von Nachrichten in anderen Programmen gab es keine Animation.
Für den Hintergrund der Kontaktliste wird ein Farbverlauf von Grau und Rosa verwendet. Eine ähnliche Kombination befindet sich am Himmel in Form eines Lichts.
Online-Benutzer haben eine orange Farbe des Namens, verbundene Räume (Gruppen) von schwarzer Farbe. Benutzer sind nicht online und deaktivierte Gruppen sind grau. Sie können einen Raum von einem Benutzer in der Kontaktliste anhand des Sternnamens unterscheiden. Raumnamen beginnen mit ✯
Benutzer können neue Räume (Gruppen) erstellen und Benutzer aus Gruppen entfernen. Es ist auch möglich, Räume zu wechseln, wenn der Bearbeitungsbenutzer ein Administrator-Flag in der Liste der Raumbenutzer hat.
Es ist möglich, Dateien zu übertragen, Bilddateien werden sofort in der Nachricht gesendet und in der Nachricht angezeigt. Videodateien werden nicht sofort gesendet, sondern nur der erste Frame. Zum Herunterladen müssen Sie das Video ausführen. Andere Dateien werden auf ähnliche Weise erst heruntergeladen, nachdem Sie auf die Datei in der Nachricht geklickt haben. Die maximale Dateigröße sowie die Größe des Teils der Datei, in den große Dateien unterteilt sind, wird in push0k admin konfiguriert. Um eine Datei zu senden, können Sie die Schaltfläche "Anhang senden" verwenden. Sie können die Datei auch einfach per Drag & Drop in das Nachrichtenfenster ziehen. Ebenso kann eine gesendete Datei aus einer Nachricht unter Mac OS in den Explorer- oder Finder-Ordner gezogen werden. Mit anderen Worten, Drag & Drop ist für Dateien implementiert.
Nachrichten sind gelöschte HTML-Tags. Aber es gibt einen Abschlag ähnlich dem Abschlag.
*
fett *
~
kursiv ~
_
unterstrichen _
Sie können Links senden, aber der Link sollte eine separate Nachricht sein.
Jede Nachricht hat Schaltflächen:
"" Zitat der Nachricht
➦ Nachrichtenweiterleitung
Für eine sichere Verbindung zum Server ist eine Schaltfläche mit einer Sperre implementiert. Die Logik ähnelt der von Browsern - ein unsicheres Zertifikat ist abgelaufen, selbstsigniert oder von einem anderen Domainnamen ist die Sperre geöffnet - die Verbindung ist unsicher. Die Schaltfläche mit dem Schloss öffnet die Zertifikatinformationen.
Alle Serverbenutzer sind für einander sichtbar, dh die Kontakte jedes Benutzers sind andere Benutzer. Benutzer können ihre Kontakte umbenennen. Es ist möglich, Benachrichtigungen über neue Nachrichten von einem Kontakt zu blockieren. Sie können auch Nachrichten von einem Kontakt vollständig blockieren.
Nachrichten implementieren kein Senden von Lächeln. Keine Video- oder Audioverbindung. Es gibt keine Möglichkeit, den Bildschirm des Benutzers zu demonstrieren. In Zukunft werde ich definitiv einige der oben genannten implementieren.
Push0k-Client herunterladen:
FensterMac OSDie Anwendung erfolgt auf elektronischem Wege mit vue.js. Die Anwendung ist kostenlos, aber im Gegensatz zu dem im ersten Teil des Artikels beschriebenen Server habe ich noch nicht vor, den Quellcode zu öffnen.
Verbindungsbeispiel
Die Verbindung besteht aus drei Teilen:
- Stellen Sie eine Verbindung her.
Für eine sichere Verbindung ist dies Handshake-Messaging. - Autorisierung
Während der Autorisierung wird zusätzlich zum Login ein Hash von dem Passwort Hash + Verbindungs-ID übertragen.
In der Autorisierungsnachricht werden Computerparameter übertragen: Betriebssystemtyp, Betriebssystemversion, Prozessor, Speicher, Computername. Diese Referenzdaten sind für Statistiken und zum Verständnis der Auswirkungen von Betriebssystem, Prozessor und Speicher auf die Verbindungsgeschwindigkeit, den Datenaustausch usw. erforderlich.
Die ersten Versionen des Programms wurden ab 1s erstellt und bearbeitet. Normalerweise kann auf einem Computer nicht eine 1c-Datenbank gestartet werden, sondern mehrere, z. B. ein Speichermanager und ein BP bei einem Buchhalter. Wenn die Lösung zur Unterstützung der Buchhaltung verwendet wird, ist es wichtig zu wissen, aus welcher Datenbank die Nachricht des Buchhalters gesendet wurde. Während der Autorisierung werden auch Datenbankdaten übertragen. - Datensynchronisation.
Nach dem Empfang einer Nachricht über die erfolgreiche Autorisierung wird eine Datenanforderungsnachricht mit einem Datum an den Server gesendet. Das größte Datum der letzten Nachricht oder der letzten Änderung eines Benutzers oder Raums (einer Gruppe). Bis zum Übertragungsdatum werden neue Nachrichten oder geänderte Benutzer, Räume (Gruppen) bestimmt. Das Datum kann leer sein, dann werden alle Nachrichten von Benutzern und Räumen empfangen. Dies kann das erste Mal sein, dass Sie eine Verbindung herstellen.
Nach dem Empfang der Synchronisationsdaten werden Nachrichten an den Server gesendet, die den Empfang der Daten und die berechnete Zeit für "Verbindungsaufbau", "Autorisierung" und "Datensynchronisation" bestätigen.
Verbinden Sie socket.io mit der HTML-Seite.
Für node.js
- Konsole öffnen
- Gehen Sie zum Projektordner mit dem Befehl `cd / yourCatalog`
- Führen Sie den Installationsbefehl `npm install socket.io` aus
Beispielcode für Node.j:
const io = require('socket.io-client'); const crypto = require('crypto'); const os = require('os'); const cpusarray = os.cpus(); let actiontime = 0; let contime = 0; let auftime = 0; let datasintime = 0; let socket; let lastdatesync = new Date(0).toISOString(); let usernumber = '+7 (999) 777-77-77'; let pw = 'somePassword'; let baseref = process.cwd(); let basename = 'push0k client'; let baseid = crypto .createHash('md5') .update(appdirectory) .digest('hex'); baseid = baseid.substring(0, 8) + '-' + baseid.substring(8, 12) + '-' + baseid.substring(12, 16) + '-' + baseid.substring(16, 20) + '-' + baseid.substring(20, 32); let basever = '19.02'; let clientid = crypto .createHash('md5') .update(os.hostname()) .digest('hex'); clientid = clientid.substring(0, 8) + '-' + clientid.substring(8, 12) + '-' + clientid.substring(12, 16) + '-' + clientid.substring(16, 20) + '-' + clientid.substring(20, 32); let syncdata = ''; let syncdatasize = 0; function sha256(p) { const hash = crypto.createHash('sha256'); hash.update(p); return '' + hash.digest('hex'); } function connect() { socket = io('http://yourServer.com:6789', { transports: ['websocket'], timeout: 5000 }); socket.connect(); socket.on('connect', onconnect); socket.on('message', onmessage); actiontime = new Date().getTime(); } function onconnect() { contime = new Date().getTime() - actiontime; usernumber = usernumber.replace(/\D/g, ''); socket .binary(false) .emit( 'message', '{"event":"auf","user":"' + usernumber + '","password":"' + sha256(pw + socket.id) + '","roomsjoin":true,"basename":"' + basename + '","basever":"' + basever + '","baseid":"' + baseid + '","baseref":"' + encodeURIComponent(baseref) + '","osversion":"' + encodeURIComponent(os.release()) + '","appversion":"18.08","clientid":"' + clientid + '","infappview":"","ram":"' + os.totalmem() / 1024 / 1024 + '","proc":"' + encodeURIComponent(cpusarray[0].model) + '","ostype":"' + encodeURIComponent(os.type() + ' ' + os.arch()) + '","compname":"' + encodeURIComponent(os.hostname()) + '"}' );