nodejs 데이터를 프런트 엔드로 전송하는 방법-프런트엔드 Q&A-php.cn

nodejs 데이터를 프런트 엔드로 전송하는 방법

WBOY

풀어 주다： 2023-05-14 12:31:37

원래의

1524명이 탐색했습니다.

Node.js의 인기로 인해 점점 더 많은 개발자가 이 기술을 사용하여 웹 애플리케이션을 만들기 시작했습니다. 백엔드 기술로서 Node.js는 다양한 방법으로 프런트엔드 페이지에 데이터를 전송할 수 있습니다. 다음은 Node.js 데이터를 프런트 엔드로 전송하는 몇 가지 기술입니다.

RESTful API

RESTful API는 현재 가장 인기 있는 웹 서비스 아키텍처 중 하나입니다. Node.js는 Express.js 또는 Hapi와 같은 프레임워크를 사용하여 RESTful API를 개발할 수 있습니다. RESTful API는 GET, POST, PUT 또는 DELETE 메소드를 통해 클라이언트에 데이터를 보낼 수 있는 HTTP 프로토콜을 기반으로 합니다. 프런트 엔드는 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는 소켓.io 라이브러리를 사용하여 WebSocket 기능을 구현할 수 있습니다. WebSocket을 사용하면 서버가 실시간 데이터를 클라이언트에 푸시할 수 있는데, 이는 짧은 폴링 및 긴 폴링(폴링) 방법보다 효율적입니다.

다음은 간단한 예입니다.

먼저, 우리는 소켓.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);
});

로그인 후 복사

여기에서는 소켓.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>

로그인 후 복사

여기에서는 소켓.io 라이브러리를 사용하여 서버와의 WebSocket 연결을 설정하고 '숫자' 이벤트 리스너를 등록합니다. 서버가 숫자를 전달하면 클라이언트는 숫자를 표시합니다.

서버 전송 이벤트

서버 전송 이벤트(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 및 서버 전송 이벤트는 이 목표를 달성하는 좋은 방법입니다.

위 내용은 nodejs 데이터를 프런트 엔드로 전송하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!