Introducción de fondo del proyecto
Recientemente, hay un módulo social en el proyecto que he escrito, y es necesario implementar una función: cuando se le gusta, comenta, seguido, seguido, etc., se produce un mensaje, el servidor debe enviar un mensaje al usuario en tiempo real. La dirección final del proyecto es: https://github.com/noiron/socket-message-push. Aquí presentaremos las ideas de implementación y algunos códigos.
Hay varios objetos en el proceso del proyecto:
El proceso de procesamiento de eventos es el siguiente:
Considere que el servidor de mensajes debe registrar la información del usuario en línea actual para que los mensajes puedan ser impulsados a usuarios específicos. Por lo tanto, cuando el usuario inicia sesión, él o ella debe enviar su propia información del usuario al servidor Node.js. Para lograr esta mensajería bidireccional en tiempo real, es obvio que se implementa WebSocket. Dado que usamos Node.js en el servidor de mensajes, tenemos una opción muy conveniente: Socket.io.
Introducción a Socket.io
Socket.io es una biblioteca de comunicación bidireccional en tiempo real implementada en JavaScript. Será fácil usarlo para implementar nuestras funciones.
Socket.io contiene dos partes:
Puede echar un vistazo al siguiente código de ejemplo de Socket.io, que proporciona el uso básico de Socket.io para emitir y escuchar eventos:
io.on ('conexión', function (socket) {socket.emit ('request', / * * /); // emite un evento al socket io.emit ('broadcast', / * * /); // emitir un evento a todos los sockets conectados Socket.on ('responder', function () { * * /}); // Escuchar el evento});Hay otra cosa que tener en cuenta sobre Socket.io: Socke.io no es completamente una implementación de WebSocket.
Nota: Socket.io no es una implementación de WebSocket. Aunque Socket.io de hecho usa WebSocket como transporte cuando es posible, agrega algunos metadatos a cada paquete: el tipo de paquete, el espacio de nombres y la ID ACK cuando se necesita un reconocimiento de mensaje.
A continuación, debemos usar Express.js para establecer un programa del lado del servidor e introducir Socket.io.
Construcción del servidor node.js
Use Express.js para construir un servidor básico
Utilizamos Express.js para construir un servidor de mensajes node.js, y primero usamos un breve ejemplo para navegar por sus funciones:
// server.jsconst expresion = require ('express'); const app = express (); const path = require ('path'); const http = require ('http'). server (app); const = 4001; app.use (express.static (path.join (__ dirn dirni + '/public/index.html');}) ;papp.get('/api', function (req, res) {res.sendFile (__ dirname + '/public/index.html'); }); console.log (`escuchar en el puerto: $ {puerto}`);});Guarde el código anterior como server.js, cree una nueva carpeta pública y coloque el archivo index.html en él. Ejecute el siguiente comando:
node server.js
Ahora puede ver el efecto en Localhost: 4001.
Introducción de Socket.io
Ahora que hay un servidor expreso básico, Socket.io debe agregarse a él a continuación.
const io = require ('Socket.io') (http); io.on ('conexión', function (socket) {console.log ('un usuario conectado'); Socket.broadcast.emit ('new_user', {});}El IO aquí escucha el evento de conexión. Después de que el cliente establezca una conexión con el servidor, se llamará a la función de devolución de llamada aquí (el código en el cliente se introducirá en la siguiente sección).
El socket de parámetros de la función representa la conexión establecida entre el cliente actual y el servidor. Puede imprimir la conexión de socket establecida en el programa del cliente, como se muestra en la figura a continuación:
El atributo de identificación se puede usar para identificar esta conexión para que el servidor pueda enviar mensajes a un usuario específico.
Socket.broadcast.emit ('new_user', {});Esta línea de código significa que el socket transmitirá un mensaje llamado New_user a todos los clientes que actualmente tienen conexiones con el servidor (excluyendo a sí mismo).
Proceso de procesamiento de mensajes de empuje de backend
Procesamiento de la información del usuario
Por conveniencia, solo se utiliza una matriz para guardar información del usuario, que se puede colocar en la base de datos según sea necesario en el trabajo real.
global.users = []; // Registre el tokenid, el socketid del usuario iniciado
Cuando el usuario inicia sesión, el cliente enviará un evento user_login al servidor. Después de que el servidor lo reciba, hará lo siguiente:
Socket.on ('user_login', function (info) {const {tokenID, userId, SocketId} = info; addSocketId (usuarios, {tokenID, SocketId, userId});});AddSocketId () agregará información de usuario a la matriz de usuarios. Diferentes usuarios pueden distinguirlos a través de Tokenid. Cada usuario tiene una matriz SocketIDs, que guarda múltiples socios que pueden existir. El código específico de esta función se puede encontrar en el archivo src/utils.js.
Del mismo modo, también hay una función DeleteSocket () utilizada para eliminar la información del usuario, y el código se puede ver en el mismo archivo.
Después de obtener el tokenida del usuario, debe encontrar el SocketID correspondiente y luego enviar un mensaje al usuario específico.
// Enviar mensajes solo a esta conexión con id = Socketid io.sockets.to (SocketID) .Emit ('recibe_message', {entityType, data});La idea del servidor es más o menos así. A continuación, presentemos cómo procesarlo en consecuencia en el cliente.
Cliente
Inicialización de Socket.io
Primero, introduzca el archivo del lado del cliente de Socket.io en el archivo HTML, por ejemplo, a través de CDN:
<script src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"> </script>
Otras formas de introducir:
<script src = "/socket.io/socket.io.js"></script>const io = request ('Socket.io-client'); // o con importación de syntaxImport io desde 'Socket.io-client';Después de introducir Socket.io, se obtiene la función IO y se utiliza para establecer una conexión con el servidor de mensajes.
// Suponga que la dirección después de implementar el servidor de nodo es: https://www.example.com/ws// entonces: ws_host = 'https: //www.example.com'const msgsocket = io (`$ {ws_host}`, {seguro: true, path:' /ws/socket.io '});Si escucha localmente:
const msgsocket = io ('http: // localhost: 4001');Si lo escribe como io ('https://www.example.com/ws') aquí, se producirá un error, y/ws debe escribirse en la ruta.
Para poder usar esta variable en otros archivos, Msgsocket se puede usar como una variable global:
Window.msgsocket = msgsocket;
Los usuarios establecen la conexión
// Cuando el usuario inicia sesión, envíe información del usuario al servidor. El servidor creará una asignación de socket con el usuario después de recibir el mensaje. msgsocket.emit ('user_login', {userId, SocketID: msgsocket.id, tokenid});Procesar después de recibir el mensaje empujado
// Después de establecer la conexión WebSocket, escuche el evento llamado recibe_message msgsocket.on ('recibe_message', msg => {store.dispatch ({type: 'new_socket_msg', carga útil: msg});});Cuando el servidor WebSocket presenta un mensaje al cliente, el cliente debe escuchar el evento Recibe_Message, y los parámetros recibidos contienen la información pendiente correspondiente.
Dado que Redux se utiliza para el procesamiento de datos, aquí se envía una acción new_socket_msg, y se proporciona el flujo de procesamiento de Redux de rutina posterior.
Uso del proyecto
Dirección del proyecto en Github: https://github.com/noiron/socket-message-push
npm run dev
Puede probarlo en el entorno de desarrollo, y ahora tiene un servidor de mensajes que se ejecuta en el puerto 4001.
Pero no hay un servidor de backend aquí para enviarnos mensajes, por lo que usaremos Postman para simular el envío de mensajes.
Para demostrar las funciones del programa, se coloca un archivo index.html en la carpeta del cliente del proyecto. Tenga en cuenta que este archivo no se puede utilizar en proyectos reales, solo se usa para mostrar el efecto del mensaje de mensajes.
Después de encender el servidor, abra client/index.html e ingrese un tokenida como desee de acuerdo con las indicaciones.
Ahora use Postman para publicar el siguiente mensaje en Localhost: 4001/API:
{// La matriz de tokens indica qué usuario desea presionar el mensaje "tokens": ["1", "2"], "datos": "¡No pasará!"}En este punto, si todo va bien, debería poder ver el mensaje recibido en la consola del cliente.
Puede abrir varias páginas de clientes, ingresar diferentes tokenidos y luego verificar si el mensaje se envía al usuario correcto.
Resumir
Lo anterior es lo que el editor le presentó para usar Socket.io para realizar la función de empuje de mensajes en tiempo real. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!