Suite de la
publication "Messages push serveur"Lors du développement de la partie client, il n'y avait aucun objectif de répéter et de faire le design comme les autres.
D'un autre côté, il est difficile de modifier et de créer un nouvel arrangement des zones dans la version de bureau. La zone de contact à gauche, le message à droite, la zone de saisie d'un nouveau message en bas, n'est pas si facile à rendre meilleure et plus pratique. Dans de nombreuses solutions modernes, la conception et les éléments de conception sont les mêmes avec les programmes mobiles. Je pense que c'est pourquoi il est impossible d'élargir le champ de saisie du message, de faire deux lignes ou plus.
Le séparateur de ligne en pointillés est visible dans l'image, lorsque vous survolez, il devient rayé jaune-noir. En déplaçant le séparateur, vous pouvez régler la hauteur du champ pour saisir des messages.
De même, vous pouvez modifier la largeur de la liste de contacts et de la liste des messages.
L'envoi de messages est animé, il n'y avait pas d'animation lors de l'envoi de messages dans d'autres programmes.
Un dégradé de gris et de rose est utilisé pour l'arrière-plan de la liste de contacts, une combinaison similaire peut être trouvée dans le ciel sous la forme d'une lueur.
Les utilisateurs en ligne ont une couleur orange du nom, des pièces (groupes) connectés de couleur noire. Les utilisateurs ne sont pas en ligne et les groupes désactivés sont grisés. Vous pouvez distinguer une pièce d'un utilisateur dans la liste de contacts par nom d'étoile, les noms de pièce commencent par ✯
Les utilisateurs peuvent créer de nouveaux espaces (groupes), ajouter supprimer des utilisateurs des groupes. De plus, il est possible de changer de salle si l'utilisateur éditant a un drapeau administrateur dans la liste des utilisateurs de salle.
Il est possible de transférer des fichiers, les fichiers image sont envoyés immédiatement dans le message et affichés dans le message. Les fichiers vidéo ne sont pas envoyés immédiatement, seule la première image est envoyée, pour télécharger, vous devez exécuter la vidéo. D'autres fichiers ne sont téléchargés de la même manière qu'après avoir cliqué sur le fichier dans le message. La taille maximale du fichier, ainsi que la taille de la partie du fichier dans laquelle les fichiers volumineux sont divisés, est configurée dans push0k admin. Pour envoyer un fichier, vous pouvez utiliser le bouton "envoyer une pièce jointe", vous pouvez également simplement faire glisser et déposer le fichier dans la fenêtre de message. De même, un fichier envoyé à partir d'un message peut être glissé dans le dossier Explorer ou Finder sur Mac OS. En d'autres termes, le glisser-déposer est implémenté pour les fichiers.
Les messages sont des balises html supprimées. Mais il existe une démarque similaire à la démarque.
*
gras *
~
italique ~
_
souligné _
Vous pouvez envoyer des liens, mais le lien doit être un message distinct.
Chaque message a des boutons:
«» Citant le message
➦ transfert de message
Pour une connexion sécurisée au serveur, un bouton avec un verrou est implémenté. La logique est similaire aux navigateurs - un certificat non sécurisé a expiré, auto-signé ou à partir d'un autre nom de domaine, le verrou est ouvert - la connexion n'est pas sûre. Le bouton avec le verrou ouvre les informations du certificat.
Tous les utilisateurs du serveur sont visibles les uns des autres, c'est-à-dire que les contacts de chaque utilisateur sont les autres utilisateurs. Les utilisateurs peuvent renommer leurs contacts. Il est possible de bloquer les notifications de nouveaux messages d'un contact, vous pouvez également bloquer complètement les messages d'un contact.
Les messages n'implémentent pas l'envoi de sourires. Aucune connexion vidéo ou audio. Il n'y a aucun moyen de montrer l'écran de l'utilisateur. À l'avenir, je vais certainement mettre en œuvre certains des éléments ci-dessus.
Téléchargez le client push0k:
fenêtresMac OSL'application se fait sur électron en utilisant vue.js. L'application est gratuite, mais contrairement au serveur décrit dans la première partie de l'article, je n'envisage pas encore d'ouvrir le code source.
Exemple de connexion
La connexion se compose de trois parties:
- Établissez une connexion.
Pour une connexion sécurisée, il s'agit de la messagerie de prise de contact. - Autorisation
Lors de l'autorisation, en plus de la connexion, un hachage est transmis à partir du mot de passe hachage + identifiant de connexion.
Dans le message d'autorisation, les paramètres de l'ordinateur sont transférés: type d'OS, version d'OS, processeur, mémoire, nom d'ordinateur. Ces données de référence sont nécessaires pour les statistiques et comprendre comment le type de système d'exploitation, de processeur et de mémoire affecte la vitesse de connexion, d'échange de données, etc.
Les premières versions du programme ont été réalisées et travaillées à partir de 1s. Habituellement, sur un ordinateur, pas une base de données 1c peut être lancée, mais plusieurs, par exemple, un gestionnaire de mémoire et un BP chez un comptable. Si la solution est utilisée pour prendre en charge la comptabilité, il est important de comprendre à partir de quelle base de données le message du comptable a été envoyé. Lors de l'autorisation, les données de la base de données sont également transmises. - Synchronisation des données.
Après avoir reçu un message d'autorisation réussie, un message de demande de données avec une date est envoyé au serveur. Date la plus grande du dernier message ou du dernier changement d'un utilisateur ou d'une salle (groupe). À la date transmise, nouveaux messages ou utilisateurs modifiés, les chambres (groupes) sont déterminées. La date peut être vide, puis tous les messages sont reçus par les utilisateurs et les chambres, cela peut être la première fois que vous vous connectez.
Après avoir reçu les données de synchronisation, des messages confirmant la réception des données et l'heure calculée de «configuration de la connexion», «autorisation» et «synchronisation des données» sont envoyés au serveur.
Connectez socket.io à la page html.
Pour node.js
- console ouverte
- allez dans le dossier du projet la commande `cd / yourCatalog`
- exécutez la commande d'installation `npm install socket.io`
Exemple de code 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 = 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()) + '"}' );