Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk memindahkan data nodejs ke bahagian hadapan
Bagaimana untuk memindahkan data nodejs ke bahagian hadapan
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal
- 2023-05-14 12:31:371815semak imbas
Dengan populariti Node.js, semakin ramai pembangun mula menggunakan teknologi ini untuk mencipta aplikasi web. Sebagai teknologi bahagian belakang, Node.js boleh menghantar data ke halaman hujung hadapan dalam pelbagai cara. Berikut ialah beberapa teknik untuk memindahkan data Node.js ke bahagian hadapan:
- RESTful API
RESTful API ialah salah satu seni bina perkhidmatan web yang paling popular pada masa ini. Node.js boleh menggunakan rangka kerja seperti Express.js atau Hapi untuk membangunkan API RESTful. API RESTful adalah berdasarkan protokol HTTP, yang boleh menghantar data kepada klien melalui kaedah GET, POST, PUT atau DELETE. Bahagian hadapan meminta API ini melalui AJAX, dan kemudian pelayan mengembalikan data dalam format JSON (JavaScript Object Notation) untuk digunakan oleh bahagian hadapan.
Berikut ialah contoh mudah:
Mula-mula, kita perlu mencipta kod sebelah pelayan, menggunakan rangka kerja Express.js:
const express = require('express');
const app = express();
app.get('/api/users', (req, res) => {
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Chris', age: 35 },
];
res.json(users);
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});Di sini kita menggunakan Express. rangka kerja js Cipta API RESTful. Apabila klien meminta /api/users, pelayan akan mengembalikan data JSON yang mengandungi maklumat pengguna.
Menggunakan jQuery untuk panggilan AJAX:
$.ajax({
url: '/api/users',
type: 'GET',
success: function(data) {
console.log(data);
},
error: function(xhr, textStatus, error) {
console.log(xhr.statusText);
}
});- WebSockets
WebSocket ialah protokol komunikasi masa nyata yang membenarkan komunikasi antara penyemak imbas dan pelayan Komunikasi dua hala. Node.js boleh menggunakan perpustakaan socket.io untuk melaksanakan fungsi WebSocket. Menggunakan WebSockets, pelayan boleh menolak data masa nyata kepada pelanggan, yang lebih cekap daripada kaedah pengundian pendek dan pengundian panjang (polling).
Berikut ialah contoh mudah:
Pertama, kita perlu mencipta kod sisi pelayan, menggunakan perpustakaan socket.io:
const app = require('http').createServer(handler);
const io = require('socket.io')(app);
const fs = require('fs');
app.listen(3000, () => {
console.log('Server started on port 3000');
});
function handler(req, res) {
fs.readFile(__dirname + '/index.html', function(err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
io.on('connection', function(socket) {
setInterval(() => {
const number = Math.floor(Math.random() * 10);
socket.emit('number', number);
}, 1000);
});Di sini kita menggunakan soket. io perpustakaan untuk mencipta pelayan WebSocket. Apabila klien menyambung ke pelayan, pelayan akan memulakan pemasa dengan selang 1 saat dan menghantar nombor rawak kepada klien.
Kod pelanggan (index.html):
<!doctype html>
<html>
<head>
<title>WebSockets Example</title>
</head>
<body>
<div id="container"></div>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
var socket = io.connect('http://localhost:3000');
socket.on('number', (data) => {
document.getElementById('container').innerHTML = 'Random number: ' + data;
});
</script>
</body>
</html>Di sini kami menggunakan perpustakaan socket.io untuk mewujudkan sambungan WebSocket dengan pelayan dan mendaftarkan pendengar acara 'nombor'. Apabila pelayan menghantar nombor, pelanggan akan memaparkan nombor tersebut.
- Acara Dihantar Pelayan
Acara Dihantar Pelayan (SSE) ialah teknologi yang menolak aliran acara kepada pelanggan. SSE membenarkan pelayan menghantar data kepada klien dalam masa nyata tanpa pelanggan membuat permintaan kepada pelayan. Node.js boleh menggunakan pustaka EventSource untuk menyokong penstriman acara tolak pelayan.
Berikut ialah contoh mudah:
Kod pelayan:
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
setInterval(() => {
const data = { time: new Date().toTimeString() };
res.write(`event: time
`);
res.write(`data: ${JSON.stringify(data)}
`);
}, 1000);
}).listen(3000);
console.log('Server started on port 3000');Di sini kami menggunakan modul HTTP Node.js untuk mencipta pelayan SSE. Apabila pelanggan menyambung ke pelayan, pelayan akan menghantar aliran acara dan menghantar mesej yang mengandungi masa semasa setiap 1 saat.
Kod pelanggan:
<!doctype html>
<html>
<head>
<title>Server-Sent Events Example</title>
</head>
<body>
<div id="container"></div>
<script>
const eventSource = new EventSource('http://localhost:3000');
eventSource.addEventListener('time', (event) => {
const data = JSON.parse(event.data);
document.getElementById('container').innerHTML = data.time;
});
</script>
</body>
</html>Di sini kami menggunakan objek EventSource JavaScript untuk mendengar strim acara yang ditolak oleh pelayan. Apabila terdapat acara 'masa' dalam aliran acara, pelanggan akan memaparkan masa semasa.
Kesimpulan
Dengan menggunakan teknologi di atas, kami boleh memindahkan data dengan mudah dalam Node.js ke halaman hujung hadapan. API RESTful, WebSockets dan Acara Dihantar Pelayan ialah cara terbaik untuk mencapai matlamat ini.
Atas ialah kandungan terperinci Bagaimana untuk memindahkan data nodejs ke bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!