[javascript] Parcel에서 웹 소켓을 사용하는 방법은?

22 Nov 2023

javascript

Node.js 및 npm 설치: Parcel을 사용하기 위해서는 Node.js와 npm이 설치되어 있어야 합니다. 설치 방법은 공식 Node.js 사이트(https://nodejs.org/)에 나와 있습니다.
프로젝트 폴더 생성 및 초기화: 새로운 프로젝트를 위한 폴더를 생성한 후, 해당 폴더로 이동하여 터미널 또는 명령 프롬프트에서 다음 명령을 실행하여 프로젝트를 초기화합니다.

npm init

명령을 실행하면 package.json 파일이 생성됩니다.

Parcel 및 웹 소켓 패키지 설치: 터미널 또는 명령 프롬프트에서 다음 명령을 실행하여 Parcel과 웹 소켓 패키지를 설치합니다.

npm install parcel ws

HTML 및 JavaScript 파일 작성: 프로젝트 폴더에 index.html 파일과 index.js 파일을 생성합니다.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Parcel Websocket Example</title>
</head>
<body>
  <h1>Parcel Websocket Example</h1>
  <script src="index.js"></script>
</body>
</html>

// index.js
const WebSocket = require('ws');

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = () => {
  console.log('WebSocket connection established!');
};

socket.onmessage = (event) => {
  console.log('Received message:', event.data);
};

socket.onclose = () => {
  console.log('WebSocket connection closed!');
};

socket.onerror = (error) => {
  console.error('WebSocket error:', error);
};

Parcel 실행: 터미널 또는 명령 프롬프트에서 다음 명령을 실행하여 Parcel을 실행합니다.

npx parcel index.html

Parcel은 애플리케이션을 번들링하고 개발 서버를 실행합니다. 애플리케이션은 http://localhost:1234에서 실행됩니다.

웹 서버 설정: Parcel의 개발 서버는 웹 소켓을 기본적으로 지원하지 않습니다. 따라서 개발 서버가 웹 소켓을 사용하도록 구성해야 합니다.

package.json 파일에 다음과 같이 scripts 항목을 추가합니다.

"scripts": {
  "start": "parcel index.html",
  "build": "parcel build index.html",
  "server": "node server.js"
}

그리고 프로젝트 폴더에 server.js 파일을 생성하고 다음 코드를 추가합니다.

// server.js
const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
  console.log('WebSocket connected!');
  
  socket.on('message', (message) => {
    console.log('Received message:', message);
  });
  
  socket.on('close', () => {
    console.log('WebSocket disconnected!');
  });
  
  socket.send('Hello from server!');
});

Parcel 및 서버 실행: 터미널 또는 명령 프롬프트에서 다음 명령을 실행하여 Parcel 개발 서버와 웹 소켓 서버를 동시에 실행합니다.

npm run start & npm run server

이제 웹 브라우저에서 http://localhost:1234에 접속하면 Parcel 애플리케이션이 실행됩니다. JavaScript 콘솔을 확인하면 웹 소켓 연결 및 메시지 수신에 관한 로그가 표시됩니다.

이렇게 Parcel을 사용하여 웹 소켓을 구현할 수 있습니다. Parcel은 번들링과 개발 서버 기능을 제공하여 프로젝트 설정을 간소화합니다.