So rufen Sie NodeJS im Frontend auf

Als Front-End-Entwickler stoßen wir häufig auf Situationen, in denen wir die Back-End-Schnittstelle aufrufen müssen. Als schnelle und skalierbare JavaScript-Laufzeitumgebung ist Node.js in der Lage, I/O-intensive Vorgänge zu verarbeiten. Daher ist der Aufruf der Backend-Schnittstelle von Node.js eine gute Wahl. In diesem Artikel stellen wir vor, wie das Front-End Node.js-Methoden aufruft.

1. Verwenden Sie die Ajax-Technologie, um Node.js aufzurufen.

Ajax ist eine der gebräuchlichsten Methoden für das Front-End, um die serverseitige Schnittstelle aufzurufen. Die Implementierung des Codes ist relativ einfach, eignet sich für die unidirektionale Informationsübertragung und erfordert nicht die Aktualisierung der gesamten Seite, wodurch ein ähnlicher Effekt wie bei einer teilweisen Aktualisierung erzielt wird, wodurch die Belastung des Servers verringert wird. Das Folgende ist ein Codebeispiel für die Verwendung von Ajax zum Aufrufen von Node.js:

1. Vorbereitung

Zuerst müssen Sie einen Back-End-Dienst in Node.js schreiben, der die entsprechende Antwort basierend auf der von gesendeten Anfrage zurückgibt Frontend. Der folgende Beispielcode zeigt, wie ein Node.js-Backend-Dienst implementiert wird:

const http = require('http');
const server = http.createServer((req, res) => {

res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World

') ;
});
server.listen(3000, '127.0.0.1');
console.log('Server läuft unter http://127.0.0.1:3000/');

2. Senden Sie eine Anfrage

an Im Front-End-Code können wir den Back-End-Dienst von Node.js über die Ajax-Technologie aufrufen. Das Folgende ist ein einfacher Beispielcode:

function ajaxCall() {

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("myDiv").innerHTML = this.responseText;
    }
};
xmlhttp.open("GET", "http://localhost:3000", true);
xmlhttp.send();

}

Hier verwenden wir das XMLHttpRequest-Objekt, um die Verbindung mit dem Server über die open()-Funktion zu öffnen, und die send()-Funktion kann senden eine Anfrage an den Server. Bei der Anfrage handelt es sich hier um eine GET-Anfrage, mit der die Antwort des Servers abgerufen wird.

2. Verwenden Sie WebSocket, um Node.js aufzurufen.

WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das hauptsächlich zur Übertragung von Echtzeitdaten verwendet wird. Über WebSocket kann das Front-End in Echtzeit eine bidirektionale Kommunikation mit der Serverseite durchführen. Das Folgende ist ein Codebeispiel für den Aufruf von Node.js mit WebSocket:

1. Vorbereitung

Zuerst müssen Sie einen WebSocket-Backend-Dienst in Node.js schreiben, der eine WebSocket-Antwort mit dem Frontend erstellt. Das Folgende ist ein einfacher Democode:

const http = require('http');
const WebSocket = require('ws');
const wss = new WebSocket.Server( { server });
wss.on('connection', (ws) => {

console.log('A new client connected!');
ws.on('message', (message) => {
    console.log(`Received message => ${message}`);
    ws.send(`Hello, you sent => ${message}`);
});
ws.send('Welcome to the WebSocket server!');

});

server.listen(3000, () => {

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

});

2. Senden einer Anfrage

Im Front-End-Code können wir über WebSocket eine Verbindung mit Node.js herstellen, Anfragen an Node.js senden und Antworten erhalten. Das Folgende ist ein einfacher Democode:

const socket = new WebSocket('ws://localhost:3000');

socket.onopen = () => {

console.log('Connection established!');
socket.send('I am a new client!');

};

socket.onmessage = (event) => {

console.log(`Received message => ${event.data}`);

};

3. Verwenden Sie Fetch, um Node.js aufzurufen. Die Fetch-API ist eine neue Netzwerkanforderungs-API, die im Vergleich zu Ajax eine einfachere API und eine bequemere Bedienung bietet . Das Folgende ist ein Codebeispiel für die Verwendung von Fetch zum Aufrufen von Node.js:

1. Vorbereitung

Zuerst müssen Sie einen Backend-Dienst in Node.js schreiben, der die entsprechende Antwort basierend auf der vom Frontend gesendeten Anfrage zurückgibt . Der folgende Beispielcode zeigt, wie ein Node.js-Backend-Dienst implementiert wird:

const http = require('http');

const server = http.createServer((req, res) => {

res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World

') ;
});

server.listen(3000, '127.0.0.1');

console.log('Server läuft unter http://127.0.0.1:3000/');

2. Senden Sie eine Anfrage

an Im Front-End-Code können wir den Back-End-Dienst von Node.js über die Fetch-API aufrufen. Das Folgende ist ein einfacher Democode:

fetch('http://localhost:3000')

.then(response => response.text())
.then(data => console.log(data))
.catch(err => console.error(err));

Hier verwenden wir die Fetch-API, um eine Anfrage zu senden und die Antwort über die Funktion then() und Catch() zu verarbeiten. Funktion. Da die Fetch-API ein Promise-Objekt zurückgibt, können wir die Funktionen then() und Catch() verwenden, um Erfolg oder Misserfolg zu verarbeiten.

Zusammenfassung:

In diesem Artikel wird vorgestellt, wie das Front-End Node.js aufruft. Über Ajax, WebSocket und Fetch API kann das Front-End problemlos mit Node.js interagieren. Natürlich gibt es in der tatsächlichen Entwicklung viele Möglichkeiten der Interaktion zwischen Front- und Back-End, und wir sollten die geeignete Entwicklungsmethode entsprechend der tatsächlichen Situation auswählen.

Das obige ist der detaillierte Inhalt vonSo rufen Sie NodeJS im Frontend auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!