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

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

});

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

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

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

') ;

server.listen(3000, '127.0.0.1');

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

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!