Electron.js에서 HTTP 대신 TCP 서버 사용하기

Electron.js에서 HTTP 서버가 아닌 TCP 서버로 구동할 필요성이 생겼습니다. 이에 Electron.js에서 TCP 서버를 어떻게 연결하는지에 대한 순서 및 TCP 서버의 개념을 정리해보려고 합니다. 이 글은 TCP 서버의 기본 개념부터 시작하여 Electron 환경에서의 구현 방법까지 설명할 것입니다.

 

Electron 환경 설명

Electron은 웹 기술을 사용하여 데스크톱 애플리케이션을 개발할 수 있는 프레임워크입니다. 기존의 Electron 애플리케이션은 주로 HTTP 통신을 사용하여 외부 서버와 데이터를 주고받습니다. 이는 웹 애플리케이션과 유사한 방식으로, 웹 서버가 필요한 모든 리소스를 처리하고 클라이언트 측에서는 그 결과를 받아 사용자에게 보여주는 형식입니다.

 

하지만 Electron이 제공하는 Node.js 환경 덕분에 TCP 같은 더 낮은 수준의 네트워크 프로토콜도 사용할 수 있습니다. TCP를 사용하면 데이터의 실시간 전송과 같은 더 복잡하고 세밀한 네트워크 작업을 처리할 수 있습니다.

 

 

TCP란 무엇인가?

TCP(Transmission Control Protocol)는 인터넷에서 데이터를 신뢰성 있게, 순서대로, 에러 없이 전송하도록 설계된 표준 프로토콜입니다. 그리고 TCP 서버는 TCP 프로토콜을 기반으로 데이터를 주고받는 네트워크 서버입니다. TCP는 데이터가 전송 도중에 손실되지 않고, 모든 패킷이 송신자로부터 수신자에게 정확한 순서로 도달하도록 합니다. 이러한 이유로 TCP 서버는 은행 거래, 이메일 전송, 파일 전송 등 신뢰성이 중요한 애플리케이션에서 널리 사용됩니다. TCP는 데이터의 완전성과 정확성이 중요할 때 사용하며, 네트워크 통신의 안정성을 보장합니다.

 

TCP 송/수신 원리에 관해서는 해당 내용에 대해 제가 도움을 받았던 영상을 공유해드립니다.

 

 

TCP 서버와 클라이언트 예제 코드

 

Electron에서 TCP 서버를 설정하는 것은 Node.js의 net 모듈을 활용하여 간단하게 할 수 있습니다. 여기서는 TCP 서버와 클라이언트 간의 통신 예제를 보여드리겠습니다. 서버 코드는 Electron 앱의 일부로 구현되며, 클라이언트 코드는 별도의 JavaScript 파일로 작성됩니다. 서버는 클라이언트의 연결을 기다리고, 연결이 성립되면 클라이언트로부터 데이터를 받아 그대로 에코로 응답합니다.

 

// Electron 앱에서 실행될 TCP 서버
const net = require('net');

const server = net.createServer(socket => {
    console.log('Client connected.');

    socket.on('data', data => {
        console.log('Received:', data.toString());
        socket.write('Echo: ' + data);
    });

    socket.on('end', () => {
        console.log('Client disconnected.');
    });

    socket.on('error', err => {
        console.error('Server Error:', err);
    });
});

server.listen(8124, () => {
    console.log('Server running on port 8124');
});

 

클라이언트 코드는 별도의 파일(tcp_client.js)에 저장합니다. 이 클라이언트는 서버에 연결을 시도하고 메시지를 보내며, 서버의 응답을 기다립니다.

// 별도의 클라이언트 파일 (tcp_client.js)
const net = require("net");

const client = new net.Socket();
client.connect(8124, "127.0.0.1", () => {
    console.log("Connected to server");
    client.write("Hello from client!");
});

client.on("data", (data) => {
    console.log("Received: " + data);
    client.destroy(); // 서버로부터 응답을 받은 후 클라이언트 연결 종료
});

client.on("close", () => {
    console.log("Connection closed");
});

client.on("error", (err) => {
    console.error("Connection error: " + err);
});

 

TCP 서버를 Electron.js에서 구동하는 방법

TCP 서버를 Electron.js에서 구동하는 방법은 매우 직관적입니다. 먼저, Electron 앱의 ready 이벤트가 발생하면 서버를 시작합니다. 이는 일반적으로 앱의 주 진입점인 main.js에서 이루어집니다. 서버가 시작된 후, 별도의 터미널에서 클라이언트 파일(tcp_client.js)을 실행하여 서버와의 통신을 테스트할 수 있습니다. 이 과정은 개발 중에 서버와 클라이언트 간의 통신을 확인하는 데 유용합니다.

 

1. Electron 앱을 시작합니다 (npm start).

2. 앱이 실행되고 나면, 별도의 터미널에서 node tcp_client.js를 실행하여 서버에 연결을 시도합니다.

 

이러한 단계를 통해, Electron 환경에서 TCP 서버를 성공적으로 구동하고 클라이언트와의 통신을 확인할 수 있습니다. 이를 통해 Electron 애플리케이션에서 다양한 네트워크 기반 기능을 효과적으로 구현하고 관리할 수 있습니다.