Bagaimana untuk memanggil nodejs di hujung hadapan

Sebagai pembangun bahagian hadapan, kami sering menghadapi situasi di mana kami perlu memanggil antara muka bahagian belakang. Sebagai masa jalan JavaScript yang pantas dan berskala, Node.js mempunyai keupayaan untuk mengendalikan operasi intensif I/O Oleh itu, memanggil antara muka hujung belakang Node.js ialah pilihan yang baik. Dalam artikel ini, kami akan memperkenalkan cara bahagian hadapan memanggil kaedah Node.js.

1. Gunakan teknologi Ajax untuk memanggil Node.js

Ajax ialah salah satu kaedah yang paling biasa untuk bahagian hadapan untuk memanggil antara muka sebelah pelayan. Pelaksanaan kod adalah agak mudah, sesuai untuk penghantaran maklumat sehala, dan tidak memerlukan penyegaran keseluruhan halaman, mencapai kesan yang serupa dengan penyegaran separa, mengurangkan beban pada pelayan. Berikut ialah contoh kod menggunakan Ajax untuk memanggil Node.js:

1 Persediaan

Pertama, anda perlu menulis perkhidmatan hujung belakang dalam Node.js, yang berdasarkan permintaan yang dihantar. di hujung hadapan, Kembalikan respons yang sesuai. Kod sampel berikut menunjukkan cara untuk melaksanakan perkhidmatan hujung belakang 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('Server running at http://127.0. 0.1 :3000/');

2. Hantar permintaan

Dalam kod bahagian hadapan, kami boleh menghubungi perkhidmatan bahagian belakang Node.js melalui teknologi Ajax. Berikut ialah kod contoh mudah:

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

}

Di sini, kami menggunakan objek XMLHttpRequest untuk membuka sambungan dengan pelayan melalui open () fungsi Sambungan, hantar() fungsi boleh menghantar permintaan ke pelayan. Permintaan di sini ialah permintaan GET, yang digunakan untuk mendapatkan respons pelayan.

2. Gunakan WebSocket untuk memanggil Node.js

WebSocket ialah protokol komunikasi dupleks penuh, terutamanya digunakan untuk merealisasikan penghantaran data masa nyata. Melalui WebSocket, bahagian hadapan boleh menjalankan komunikasi dua hala dengan pelayan dalam masa nyata. Berikut ialah contoh kod menggunakan WebSocket untuk memanggil Node.js:

1 Kerja penyediaan

Pertama, anda perlu menulis perkhidmatan back-end WebSocket dalam Node.js, yang akan. mewujudkan sambungan dengan respons WebSocket bahagian hadapan. Berikut ialah kod demo mudah:

const http = require('http');
const WebSocket = require('ws');
const server = http.createServer();
const wss = WebSocket.Server baharu({ pelayan });
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 Hantar permintaan

Dalam kod bahagian hadapan, kami boleh mewujudkan sambungan dengan Node.js. melalui WebSocket Connect, hantar permintaan ke Node.js dan terima respons. Berikut ialah kod demo ringkas:

soket const = WebSocket baharu('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

Fetch API ialah API permintaan rangkaian baharu berdasarkan Promise Berbanding dengan Ajax, ia menyediakan API yang lebih ringkas dan operasi yang lebih mudah. Berikut ialah contoh kod menggunakan Ambil untuk memanggil Node.js:

1 Persediaan

Pertama, anda perlu menulis perkhidmatan hujung belakang dalam Node.js, yang berdasarkan permintaan yang dihantar. di hujung hadapan, Kembalikan respons yang sesuai. Kod sampel berikut menunjukkan cara untuk melaksanakan perkhidmatan hujung belakang 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('Server running at http://127.0. 0.1 :3000/');

2. Hantar permintaan

Dalam kod bahagian hadapan, kami boleh memanggil perkhidmatan bahagian belakang Node.js melalui API Ambil. Berikut ialah kod demo ringkas:

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

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

Di sini, kami menggunakan API Fetch untuk menghantar permintaan dan lulus then() function dan catch() berfungsi untuk mengendalikan respons. Memandangkan API Ambil mengembalikan objek Promise, kita boleh menggunakan fungsi then() dan fungsi catch() untuk mengendalikan kejayaan atau kegagalan.

Ringkasan:

Artikel ini memperkenalkan cara bahagian hadapan memanggil Node.js Melalui Ajax, WebSocket dan Fetch API, bahagian hadapan boleh berinteraksi dengan Node.js dengan mudah. Sudah tentu, dalam pembangunan sebenar, terdapat banyak cara untuk berinteraksi antara bahagian depan dan belakang, dan kita harus memilih cara yang sesuai untuk berkembang mengikut situasi sebenar.

Atas ialah kandungan terperinci Bagaimana untuk memanggil nodejs di hujung hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!