Continuação da
publicação "Server push messages"Ao desenvolver a parte do cliente, não havia objetivo de repetir e fazer o design como os outros.
Por outro lado, é difícil alterar e fazer um novo arranjo de áreas na versão desktop. A área de contato à esquerda, a mensagem à direita, a área de entrada para uma nova mensagem na parte inferior, não é tão fácil de tornar melhor e mais conveniente. Em muitas soluções modernas, os elementos de design e design são os mesmos nos programas móveis. Eu acho que é por isso que é impossível expandir o campo de entrada da mensagem, fazer duas ou mais linhas.
O separador de linhas tracejadas é visível na imagem; quando você passa o mouse, ele fica com listras amarelas, pretas e pretas. Movendo o separador, você pode ajustar a altura do campo para inserir mensagens.
Da mesma forma, você pode alterar a largura da lista de contatos e de mensagens.
O envio de mensagens é animado, não houve animação ao enviar mensagens em outros programas.
Um gradiente de cinza e rosa é usado para o fundo da lista de contatos. Uma combinação semelhante pode ser encontrada no céu na forma de um brilho.
Usuários on-line têm uma cor laranja do nome, salas conectadas (grupos) de cor preta. Os usuários não estão online e os grupos desativados estão em cinza. Você pode distinguir uma sala de um usuário na lista de contatos pelo nome da estrela, os nomes das salas começam com ✯
Os usuários podem criar novas salas (grupos), adicionar remover usuários de grupos. Além disso, é possível alterar as salas se o usuário de edição tiver um sinalizador de administrador na lista de usuários da sala.
É possível transferir arquivos, os arquivos de imagem são enviados imediatamente na mensagem e exibidos na mensagem. Os arquivos de vídeo não são enviados imediatamente, apenas o primeiro quadro é enviado. Para fazer o download, você deve executar o vídeo. Da mesma forma, outros arquivos são baixados somente depois de clicar no arquivo da mensagem. O tamanho máximo do arquivo, bem como o tamanho da parte do arquivo na qual os arquivos grandes são divididos, é configurado em push0k admin. Para enviar um arquivo, você pode usar o botão "enviar anexo", também pode simplesmente arrastar e soltar o arquivo na janela de mensagem. Da mesma forma, um arquivo enviado de uma mensagem pode ser arrastado para a pasta Explorer ou localizador no Mac OS. Em outras palavras, o recurso arrastar e soltar é implementado para arquivos.
As mensagens são excluídas tags html. Mas há remarcações semelhantes às remarcações.
*
negrito *
~
itálico ~
_
sublinhado _
Você pode enviar links, mas o link deve ser uma mensagem separada.
Cada mensagem possui botões:
“” Citando a mensagem
➦ encaminhamento de mensagens
Para uma conexão segura com o servidor, um botão com um bloqueio é implementado. A lógica é semelhante aos navegadores - um certificado inseguro expirou, autoassinado ou de outro nome de domínio, o bloqueio está aberto - a conexão não é segura. O botão com a trava abre as informações do certificado.
Todos os usuários do servidor são visíveis um ao outro, ou seja, os contatos de cada usuário são outros usuários. Os usuários podem renomear seus contatos. É possível bloquear notificações de novas mensagens de um contato, você também pode bloquear completamente as mensagens de um contato.
As mensagens não implementam o envio de sorrisos. Sem conexão de vídeo ou áudio. Não há como demonstrar a tela do usuário. No futuro, implementarei definitivamente algumas das opções acima.
Faça o download do cliente push0k:
janelasMac OSA aplicação é feita no elétron usando vue.js. O aplicativo é gratuito, mas diferente do servidor descrito na primeira parte do artigo, ainda não pretendo abrir o código-fonte.
Exemplo de conexão
A conexão consiste em três partes:
- Estabeleça uma conexão.
Para uma conexão segura, trata-se de mensagens de handshake. - Autorização
Durante a autorização, além do logon, um hash é transmitido a partir do hash da senha + do ID da conexão.
Na mensagem de autorização, os parâmetros do computador são transferidos: tipo de SO, versão do SO, processador, memória, nome do computador. Esses dados de referência são necessários para estatísticas e para entender como o tipo de SO, processador e memória afeta a velocidade da conexão, troca de dados, etc.
As primeiras versões do programa foram feitas e trabalhadas a partir de 1s. Normalmente, em um computador, nenhum banco de dados 1c pode ser iniciado, mas vários, por exemplo, um gerenciador de memória e um BP em um contador. Se a solução for usada para dar suporte à contabilidade, é importante entender de qual banco de dados a mensagem do contador foi enviada. Durante a autorização, os dados do banco de dados também são transmitidos. - Sincronização de dados.
Depois de receber uma mensagem sobre a autorização bem-sucedida, uma mensagem de solicitação de dados com uma data é enviada ao servidor. A maior data da última mensagem ou da última alteração de um usuário ou sala (grupo). Até a data de transmissão, novas mensagens ou usuários alterados, salas (grupos) são determinadas. A data pode estar vazia e todas as mensagens são recebidas por usuários e salas. Essa pode ser a primeira vez que você se conecta.
Depois de receber os dados de sincronização, as mensagens confirmando o recebimento dos dados e o tempo calculado de "configuração da conexão", "autorização" e "sincronização de dados" são enviadas ao servidor.
Conecte socket.io à página html.
Para node.js
- console aberto
- vá para a pasta do projeto, o comando `cd / yourCatalog`
- execute o comando de instalação `npm install socket.io`
Código de exemplo do 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()) + '"}' );