nodejs 데이터를 프런트 엔드로 전송하는 방법
- WBOY원래의
- 2023-05-14 12:31:371494검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!