Usando o Socket.io para realizar a função Push de mensagem em tempo real

Introdução de fundo do projeto

Recentemente, existe um módulo social no projeto que escrevi e é necessário implementar uma função: quando um usuário é apreciado, comentado, seguido etc. Ocorre, uma mensagem precisa ser empurrada pelo servidor para o usuário em tempo real. O endereço final do projeto é: https://github.com/noiron/socket-message-push. Aqui, apresentaremos as idéias de implementação e alguns códigos.

Existem vários objetos no processo do projeto:

• Servidor de back -end implementado em Java
• Mensagem Push Server implementado com Node.js
• O cliente que o usuário opera

O processo de processamento de eventos é o seguinte:

• Quando um usuário executa uma operação semelhante, o servidor de back -end o processa e envia uma mensagem para o Node.js Message Push Server.
• Depois de receber a mensagem enviada pelo back -end, a mensagem Node.js Push Server processa os dados e determina qual usuário empurrá -los para
• Depois que o cliente do usuário recebe a mensagem enviada pelo servidor Node.js, ele pode exibir a notificação.
• No processo acima, como o Java Backend Server é implementado não está dentro do escopo deste artigo. Este artigo apresentará principalmente como usar o Node.js para implementar este servidor de push de mensagem.

Considere que a mensagem Push Server deve gravar as informações do usuário on -line atual para que as mensagens possam ser enviadas para usuários específicos. Portanto, quando o usuário efetua login, ele deve enviar suas próprias informações do usuário para o servidor Node.js. Para alcançar essas mensagens bidirecionais em tempo real, é óbvio que o WebSocket é implementado. Como usamos o Node.js no servidor de push da mensagem, temos uma opção muito conveniente: Socket.io.

Introdução ao soquete.io

Socket.io é uma biblioteca de comunicação bidirecional em tempo real implementada no JavaScript. Será fácil usá -lo para implementar nossas funções.

Socket.io contém duas partes:

• Servidor: Execute no Node.js Server
• Cliente: Execute no navegador

