Maison > Article > interface Web > Comment transférer les données nodejs vers le front-end

Comment transférer les données nodejs vers le front-end

WBOYoriginal: 2023-05-14 12:31:371489parcourir

Avec la popularité de Node.js, de plus en plus de développeurs commencent à utiliser cette technologie pour créer des applications Web. En tant que technologie back-end, Node.js peut transmettre des données à la page front-end de différentes manières. Voici quelques techniques pour transférer les données Node.js vers le front-end :

API RESTful

L'API RESTful est actuellement l'une des architectures de services Web les plus populaires. Node.js peut utiliser des frameworks tels que Express.js ou Hapi pour développer des API RESTful. L'API RESTful est basée sur le protocole HTTP, qui peut envoyer des données au client via les méthodes GET, POST, PUT ou DELETE. Le front-end demande ces API via AJAX, puis le serveur renvoie les données au format JSON (JavaScript Object Notation) pour une utilisation par le front-end.

Voici un exemple simple :

Tout d'abord, nous devons créer un code côté serveur à l'aide du framework Express.js :

const express = require('express');
const app = express();

app.get('/api/users', (req, res) => {
  const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Chris', age: 35 },
  ];
  res.json(users);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

Ici, nous utilisons le framework Express.js pour créer une API RESTful. Lorsque le client demande /api/users, le serveur renvoie des données JSON contenant des informations utilisateur.

Faites des appels AJAX à l'aide de jQuery :

$.ajax({
  url: '/api/users',
  type: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, textStatus, error) {
    console.log(xhr.statusText);
  }
});

WebSockets

WebSocket est un protocole de communication en temps réel qui permet une communication bidirectionnelle entre le navigateur et le serveur. Node.js peut utiliser la bibliothèque socket.io pour implémenter la fonctionnalité WebSocket. À l'aide de WebSockets, le serveur peut transmettre des données en temps réel au client, ce qui est plus efficace que les méthodes d'interrogation courte et d'interrogation longue (polling).

Voici un exemple simple :

Tout d'abord, nous devons créer le code côté serveur, en utilisant la bibliothèque socket.io :

const app = require('http').createServer(handler);
const io = require('socket.io')(app);
const fs = require('fs');

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

function handler(req, res) {
  fs.readFile(__dirname + '/index.html', function(err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }
    res.writeHead(200);
    res.end(data);
  });
}

io.on('connection', function(socket) {
  setInterval(() => {
    const number = Math.floor(Math.random() * 10);
    socket.emit('number', number);
  }, 1000);
});

Ici, nous utilisons la bibliothèque socket.io pour créer un serveur WebSocket. Lorsque le client se connecte au serveur, le serveur démarre une minuterie avec un intervalle de 1 seconde et envoie un nombre aléatoire au client.

Code client (index.html) :

<!doctype html>
<html>
  <head>
    <title>WebSockets Example</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
    <script>
      var socket = io.connect('http://localhost:3000');
      socket.on('number', (data) => {
        document.getElementById('container').innerHTML = 'Random number: ' + data;
      });
    </script>
  </body>
</html>

Ici, nous utilisons la bibliothèque socket.io pour établir une connexion WebSocket avec le serveur et enregistrer l'écouteur d'événement 'numéro'. Lorsque le serveur transmet un numéro, le client affichera le numéro.

Événements envoyés par le serveur

Les événements envoyés par le serveur (SSE) sont une technologie qui transmet un flux d'événements au client. SSE permet au serveur d'envoyer des données au client en temps réel sans que le client ne fasse de requête au serveur. Node.js peut utiliser la bibliothèque EventSource pour prendre en charge le streaming d'événements push du serveur.

Ce qui suit est un exemple simple :

Code du serveur :

const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  });

  setInterval(() => {
    const data = { time: new Date().toTimeString() };
    res.write(`event: time
`);
    res.write(`data: ${JSON.stringify(data)}

`);
  }, 1000);
}).listen(3000);

console.log('Server started on port 3000');

Ici, nous utilisons le module HTTP de Node.js pour créer un serveur SSE. Lorsque le client se connecte au serveur, le serveur enverra un flux d'événements et enverra un message contenant l'heure actuelle toutes les 1 secondes.

Code client :

<!doctype html>
<html>
  <head>
    <title>Server-Sent Events Example</title>
  </head>
  <body>
    <div id="container"></div>
    <script>
      const eventSource = new EventSource('http://localhost:3000');
      eventSource.addEventListener('time', (event) => {
        const data = JSON.parse(event.data);
        document.getElementById('container').innerHTML = data.time;
      });
    </script>
  </body>
</html>

Ici, nous utilisons l'objet EventSource de JavaScript pour écouter le flux d'événements poussé par le serveur. Lorsqu'il y a un événement « heure » dans le flux d'événements, le client affichera l'heure actuelle.

Conclusion

En utilisant la technologie ci-dessus, nous pouvons facilement transférer des données de Node.js vers la page frontale. Les API RESTful, les WebSockets et les événements envoyés par le serveur sont d'excellents moyens d'atteindre cet objectif.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript node.js restful 架构 json jquery ajax html express Object delete JS number 对象事件 http websocket

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：tutoriel d'installation de nodejsArticle suivant：tutoriel d'installation de nodejs

Articles Liés

Voir plus