[javascript] P5.js에서 네트워크 프로그래밍을 어떻게 구현하나요?

04 Dec 2023

javascript

P5.js는 웹 기반의 크리에이티브 코딩을 위한 라이브러리로, 네트워크 프로그래밍을 구현할 수 있습니다. 네트워크 프로그래밍은 서버와 클라이언트 사이에서 데이터를 주고받는 통신을 의미합니다.

P5.js에서 네트워크 프로그래밍을 구현하려면 다음 단계를 따라야 합니다.

서버 설정하기: P5.js로 작성한 소켓 기반의 서버를 구성해야 합니다. 이를 위해서는 Node.js와 Socket.io 라이브러리를 사용할 수 있습니다. Node.js는 서버 사이드 자바스크립트 런타임이며, Socket.io는 웹소켓 기반의 통신을 제공하는 라이브러리입니다.

const express = require('express');
const app = express();
const server = app.listen(3000);

const socket = require('socket.io');
const io = socket(server);

io.on('connection', (socket) => {
  console.log('새로운 연결이 이루어졌습니다.');

  // 클라이언트로부터 메시지를 받았을 때 처리하는 코드 작성
  socket.on('message', (data) => {
    console.log('받은 메시지:', data);
  });

  // 클라이언트에게 메시지를 보낼 때 처리하는 코드 작성
  socket.emit('message', '서버에서 보내는 메시지입니다.');
});

클라이언트 설정하기: P5.js를 사용하여 클라이언트를 작성해야 합니다. 이를 통해 서버와 통신하고 데이터를 주고받을 수 있습니다. P5.js의 socket.io.js 라이브러리를 사용하여 클라이언트를 설정할 수 있습니다.

const socket = io.connect('http://localhost:3000');

// 서버로부터 메시지를 받았을 때 처리하는 코드 작성
socket.on('message', (data) => {
  console.log('받은 메시지:', data);
});

// 클라이언트에서 서버로 메시지를 보낼 때 처리하는 코드 작성
socket.emit('message', '클라이언트에서 보내는 메시지입니다.');

위의 코드는 기본적인 네트워크 프로그래밍을 구현하는 예시입니다. 이를 기반으로 서버와 클라이언트 간의 메시지를 주고받을 수 있습니다. 추가적으로 데이터를 주고받거나 더 복잡한 기능을 구현하고 싶다면 Socket.io의 다양한 기능을 참고할 수 있습니다.

참고 자료: