Client für "Server-Push-Nachrichten"

    Fortsetzung der Veröffentlichung "Server-Push-Nachrichten"

    Bei der Entwicklung der Clientseite war es nicht das Ziel, das Design wie die anderen zu wiederholen und zu gestalten.
    Andererseits ist es schwierig, die Bereiche in der Desktop-Version zu ändern und neu zu ordnen. Der Kontaktbereich links, die Nachricht rechts, der Eingabebereich der neuen Nachricht unten, um besser und bequemer zu machen, ist nicht so einfach. In vielen modernen Lösungen entsprechen Design und Design-Elemente mobilen Programmen. Ich denke, deshalb kann das Nachrichteneingabefeld nicht erweitert werden, es können zwei oder mehr Zeilen gemacht werden.



    Das Trennzeichen für die gestrichelte Linie ist im Bild sichtbar. Wenn Sie den Mauszeiger darüber bewegen, 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 die Liste der Nachrichten ändern.

    Das Senden von Nachrichten wird animiert. Beim Senden von Nachrichten in anderen Programmen gab es keine Animation.

    Für den Hintergrund der Kontaktliste wird ein Farbverlauf aus Grau und Rosa verwendet. Eine ähnliche Kombination kann am Himmel in Form eines Glühens gefunden werden.

    Benutzer online - orange Farbe des Namens, verbundene Räume (Gruppen) schwarz. Nicht-Online-Benutzer und deaktivierte Gruppen sind grau. Sie können einen Raum von einem Benutzer in der Kontaktliste durch einen Sternnamen unterscheiden. Die Namen der Räume beginnen mit ✯



    Benutzer können neue Räume (Gruppen) erstellen, Benutzer hinzufügen und aus Gruppen löschen. Es ist auch möglich, Räume zu ändern, wenn der bearbeitende Benutzer ein Administrator-Flag in der Liste der Raumbenutzer hat.



    Es ist möglich, Dateien zu senden, Bilddateien werden sofort in der Nachricht gesendet und in der Nachricht angezeigt. Videodateien werden nicht sofort gesendet, sondern nur das erste Bild wird gesendet. Sie müssen das Video zum Herunterladen starten. Andere Dateien werden auf ähnliche Weise erst heruntergeladen, wenn Sie auf die Datei in der Nachricht klicken. Die maximale Dateigröße sowie die Größe des Teils der Datei, in den große Dateien aufgeteilt werden, 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 in das Meldungsfenster ziehen. Ebenso kann die von der Nachricht gesendete Datei in den Explorer- oder Finder-Ordner in Mac OS gezogen werden. Drag & Drop ist also für Dateien implementiert.



    Nachrichten entfernen HTML-Tags. Es gibt jedoch 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:

    „“, die eine Nachricht zitieren.
    ➦ Senden einer Nachricht



    Eine Schaltfläche mit einer Sperre ist implementiert, um eine sichere Verbindung zum Server herzustellen . Die Logik ist ähnlich wie bei Browsern - ein unsicheres Zertifikat, abgelaufen, selbstsigniert oder von einem anderen Domänennamen, die Sperre ist geöffnet - die Verbindung ist unsicher. Die Schaltfläche mit der Sperre öffnet die Zertifikatsinformationen.



    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 vom Kontakt zu blockieren. Sie können auch Nachrichten vom Kontakt vollständig blockieren.



    Die Nachrichten senden kein Lächeln. Keine Video- und Audioverbindung. Es besteht keine Möglichkeit, den Bildschirm des Benutzers anzuzeigen. In der Zukunft müssen einige der oben genannten Maßnahmen umgesetzt werden.

    Push0k-Client herunterladen:

    Windows-
    Mac OS-

    Anwendung, die mit vue.js. auf einem Elektron erstellt wurde. Die Anwendung ist kostenlos, aber im Gegensatz zu dem im ersten Teil des Artikels beschriebenen Server plane ich nicht, den Quellcode zu öffnen.

    Anschlussbeispiel


    Verbindung besteht aus drei Teilen:

    1. Verbindungsaufbau

      Für eine sichere Verbindung ist dies Handshake-Messaging.
    2. Autorisierung

      Bei der Autorisierung wird zusätzlich zum Login der Hash aus dem Passwort Hash + Verbindungs-ID übertragen.

      In der Autorisierungsnachricht werden die Computerparameter des Betriebssystemtyps, der Betriebssystemversion, des Prozessors, des Speichers und des Computernamens übertragen. Diese Referenzdaten sind für Statistiken und für das Verständnis der Art des Betriebssystems, des Prozessors und des Speichers erforderlich, um die Verbindungsgeschwindigkeit, den Datenaustausch usw. zu beeinflussen.

      Die ersten Versionen des Programms wurden von 1c erstellt und bearbeitet. Normalerweise kann nicht eine 1s-Datenbank auf demselben Computer ausgeführt werden, sondern mehrere, z. B. ZUP und PSU, von 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. Die Autorisierung überträgt auch die Datenbankdaten.
    3. Daten synchronisieren

      Nach Erhalt einer erfolgreichen Autorisierungsnachricht wird eine Datenanforderungsnachricht mit Datum an den Server gesendet. Das größte Datum der letzten Nachricht oder der letzten Änderung eines Benutzers oder Raums (einer Gruppe). Mit dem übertragenen Datum werden neue Nachrichten oder geänderte Benutzer, Räume (Gruppen) festgelegt. Das Datum kann leer sein, dann werden alle Nachrichten von Benutzern und Räumen empfangen. Dies kann die erste Verbindung sein.

      Nach dem Empfang der Synchronisationsdaten wird eine Bestätigungsnachricht an den Server empfangen und die berechnete Zeit für "Verbindungsaufbau", "Autorisierung" und "Datensynchronisation" berechnet.

    Verbinden Sie socket.io mit der HTML-Seite.


    Für node.js

    • Konsole öffnen
    • Gehen Sie zum Projektordner-Befehl `cd / yourCatalog`
    • Führen Sie den Installationsbefehl `npm install socket.io` aus

    Beispielcode node.js:

    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 = newDate(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;
    functionsha256(p) {
      const hash = crypto.createHash('sha256');
      hash.update(p);
      return'' + hash.digest('hex');
    }
    functionconnect() {
      socket = io('http://yourServer.com:6789', { transports: ['websocket'], timeout: 5000 });
      socket.connect();
      socket.on('connect', onconnect);
      socket.on('message', onmessage);
      actiontime = newDate().getTime();
    }
    functiononconnect() {
      contime = newDate().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()) +
            '"}'
    	);
      // Настройки передачи файлов с сервераlet filetranfer = msgdata.filetranfer;
      let filemaxsize = msgdata.filemaxsize;
      let filepartsize = msgdata.filepartsize;	
      actiontime = newDate().getTime();
    }
    functiononmessage(msg) {
      let msgdata;
      let mestime = newDate().getTime();
      if (typeof msg === 'string') {
        try {
          msgdata = JSON.parse(msg);
        } catch (err) {
          this.message = err.toString();
          return;
        }
      } elseif (typeof msg === 'object') {
        msgdata = msg;
      }
      if (msgdata.event === 'connected') {
        auftime = mestime - actiontime;
        socket
          .binary(false)
          .emit(
            'message',
            '{"event":"getData","userid":"' +
              msgdata.userid +
              '","id":"' +
              msgdata.id +
              '","baseid":"' +
              baseid +
              '","clientid":"' +
              clientid +
              '","lastdatesinc":"' +
              lastdatesync +
              '"}'
          );
        if (msgdata.setpass === 'true') {
          // временный пароль должен быть изменен пользователем// в модальном диалоге без возможности отказа// openDialogSetNewPassword();
        }
        actiontime = newDate().getTime();
      } elseif (msgdata.event === 'datasync') {
        syncdata += msgdata.data;
        syncdatasize += Buffer.byteLength(msg, 'utf8');
        if (msgdata.dataPart < msgdata.partsCount) {
          return;
        }
        datasintime = mestime - actiontime;
        socket
          .binary(false)
          .emit(
            'message',
            '{"event":"dataConfirm","userid":"' +
              msgdata.userid +
              '","dataid":"' +
              msgdata.dataid +
              '","baseid":"' +
              baseid +
              '","contime":' +
              contime +
              ',"auftime":' +
              auftime +
              ',"datasintime":' +
              datasintime +
              ',"datesync":"' +
              msgdata.datesync +
              '","datasize":' +
              syncdatasize +
              '}'
          );
        contime = 0;
        datasintime = 0;
        auftime = 0;
        syncdatasize = 0;
        let datasync = JSON.parse(Buffer.from(syncdata, 'base64').toString('utf8'));
        syncdata = '';
        // обработка полученных данных с сервера// datasync.Users массив пользователей// datasync.Rooms массив комнат// datasync.Cons массив подключений пользователей// datasync.joinedRooms массив подключенных комнат// datasync.Mess массив сообщений
      }
    }
    

    Jetzt auch beliebt: