Nodejsデータをフロントエンドに転送する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

Nodejsデータをフロントエンドに転送する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 14, 2023 pm 12:31 PM

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。