Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk memanggil nodejs di hujung hadapan

Bagaimana untuk memanggil nodejs di hujung hadapan

WBOY
Lepaskan: 2023-05-11 16:46:40
asal
1655 orang telah melayarinya

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
Salin selepas log masuk
Salin selepas log masuk

');
});
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();
Salin selepas log masuk

}

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!');
Salin selepas log masuk

});
server.listen( 3000, () => {

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

});

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!');
Salin selepas log masuk

};

socket.onmessage = (event) => {

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

};

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
Salin selepas log masuk
Salin selepas log masuk

');

});

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));
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan