Comment transférer les données nodejs vers le front-end-Questions et réponses frontales-php.cn

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

WBOY

Libérer： 2023-05-14 12:31:37

original

1479 Les gens l'ont consulté

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');
});

Copier après la connexion

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);
  }
});

Copier après la connexion

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);
});

Copier après la connexion

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>

Copier après la connexion

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');

Copier après la connexion

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>

Copier après la connexion

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!