먼저, Parcel 프로젝트를 생성하고 의존성을 설치해야 합니다. 다음 명령을 사용하여 Parcel을 전역으로 설치합니다.
npm install -g parcel-bundler
프로젝트 폴더로 이동한 후, 다음 명령을 사용하여 의존성을 설치합니다.
npm install --save socket.io-client
이제 Parcel에서 Web Socket을 사용하는 방법을 코드로 살펴보겠습니다. 대부분의 경우, 클라이언트 사이드 코드에서 Web Socket을 사용하게 될 것입니다.
// index.js
import io from 'socket.io-client';
const socket = io('http://localhost:3000');
// 서버 주소에는 실제 서버 주소를 사용해야 합니다.
socket.on('connect', () => {
console.log('Connected to server');
socket.emit('join', 'room1');
// 'join' 이벤트를 서버로 보내고, 'room1'이라는 방에 입장합니다.
});
socket.on('message', (data) => {
console.log(`Received message: ${data}`);
});
socket.on('disconnect', () => {
console.log('Disconnected from server');
});
위 코드에서는 socket.io-client를 사용하여 클라이언트 측에서 서버와의 Web Socket 연결을 생성합니다. io() 함수에 서버 주소를 전달하여 연결을 만들 수 있습니다. socket.on()을 사용하여 서버로부터 수신되는 이벤트를 처리하고, socket.emit()을 사용하여 서버로 이벤트를 보낼 수 있습니다.
위 코드에서는 connect, message, disconnect라는 세 가지 이벤트를 처리하고 있습니다. connect 이벤트는 서버와의 연결이 성공했을 때 발생하며, disconnect 이벤트는 서버와의 연결이 끊어졌을 때 발생합니다. message 이벤트는 서버로부터 메시지를 수신했을 때 발생합니다.
이제 Parcel을 사용하여 애플리케이션을 빌드하고 실행할 수 있습니다. 다음 명령을 사용하여 애플리케이션을 실행합니다.
parcel index.html
Parcel은 애플리케이션을 번들링하고 개발 서버를 시작할 것입니다. 웹 브라우저에서 http://localhost:1234로 접속하여 애플리케이션을 확인할 수 있습니다.
이제 Parcel에서 Web Socket을 사용하는 방법을 알게 되었습니다. 위의 코드를 기반으로 원하는 대로 서버와의 양방향 통신을 구현할 수 있습니다.
참고 자료: