So übertragen Sie NodeJS-Daten an das Frontend-Front-End-Fragen und Antworten-php.cn

So übertragen Sie NodeJS-Daten an das Frontend

WBOY

Freigeben： 2023-05-14 12:31:37

Original

1525 Leute haben es durchsucht

Mit der Popularität von Node.js beginnen immer mehr Entwickler, diese Technologie zum Erstellen von Webanwendungen zu nutzen. Als Back-End-Technologie kann Node.js auf verschiedene Weise Daten an die Front-End-Seite übertragen. Hier sind einige Techniken zum Übertragen von Node.js-Daten an das Frontend:

RESTful API

RESTful API ist derzeit eine der beliebtesten Webservice-Architekturen. Node.js kann Frameworks wie Express.js oder Hapi verwenden, um RESTful-APIs zu entwickeln. Die RESTful-API basiert auf dem HTTP-Protokoll, das Daten über die Methoden GET, POST, PUT oder DELETE an den Client senden kann. Das Front-End fordert diese APIs über AJAX an, und dann gibt der Server Daten im JSON-Format (JavaScript Object Notation) zur Verwendung durch das Front-End zurück.

Hier ist ein einfaches Beispiel:

Zuerst müssen wir einen serverseitigen Code mit dem Express.js-Framework erstellen:

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

Nach dem Login kopieren

Hier verwenden wir das Express.js-Framework, um eine RESTful-API zu erstellen. Wenn der Client /api/users anfordert, gibt der Server JSON-Daten zurück, die Benutzerinformationen enthalten.

AJAX-Aufrufe mit jQuery durchführen:

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

Nach dem Login kopieren

WebSockets

WebSocket ist ein Echtzeit-Kommunikationsprotokoll, das eine bidirektionale Kommunikation zwischen dem Browser und dem Server ermöglicht. Node.js kann die Bibliothek socket.io verwenden, um die WebSocket-Funktionalität zu implementieren. Mithilfe von WebSockets kann der Server Echtzeitdaten an den Client senden, was effizienter ist als kurze und lange Abfragemethoden (Polling).

Hier ist ein einfaches Beispiel:

Zuerst müssen wir den serverseitigen Code mithilfe der socket.io-Bibliothek erstellen:

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

Nach dem Login kopieren

Hier verwenden wir die socket.io-Bibliothek, um einen WebSocket-Server zu erstellen. Wenn der Client eine Verbindung zum Server herstellt, startet der Server einen Timer im Abstand von 1 Sekunde und sendet eine Zufallszahl an den Client.

Client-Code (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>

Nach dem Login kopieren

Hier verwenden wir die socket.io-Bibliothek, um eine WebSocket-Verbindung mit dem Server herzustellen und den Ereignis-Listener „Nummer“ zu registrieren. Wenn der Server eine Nummer übergibt, zeigt der Client die Nummer an.

Server-Sent Events

Server-Sent Events (SSE) ist eine Technologie, die einen Strom von Ereignissen an den Client weiterleitet. SSE ermöglicht es dem Server, Daten in Echtzeit an den Client zu senden, ohne dass der Client eine Anfrage an den Server stellt. Node.js kann die EventSource-Bibliothek verwenden, um das Streaming von Server-Push-Ereignissen zu unterstützen.

Das Folgende ist ein einfaches Beispiel:

Servercode:

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

Nach dem Login kopieren

Hier verwenden wir das HTTP-Modul von Node.js, um einen SSE-Server zu erstellen. Wenn der Client eine Verbindung zum Server herstellt, sendet der Server alle 1 Sekunde einen Ereignisstrom und eine Nachricht mit der aktuellen Uhrzeit.

Client-Code:

<!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>

Nach dem Login kopieren

Hier verwenden wir das EventSource-Objekt von JavaScript, um den vom Server gepushten Ereignisstrom abzuhören. Wenn im Ereignisstrom ein „Zeit“-Ereignis vorhanden ist, zeigt der Client die aktuelle Uhrzeit an.

Fazit

Durch den Einsatz der oben genannten Technologie können wir problemlos Daten von Node.js auf die Front-End-Seite übertragen. RESTful APIs, WebSockets und vom Server gesendete Ereignisse sind hervorragende Möglichkeiten, dieses Ziel zu erreichen.

Das obige ist der detaillierte Inhalt vonSo übertragen Sie NodeJS-Daten an das Frontend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!