[javascript] P5.js 프로젝트에서 실시간 협업을 어떻게 구현하나요?

04 Dec 2023

javascript

P5.js 프로젝트에서 실시간 협업을 어떻게 구현하나요?

P5.js는 자바스크립트를 기반으로 한 창의적인 코딩을 위한 라이브러리입니다. 이 라이브러리를 사용하여 실시간 협업 기능을 구현하는 방법을 알아보겠습니다.

1. Socket.io를 사용하여 실시간 통신 설정

Socket.io는 브라우저와 서버 간의 실시간 양방향 통신을 가능하게 해주는 라이브러리입니다. 먼저 P5.js 프로젝트에 Socket.io를 설치하고, 클라이언트와 서버 간의 통신을 설정해야 합니다.

// 클라이언트
let socket;

function setup() {
  createCanvas(400, 400);

  socket = io.connect('http://localhost:3000');
  socket.on('mousemove', newDrawing);
}

function newDrawing(data) {
  fill(255, 0, 0);
  ellipse(data.x, data.y, 20, 20);
}

function mouseDragged() {
  fill(0);
  ellipse(mouseX, mouseY, 20, 20);

  let data = {
    x: mouseX,
    y: mouseY
  };

  socket.emit('mousemove', data);
}

// 서버
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('mousemove', (data) => {
    socket.broadcast.emit('mousemove', data);
  });

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

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

위 코드는 클라이언트와 서버 간의 기본적인 소켓 통신을 설정한 예시입니다. 클라이언트에서 마우스 드래그 이벤트를 감지하여 좌표를 서버로 전달하고, 서버에서는 해당 좌표를 다른 클라이언트에게 브로드캐스팅합니다.

2. 실시간 협업 기능 구현

이제 실시간으로 협업하는 데 필요한 기능을 추가할 수 있습니다. 예를 들어, 여러 사용자가 공통 도화지에서 그림을 그릴 수 있는 협업 기능을 구현해보겠습니다.

// 클라이언트
let socket;
let colorPicker;

function setup() {
  createCanvas(400, 400);

  colorPicker = createColorPicker('#000000');
  colorPicker.position(10, height + 10);

  socket = io.connect('http://localhost:3000');
  socket.on('draw', receiveDrawing);
}

function receiveDrawing(data) {
  stroke(data.color);
  strokeWeight(data.strokeWeight);
  line(data.fromX, data.fromY, data.toX, data.toY);
}

function mouseDragged() {
  stroke(colorPicker.color());
  strokeWeight(5);
  line(pmouseX, pmouseY, mouseX, mouseY);

  let data = {
    color: colorPicker.color().toString(),
    strokeWeight: 5,
    fromX: pmouseX,
    fromY: pmouseY,
    toX: mouseX,
    toY: mouseY
  };

  socket.emit('draw', data);
}

// 서버는 이전 코드와 동일

위 코드는 클라이언트와 서버 간의 소켓 통신에 추가로 그림을 그릴 수 있는 협업 기능을 구현한 예시입니다. 클라이언트에서 마우스 드래그 동작을 감지하여 선을 그리고, 그린 선의 정보를 서버로 전달합니다. 서버는 해당 선 정보를 다른 클라이언트에게 브로드캐스팅하여 공통 화면에 실시간으로 그림을 그릴 수 있도록 합니다.

이처럼 Socket.io를 사용하여 P5.js 프로젝트에서 실시간 협업 기능을 구현할 수 있습니다. 자세한 사항은 Socket.io 공식 문서를 참조하시기 바랍니다.

참조:

Socket.io 공식 문서