프론트엔드에서 nodejs를 호출하는 방법

프론트엔드 개발자로서 우리는 백엔드 인터페이스를 호출해야 하는 상황에 자주 직면합니다. 빠르고 확장 가능한 JavaScript 런타임인 Node.js는 I/O 집약적인 작업을 처리할 수 있는 기능을 갖추고 있으므로 Node.js의 백엔드 인터페이스를 호출하는 것이 좋습니다. 이 기사에서는 프런트 엔드에서 Node.js 메서드를 호출하는 방법을 소개합니다.

1. Ajax 기술을 사용하여 Node.js 호출

Ajax는 프런트 엔드에서 서버 측 인터페이스를 호출하는 가장 일반적인 방법 중 하나입니다. 코드 구현은 비교적 간단하고 단방향 정보 전송에 적합하며 전체 페이지를 새로 고칠 필요가 없어 부분 새로 고침과 유사한 효과를 달성하여 서버의 부담을 줄입니다. 다음은 Ajax를 사용하여 Node.js를 호출하는 코드 예제입니다.

1. 준비

먼저 Node.js에서 보낸 요청에 따라 해당 응답을 반환하는 백엔드 서비스를 작성해야 합니다. 프론트엔드. 다음 샘플 코드는 Node.js 백엔드 서비스를 구현하는 방법을 보여줍니다.

const http = require('http');
const server = http.createServer((req, res) => {

res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World

') ;
});
server.listen(3000, '127.0.0.1');
console.log('http://127.0.0.1:3000/에서 실행 중인 서버');

2에서 요청을 보내세요

. 프론트엔드 코드에서는 Ajax 기술을 통해 Node.js의 백엔드 서비스를 호출할 수 있습니다. 다음은 간단한 샘플 코드입니다.

function ajaxCall() {

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("myDiv").innerHTML = this.responseText;
    }
};
xmlhttp.open("GET", "http://localhost:3000", true);
xmlhttp.send();

}

여기서 XMLHttpRequest 객체를 사용하여 open() 함수를 통해 서버와의 연결을 열고 send() 함수를 통해 메시지를 보낼 수 있습니다. 서버에 대한 요청입니다. 여기서 요청은 서버의 응답을 얻는 데 사용되는 GET 요청입니다.

2. WebSocket을 사용하여 Node.js 호출

WebSocket은 주로 실시간 데이터 전송을 구현하는 데 사용되는 전이중 통신 프로토콜입니다. WebSocket을 통해 프런트엔드는 서버와 실시간으로 양방향 통신을 할 수 있습니다. 다음은 WebSocket을 사용하여 Node.js를 호출하는 코드 예제입니다.

1. 준비

먼저 Node.js에서 WebSocket 백엔드 서비스를 작성해야 합니다. 그러면 프런트 엔드와 함께 WebSocket 응답이 설정됩니다. 다음은 간단한 데모 코드입니다.

const http = require('http');

const WebSocket = require('ws');
const server = http.createServer();
const wss = new WebSocket.Server( { 서버 });
wss.on('connection', (ws) => {

console.log('A new client connected!');
ws.on('message', (message) => {
    console.log(`Received message => ${message}`);
    ws.send(`Hello, you sent => ${message}`);
});
ws.send('Welcome to the WebSocket server!');

});

server.listen(3000, () => {

console.log('Server started on port 3000 :)');

});

2. 요청 보내기

프론트엔드 코드에서는 WebSocket을 통해 Node.js와 연결을 설정하고 Node.js에 요청을 보내고 응답을 받을 수 있습니다. 다음은 간단한 데모 코드입니다.

const 소켓 = new WebSocket('ws://localhost:3000');

socket.onopen = () => {

console.log('Connection established!');
socket.send('I am a new client!');

};

socket.onmessage = (이벤트) => {

console.log(`Received message => ${event.data}`);

};

3. Fetch를 사용하여 Node.js 호출

Fetch API는 Ajax에 비해 더 간단한 API와 더 편리한 작업을 제공합니다. . 다음은 Fetch를 사용하여 Node.js를 호출하는 코드 예제입니다.

1. 준비

먼저 프런트 엔드에서 보낸 요청에 따라 해당 응답을 반환하는 백엔드 서비스를 Node.js에 작성해야 합니다. . 다음 샘플 코드는 Node.js 백엔드 서비스를 구현하는 방법을 보여줍니다.

const http = require('http');

const server = http.createServer((req, res) => {

res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World

') ;

});
server.listen(3000, '127.0.0.1');
console.log('http://127.0.0.1:3000/에서 실행 중인 서버');

2에서 요청을 보내세요

. 프런트엔드 코드에서는 Fetch API를 통해 Node.js의 백엔드 서비스를 호출할 수 있습니다. 다음은 간단한 데모 코드입니다.

fetch('http://localhost:3000')

.then(response => response.text())
.then(data => console.log(data))
.catch(err => console.error(err));

여기에서는 Fetch API를 사용하여 요청을 보내고 then() 함수와 catch()를 통해 응답을 처리합니다. 기능 . Fetch API는 Promise 객체를 반환하므로 then() 함수와 catch() 함수를 사용하여 성공 또는 실패를 처리할 수 있습니다.

요약:

이 기사에서는 Ajax, WebSocket 및 Fetch API의 세 가지 방법을 통해 프런트 엔드가 Node.js와 쉽게 상호 작용할 수 있는 방법을 소개합니다. 물론 실제 개발에서는 프런트엔드와 백엔드 간의 상호작용 방식이 다양하므로 실제 상황에 따라 적절한 개발 방식을 선택해야 합니다.

위 내용은 프론트엔드에서 nodejs를 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!