ホームページ >ウェブフロントエンド >フロントエンドQ&A >Nodejsデータをフロントエンドに転送する方法
Nodejsデータをフロントエンドに転送する方法
- WBOYオリジナル
- 2023-05-14 12:31:371527ブラウズ
Node.js の人気に伴い、このテクノロジを使用して Web アプリケーションを作成する開発者が増えています。バックエンド テクノロジとして、Node.js はさまざまな方法でデータをフロントエンド ページに送信できます。 Node.js データをフロントエンドに転送するためのテクニックをいくつか紹介します。
- RESTful API
RESTful API は、現在最も人気のある Web サービス アーキテクチャの 1 つです。 Node.js は、Express.js や Hapi などのフレームワークを使用して RESTful API を開発できます。 RESTful API は HTTP プロトコルに基づいており、GET、POST、PUT、または DELETE メソッドを通じてクライアントにデータを送信できます。フロントエンドは AJAX を通じてこれらの API をリクエストし、サーバーはフロントエンドで使用できるように JSON (JavaScript Object Notation) 形式でデータを返します。
以下は簡単な例です:
まず、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');
});ここでは Express を使用します。 js フレームワーク RESTful API を作成します。クライアントが /api/users をリクエストすると、サーバーはユーザー情報を含む JSON データを返します。
AJAX 呼び出しに jQuery を使用する:
$.ajax({
url: '/api/users',
type: 'GET',
success: function(data) {
console.log(data);
},
error: function(xhr, textStatus, error) {
console.log(xhr.statusText);
}
});- WebSockets
WebSocket は、ブラウザとサーバー間の通信を可能にするリアルタイム通信プロトコルです。双方向コミュニケーション。 Node.js は、socket.io ライブラリを使用して WebSocket 機能を実装できます。 WebSocket を使用すると、サーバーはリアルタイム データをクライアントにプッシュできます。これは、ショート ポーリングおよびロング ポーリング (ポーリング) メソッドよりも効率的です。
以下は簡単な例です:
まず、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);
});ここでは、socket.io を使用します。 WebSocket サーバーを作成するためのライブラリ。クライアントがサーバーに接続すると、サーバーは 1 秒間隔でタイマーを開始し、乱数をクライアントに送信します。
クライアント コード (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>ここでは、socket.io ライブラリを使用してサーバーとの WebSocket 接続を確立し、「number」イベント リスナーを登録します。サーバーが数値を渡すと、クライアントはその数値を表示します。
- サーバー送信イベント
サーバー送信イベント (SSE) は、イベントのストリームをクライアントにプッシュするテクノロジーです。 SSE を使用すると、クライアントがサーバーにリクエストを行うことなく、サーバーがクライアントにリアルタイムでデータを送信できます。 Node.js は EventSource ライブラリを使用して、サーバー プッシュ イベント ストリーミングをサポートできます。
以下は簡単な例です:
サーバー コード:
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');ここでは、Node.js の HTTP モジュールを使用して SSE サーバーを作成します。クライアントがサーバーに接続すると、サーバーはイベント ストリームを送信し、現在時刻を含むメッセージを 1 秒ごとに送信します。
クライアント コード:
<!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>ここでは、JavaScript の EventSource オブジェクトを使用して、サーバーによってプッシュされたイベント ストリームをリッスンします。イベント ストリームに「時刻」イベントがある場合、クライアントは現在の時刻を表示します。
結論
上記の技術を利用することで、Node.jsのデータをフロントエンドページに簡単に転送することができます。 RESTful API、WebSocket、および Server-Sent Events は、この目標を達成するための優れた方法です。
以上がNodejsデータをフロントエンドに転送する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。