P5.js를 사용하여 웹 소켓을 통해 실시간 데이터 전송하기

P5.js는 JavaScript를 기반으로 한 HTML5 그래픽 라이브러리입니다. 이 라이브러리를 사용하면 웹 브라우저에서 그림, 애니메이션, 상호작용 등을 쉽게 구현할 수 있습니다. P5.js가 제공하는 기능 중 하나는 웹 소켓을 사용하여 실시간 데이터를 전송하는 것입니다. 웹 소켓은 클라이언트와 서버 간 양방향 통신을 가능하게 해주는 기술입니다.

이제 P5.js를 사용하여 웹 소켓을 통해 실시간 데이터를 전송하는 방법에 대해 알아보겠습니다.

1. 웹 소켓 서버 설정

먼저, 웹 소켓 서버를 설정해야 합니다. 이를 위해 Node.js의 ws 패키지를 사용하여 간단한 웹 소켓 서버를 만들어 보겠습니다.

const WebSocket = require('ws');

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

wss.on('connection', (ws) => {
  console.log('새로운 클라이언트가 연결되었습니다.');

  ws.on('message', (message) => {
    console.log('받은 메시지:', message);

    // 클라이언트에게 받은 메시지를 다시 보냅니다.
    ws.send('서버에서 받은 메시지: ' + message);
  });

  ws.on('close', () => {
    console.log('클라이언트 연결이 종료되었습니다.');
  });
});

위 코드는 8080 포트에서 동작하는 웹 소켓 서버를 생성합니다. 새로운 클라이언트가 연결되면 콘솔에 메시지를 출력하고, 클라이언트로부터 메시지를 받으면 다시 그 메시지를 클라이언트로 보냅니다. 클라이언트 연결이 종료되면 콘솔에 메시지를 출력합니다.

2. P5.js에서 웹 소켓 클라이언트 설정

이제 P5.js를 사용하여 웹 소켓 클라이언트를 설정해보겠습니다.

let socket;

function setup() {
  createCanvas(400, 400);
  socket = new WebSocket('ws://localhost:8080');
  
  socket.onopen = function () {
    console.log('서버에 연결되었습니다.');
  };
  
  socket.onmessage = function (event) {
    console.log('받은 메시지:', event.data);
  };
  
  socket.onclose = function () {
    console.log('서버와의 연결이 종료되었습니다.');
  };
}

function draw() {
  background(220);
  // P5.js 그래픽 코드 작성
}

function mousePressed() {
  // 마우스 클릭 이벤트 처리 코드 작성
}

위 코드에서 socket 변수는 웹 소켓 연결을 나타내는 객체입니다. setup() 함수에서 웹 소켓 서버에 연결하고, 연결이 성공하면 콘솔에 메시지를 출력합니다. 또한, 메시지를 받으면 콘솔에 출력합니다. 연결이 종료되면 콘솔에 메시지를 출력합니다.

3. 데이터 전송하기

P5.js에서 웹 소켓을 통해 데이터를 전송하려면 socket.send() 메소드를 사용하면 됩니다. 아래 코드는 mousePressed() 함수에서 마우스 클릭 이벤트가 발생하면 서버로 메시지를 전송하는 예제입니다.

function mousePressed() {
  let message = '마우스 클릭 이벤트 발생!';
  socket.send(message);
}

위 코드는 message 변수에 메시지를 저장하고, socket.send() 메소드를 사용하여 서버로 메시지를 전송합니다. 클라이언트에서 보낸 메시지는 서버에서 콘솔에 출력됩니다.

이제 P5.js를 사용하여 웹 소켓을 통해 실시간 데이터를 전송하는 방법을 알게 되었습니다. 이를 응용하여 다양한 프로젝트를 만들어보세요!

참고 자료

• P5.js 공식 사이트
• 웹 소켓 소개
• Node.js의 ws 패키지 문서