Você pode dar uma olhada no seguinte código de exemplo de soquete.io, que fornece o uso básico do soquete.io para emitir e ouvir eventos:

 io.on ('conexão', function (soquete) {socket.emit ('request', / * * /); // emite um evento no soquete io.emit ('transmissão', / * * /); // emite um evento a todos os soquetes conectados Socket.on ('Responder', function () { / * /});

Há outra coisa a ser observada sobre o Socket.io: Socke.io não é inteiramente uma implementação do WebSocket.

Nota: Socket.io não é uma implementação do WebSocket. Embora o Socket.io realmente use o WebSocket como um transporte, quando possível, ele adiciona alguns metadados a cada pacote: o tipo de pacote, o espaço para nome e o ACK ID quando é necessário um reconhecimento de mensagem.
Em seguida, precisamos usar o Express.js para estabelecer um programa do lado do servidor e introduzir o soquete.io.

Construção do servidor Node.js.

Use Express.js para construir um servidor básico

Usamos o Express.js para construir um servidor Node.js Message Push e primeiro usamos um breve exemplo para procurar suas funções:

 // server.jSconst Expression = requer ('expresso'); const app = express (); const path = requer ('caminho'); const http = requer ('http'). server (app); const porta = 4001; app.Use (expresso.static (path.Join (__ Dirname, 'public'))); + '/public/index.html');}) ;pp.get('/api', function (req, res) {res.sendfile (__ Dirname + '/public/index.html');) ;pt. {console.log (`escuta na porta: $ {porta}`);});

Salve o código acima como Server.js, crie uma nova pasta pública e coloque o arquivo index.html. Execute o seguinte comando:

node server.js

Agora você pode visualizar o efeito no localhost: 4001.

Apresentando soquete.io

Agora que existe um servidor expresso básico, o Socket.io precisa ser adicionado a ele a seguir.

 const io = requer ('soket.io') (http); io.on ('conexão', function (soquete) {console.log ('um usuário conectado'); soket.broadcast.emit ('new_user', {});}

O IO aqui ouve o evento de conexão. Depois que o cliente estabelecer uma conexão com o servidor, a função de retorno de chamada aqui será chamada (o código no cliente será introduzido na próxima seção).

O soquete de parâmetro da função representa a conexão estabelecida entre o cliente atual e o servidor. Você pode imprimir a conexão de soquete estabelecida no programa do cliente, conforme mostrado na figura abaixo:

O atributo ID pode ser usado para identificar essa conexão para que o servidor possa enviar mensagens para um usuário específico.

 socket.broadcast.emit ('new_user', {});

Essa linha de código significa que o soquete transmitirá uma mensagem chamada new_user para todos os clientes atualmente com conexões com o servidor (excluindo -se).

Processo de processamento de mensagens de back -end

• Crie uma tabela de mapeamento de informações do usuário e ID do soquete no servidor do nó. Como o mesmo usuário pode ter várias páginas abertas, pode haver vários valores para o seu ID de soquete. Quando um usuário estabelecer uma conexão, adicione um valor a ele; Depois que o usuário desconecta, exclua o valor correspondente.
• Quando há uma mensagem que precisa ser pressionada no fundo Java, uma mensagem é publicada no caminho do Node Server /API, incluindo o tokenid e outros dados usados para identificar o usuário.
• Depois que o servidor Node recebe a solicitação de postagem, ele processa o conteúdo solicitado. Encontre o ID do soquete correspondente ao usuário com base no tokenid, o Socket.io empurrará as mensagens para o usuário com base no ID.

Processamento das informações do usuário

Por conveniência, apenas uma matriz é usada para salvar as informações do usuário, que podem ser colocadas no banco de dados, conforme necessário no trabalho real.

 global.users = []; // Registre o soquete tokenid, do usuário logado

Quando o usuário faz login, o cliente enviará um evento User_login para o servidor. Depois que o servidor o receber, ele fará o seguinte:

 Socket.on ('user_login', function (info) {const {tokenid, userID, soketId} = info; addSocketId (usuários, {tokenid, soketId, userID});});

addSocketId () adicionará informações do usuário à matriz dos usuários. Diferentes usuários podem distingui -los através do Tokenid. Cada usuário possui uma matriz de soquete, que salva vários soquedos que podem existir. O código específico desta função pode ser encontrado no arquivo SRC/UTILS.JS.

Da mesma forma, também existe uma função deleteSocketId () usada para excluir as informações do usuário, e o código pode ser visto no mesmo arquivo.

Depois de obter o tokenid do usuário, você precisa encontrar o soquete correspondente e, em seguida, empurrar uma mensagem para o usuário específico.

 // Envie mensagens apenas para esta conexão com id = soketId io.sockets.to (soketID) .emit ('receba_message', {entityType, dados});

A ideia do servidor é aproximadamente assim. Em seguida, vamos introduzir como processá -lo de acordo com o cliente.

Cliente

Inicialização do soquete.io

Primeiro, apresente o arquivo lateral do cliente do soquete.io no arquivo html, por exemplo, através da CDN:

 <script src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"> </script>

Outras maneiras de introduzir:

 <script src = "/socket.io/socket.io.js"></script>const io = requer ('soket.io-client'); // ou com importação sintaximport io de 'soket.io-client';

Após a introdução do soquete.IO, a função de IO é obtida e é usada para estabelecer uma conexão com o servidor de push de mensagens.

 //Suponha que o endereço depois de implantar o servidor do nó seja: https://www.example.com/ws// então: ws_host = 'https: //ww.example.com'Const MSGSocket = io (`$ {ws_host}` {{{`` `{ws_hos

Se ouvir localmente:

 const msgsocket = io ('http: // localhost: 4001');

Se você escrever como io ('https://www.example.com/ws') aqui, ocorrerá um erro e/WS precisará ser escrito no caminho.

Para poder usar essa variável em outros arquivos, o MSGSocket pode ser usado como uma variável global:

 window.msgsocket = msgsocket;

Os usuários estabelecem conexão

 // Quando o usuário faz login, envie as informações do usuário para o servidor. O servidor criará um mapeamento de soquete com o usuário após receber a mensagem. msgsocket.emit ('user_login', {userID, soketID: msgsocket.id, tokenid});

Processando depois de receber a mensagem empurrada

 // Depois que a conexão do WebSocket for estabelecida, ouça o evento chamado Receba_Message msgsocket.on ('Receber_message', msg => {store.dispatch ({type: 'new_socket_msg', carga de pagamento: msg});});

Quando o WebSocket Server empurra uma mensagem para o cliente, o cliente precisa ouvir o evento Receber_message e os parâmetros recebidos contêm informações pendentes correspondentes.

Como o Redux é usado para processamento de dados, uma ação new_socket_msg é despachada aqui e o fluxo de processamento Redux de rotina subsequente é fornecido.

Uso do projeto

Endereço do projeto no github: https://github.com/noiron/socket-sessage-push

npm run dev

Você pode testá -lo no ambiente de desenvolvimento e agora tem um servidor de push de mensagem em execução na porta 4001.

Mas não há servidor de back -end aqui para enviar mensagens para nós, por isso usaremos o Postman para simular o envio de mensagens.

Para demonstrar as funções do programa, um arquivo index.html é colocado na pasta do cliente do projeto. Observe que esse arquivo não pode ser usado em projetos reais, é usado apenas para exibir o efeito do esforço da mensagem.

Depois de ativar o servidor, o Open Client/Index.html e insira um tokenid como você gosta de acordo com os prompts.

Agora use o Postman para postar a seguinte mensagem para localhost: 4001/API:

 {// A matriz dos tokens indica qual usuário você deseja empurrar a mensagem "Tokens": ["1", "2"], "Data": "você não deve passar !!!"}

Neste ponto, se tudo correr bem, você poderá ver a mensagem recebida no console do cliente.

Você pode abrir várias páginas do cliente, inserir tokenids diferentes e verificar se a mensagem é enviada ao usuário correto.

Resumir

O exposto acima é o que o editor apresentou a você para usar o Socket.io para realizar a função Push de mensagem em tempo real. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!