Comment appeler nodejs sur le front-end

En tant que développeur front-end, nous rencontrons souvent des situations où nous devons appeler l'interface back-end. En tant que moteur d'exécution JavaScript rapide et évolutif, Node.js a la capacité de gérer des opérations gourmandes en E/S. Par conséquent, appeler l'interface backend de Node.js est un bon choix. Dans cet article, nous présenterons comment le front-end appelle les méthodes Node.js.

1. Utilisez la technologie Ajax pour appeler Node.js

Ajax est l'une des méthodes les plus courantes permettant au front-end d'appeler l'interface côté serveur. La mise en œuvre du code est relativement simple, adaptée à la transmission d'informations unidirectionnelle et ne nécessite pas de rafraîchir la page entière, ce qui permet d'obtenir un effet similaire à un rafraîchissement partiel, réduisant ainsi la charge sur le serveur. Voici un exemple de code d'utilisation d'Ajax pour appeler Node.js :

1 Préparation

Tout d'abord, vous devez écrire un service back-end dans Node.js, qui renvoie la réponse correspondante en fonction de la requête envoyée par le. l'extrémité avant. L'exemple de code suivant montre comment implémenter un service backend Node.js :

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('Serveur fonctionnant sur http://127.0.0.1:3000/');

2. Dans le code front-end, nous pouvons appeler le service back-end de Node.js via la technologie Ajax. Voici un exemple de code simple :

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

}

Ici, nous utilisons l'objet XMLHttpRequest pour ouvrir la connexion avec le serveur via la fonction open(), et la fonction send() peut envoyer une requête au serveur. La requête ici est une requête GET, qui est utilisée pour obtenir la réponse du serveur.

2. Utilisez WebSocket pour appeler Node.js

WebSocket est un protocole de communication full-duplex, principalement utilisé pour réaliser la transmission de données en temps réel. Grâce à WebSocket, le frontal peut établir une communication bidirectionnelle avec le côté serveur en temps réel. Voici un exemple de code d'appel de Node.js à l'aide de WebSocket :

1. Préparation

Tout d'abord, vous devez écrire un service backend WebSocket dans Node.js, qui établira une réponse WebSocket avec le front-end. Voici un code de démonstration simple :

const http = require('http');

const WebSocket = require('ws');

const server = http.createServer(); { serveur });
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. Envoi d'une requête

Dans le code front-end, nous pouvons établir une connexion avec Node.js via WebSocket, envoyer des requêtes à Node.js et recevoir des réponses. Ce qui suit est un code de démonstration simple :

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

socket.onopen = () => (événement) => {

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

};

3. Utilisez Fetch pour appeler Node.js

L'API Fetch est une nouvelle API de requête réseau basée sur Promise, elle fournit une API plus simple et un fonctionnement plus pratique. . Voici un exemple de code d'utilisation de Fetch pour appeler Node.js :

1 Préparation

Tout d'abord, vous devez écrire un service backend dans Node.js, qui renvoie la réponse correspondante en fonction de la requête envoyée par le front-end. . L'exemple de code suivant montre comment implémenter un service backend Node.js :

const http = require('http');

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

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

') ;

});

server.listen(3000, '127.0.0.1');

console.log('Serveur fonctionnant sur http://127.0.0.1:3000/');

2. Dans le code front-end, nous pouvons appeler le service back-end de Node.js via l'API Fetch. Ce qui suit est un code de démonstration simple :

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

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

Ici, nous utilisons l'API Fetch pour envoyer une requête et traiter la réponse via la fonction then() et catch() fonction . Puisque l'API Fetch renvoie un objet Promise, nous pouvons utiliser la fonction then() et la fonction catch() pour gérer le succès ou l'échec.

Résumé :

Cet article présente comment le front-end appelle Node.js grâce à Ajax, WebSocket et Fetch API, le front-end peut facilement interagir avec Node.js. Bien sûr, dans le développement réel, il existe différentes manières d'interagir entre l'avant et l'arrière-plan, et nous devons choisir la manière appropriée de développer en fonction de la situation réelle.

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!