Introduction du projet
Récemment, il y a un module social dans le projet que j'ai écrit, et il est nécessaire d'implémenter une fonction: lorsqu'un utilisateur est aimé, commenté, suivi, etc., un message doit être poussé par le serveur vers l'utilisateur en temps réel. L'adresse finale du projet est: https://github.com/noinon/socket-message-push. Ici, nous présenterons les idées d'implémentation et certains codes.
Il y a plusieurs objets dans le processus de projet:
Le processus de traitement des événements est le suivant:
Considérez que le serveur de push de messages doit enregistrer les informations de l'utilisateur en ligne actuel afin que les messages puissent être poussés à des utilisateurs spécifiques. Par conséquent, lorsque l'utilisateur se connecte, il doit envoyer ses propres informations utilisateur au serveur Node.js. Afin de réaliser cette messagerie bidirectionnelle en temps réel, il est évident que WebSocket est implémenté. Puisque nous utilisons Node.js sur le serveur de push de message, nous avons une option très pratique: socket.io.
Introduction à socket.io
Socket.io est une bibliothèque de communication bidirectionnelle en temps réel implémenté en JavaScript. Il sera facile de l'utiliser pour implémenter nos fonctions.
Socket.io contient deux parties:
Vous pouvez jeter un œil à l'exemple de code suivant de Socket.io, qui donne l'utilisation de base de socket.io pour émettre et écouter les événements:
io.on ('connexion', function (socket) {socket.emit ('request', / * * /); // émettre un événement à la prise io.emit ('diffuser', / * * /); // émettre un événement à toutes les sockets connectés socket.on ('Répondre', function () {/ * * /}); // écouter l'événement});Il y a une autre chose à noter sur socket.io: socke.io n'est pas entièrement une implémentation de WebSocket.
Remarque: Socket.io n'est pas une implémentation WebSocket. Bien que Socket.io utilise en effet WebSocket comme transport lorsque cela est possible, il ajoute des métadonnées à chaque paquet: le type de paquet, l'espace de noms et l'ID ACK lorsqu'une reconnaissance de message est nécessaire.
Ensuite, nous devons utiliser Express.js pour établir un programme côté serveur et introduire socket.io.
Construction du serveur Node.js
Utilisez Express.js pour créer un serveur de base
Nous avons utilisé Express.js pour construire un serveur de push de message Node.js et utiliser d'abord un bref exemple pour parcourir ses fonctions:
// server.jsconst expression = require ('express'); const app = express (); const path = required ('path'); const http = required ('http'). server (app); const port = 4001; app.use (express.static (path.join (__ dirname, 'public')); app.get ('/', fonction (req, res) {. + '/public/index.html's'); });app.get('/api', function (req, res) {res.sendfile (__ dirname + '/public/index.html's. {console.log (`écoute sur le port: $ {port}`);});Enregistrez le code ci-dessus en tant que server.js, créez un nouveau dossier public et placez le fichier index.html. Exécutez la commande suivante:
node server.js
Vous pouvez maintenant voir l'effet sur LocalHost: 4001.
Présentation de socket.io
Maintenant qu'il existe un serveur express de base, Socket.io doit y être ajouté.
const io = required ('socket.io') (http); io.on ('connexion', fonction (socket) {console.log ('un utilisateur connecté'); socket.broadcast.emit ('new_user', {});}L'IO ici écoute l'événement de connexion. Une fois que le client établit une connexion avec le serveur, la fonction de rappel ici sera appelée (le code du client sera introduit dans la section suivante).
La prise de paramètres de la fonction représente la connexion établie entre le client actuel et le serveur. Vous pouvez imprimer la connexion de socket établie dans le programme client, comme indiqué dans la figure ci-dessous:
L'attribut ID peut être utilisé pour identifier cette connexion afin que le serveur puisse envoyer des messages à un utilisateur spécifique.
socket.broadcast.emit ('new_user', {});Cette ligne de code signifie que le socket diffusera un message nommé New_User à tous les clients ayant actuellement des connexions avec le serveur (à l'exclusion de lui-même).
Processus de traitement des messages push backend
Traitement des informations utilisateur
Pour plus de commodité, un seul tableau est utilisé pour enregistrer des informations utilisateur, qui peuvent être placées dans la base de données selon les besoins dans le travail réel.
global.Users = []; // Enregistrez le tokenide, sockettid de l'utilisateur connecté
Lorsque l'utilisateur se connecte, le client enverra un événement user_login au serveur. Une fois que le serveur l'a reçu, il fera ce qui suit:
socket.on ('user_login', fonction (info) {const {tokenId, userId, socketId} = info; addSocketId (utilisateurs, {tokenId, socketId, userid});});AddSocketId () ajoutera des informations utilisateur au tableau des utilisateurs. Différents utilisateurs peuvent les distinguer via TokenID. Chaque utilisateur possède un tableau de socketides, qui économise plusieurs socketdes qui peuvent exister. Le code spécifique de cette fonction peut être trouvé dans le fichier src / utils.js.
De même, il existe également une fonction depreseTocketId () utilisée pour supprimer les informations utilisateur, et le code peut être vu dans le même fichier.
Après avoir obtenu le tokenID de l'utilisateur, vous devez trouver le socketid correspondant, puis pousser un message vers l'utilisateur spécifique.
// Envoi des messages uniquement à cette connexion avec id = socketId io.sockets.to (socketId) .Emit ('reçoit_message', {entityType, data});L'idée du serveur est à peu près comme ça. Ensuite, présentons comment le traiter en conséquence dans le client.
Client
Initialisation de socket.io
Tout d'abord, introduisez le fichier côté client de socket.io dans le fichier html, par exemple, via CDN:
<script src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"> </ script>
D'autres façons d'introduire:
<script src = "/ socket.io/socket.io.js"></script>const io = require ('socket.io-client'); // ou avec Import Syntaximport io de 'socket.io-client';Après avoir introduit Socket.io, la fonction IO est obtenue et elle est utilisée pour établir une connexion avec le serveur de push de messages.
// Supposons que l'adresse après avoir déployé le serveur de nœuds est: https://www.example.com/ws// alors: ws_host = 'https: //www.example.com'const msgsocket = io (`$ {ws_host}` `, {sécurisé: true, path:' /ws/socket.io '});Si vous écoutez localement:
const msgSocket = io ('http: // localhost: 4001');Si vous l'écrivez comme IO ('https://www.example.com/ws') ici, une erreur se produira et / ws doit être écrit dans le chemin.
Pour pouvoir utiliser cette variable dans d'autres fichiers, MSGSocket peut être utilisé comme variable globale:
window.msgsocket = msgSocket;
Les utilisateurs établissent une connexion
// Lorsque l'utilisateur se connecte, envoyez des informations utilisateur au serveur. Le serveur créera un mappage de socket avec l'utilisateur après avoir reçu le message. msgsocket.emit ('user_login', {userId, socketId: msgsocket.id, tokenId});Traitement après avoir reçu le message poussé
// Une fois la connexion WebSocket établie, écoutez l'événement appelé reçoit_message msgsocket.on ('reçoit_message', msg => {store.dispatch ({type: 'new_socket_msg', upload: msg});});Lorsque le serveur WebSocket pousse un message au client, le client doit écouter l'événement reçoit_message et les paramètres reçus contiennent des informations en attente correspondantes.
Étant donné que Redux est utilisé pour le traitement des données, une action New_Socket_MSG est envoyée ici et le flux de traitement de redux de routine ultérieur est fourni.
Utilisation du projet
Adresse du projet sur GitHub: https://github.com/noinon/socket-message-push
npm run dev
Vous pouvez le tester dans l'environnement de développement, et maintenant vous avez un serveur de push de messages en cours d'exécution sur le port 4001.
Mais il n'y a pas de serveur backend ici pour nous envoyer des messages, nous allons donc utiliser Postman pour simuler des messages d'envoi.
Pour démontrer les fonctions du programme, un fichier index.html est placé dans le dossier client du projet. Notez que ce fichier ne peut pas être utilisé dans les projets réels, il est simplement utilisé pour afficher l'effet de la poussée de message.
Après avoir allumé le serveur, ouvrez le client / index.html et entrez un tokenID comme vous le souhaitez selon les invites.
Utilisez maintenant Postman pour publier le message suivant à LocalHost: 4001 / API:
{// Le tableau des jetons indique quel utilisateur vous souhaitez pousser le message "Tokens": ["1", "2"], "Data": "Vous ne passerez pas !!!"}À ce stade, si tout se passe bien, vous devriez être en mesure de voir le message reçu dans la console du client.
Vous pouvez ouvrir plusieurs pages clients, entrer différents tokenides, puis vérifier si le message est envoyé à l'utilisateur correct.
Résumer
Ce qui précède est ce que l'éditeur vous a présenté pour utiliser socket.io pour réaliser la fonction de poussée de message en temps réel. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!