HTML5 Canvas 실시간 칠판, MB CANVAS 1.0.0 > 그누보드팁

• 목록

• 페이스북 공유
• 트위터 공유

MB CANVAS 플러그인 개요

MB CANVAS는 웹 환경에서 실시간 공동 그림판 또는 캔버스 기반 칠판 기능을 제공하는 플러그인입니다.

주요 특징은 다음과 같습니다:

실시간 WebSocket 연동

• 사용자 간 그림이나 이벤트를 실시간으로 공유.
• 서버에 부담을 최소화하면서 양방향 통신 지원.
• 접속, 그림, 칠판 색상, 지우기 등의 이벤트 전송.

사용자 식별 및 관리

• 각 사용자는 MB_ID(회원 ID) 혹은 임시 IP로 구분.
• WebSocket 연결 시 접속/퇴장 이벤트 처리.
• 다중 사용자의 그림과 이벤트를 Map 구조로 관리.

다양한 펜 스타일

• 연필(Pencil), 붓(Brush), 마커(Marker), 분필(Chalk) 등 선택 가능.
• 굵기(Line Width), 색상(Color), 투명도(Global Alpha) 조절 가능.
• 그림 스타일은 Canvas Context 설정으로 적용.

배경색 및 지우기

• 칠판 배경색 변경 가능.
• 지우기(Clear) 버튼으로 화면 초기화.
• 배경색 변경 이벤트도 WebSocket으로 전송 가능 → 다른 사용자에게 동기화.

PC 및 모바일 지원

• 마우스 이벤트(mouse)와 터치 이벤트(touch) 모두 지원.
• 반응형 UI를 고려하여 브라우저 환경에서 자연스럽게 사용 가능.

데이터 전송 구조
WebSocket 이벤트 예시:

 
{
  "type": "draw",
  "mb_id": "user_123",
  "x1": 10,
  "y1": 20,
  "x2": 30,
  "y2": 40,
  "color": "#ff0000",
  "lineWidth": 3,
  "penType": "brush"
}

배경색 이벤트:

 
{
  "type": "boardColor",
  "mb_id": "user_123",
  "color": "#000000"
}

클라이언트 중심 설계
그림 처리 대부분은 클라이언트 측 Canvas API에서 수행.
서버는 단순히 이벤트 중계 역할.
서버 부하 최소화 → 대규모 사용자 지원 가능.

## 설치방법 ##

1. 웹호스팅이나 서버에 올리시면 됩니다.

2. 설치 완료

** 참고로 테스트 주소는 여러사람이 많이 쓰닌까. 업로드해서 테스트 하시면, 정밀한 테스트를 하실 수 있습니다.

## 사용방법 ##

1. PC 테스트 주소 열기

2. 모바일 테스트 주소 열기

3. 낙서 시작

## 필독 공지 ##

지금부터는 JS 파일에서 절대 변경해서는 안 되는 핵심 설정에 대해 설명드리겠습니다.
이 부분은 메시지 브릿지 전체 기능의 기반이 되는 요소이므로, 반드시 끝까지 읽어주시길 바랍니다.

js소스에서 메시지 브릿지 서버와 연결하기 위한 중요한 설정이 포함되어 있습니다.
빨간색 표시된것은 시스템이 올바르게 작동하기 위해 반드시 필요한 고정값이며, 단 한 글자라도 수정하면 안 됩니다.

이 값들은 메시지 브릿지를 이루는 중앙 WebSocket 서버 주소, 세션 그룹 고유 구분자, 실시간 인증 구조와 연결되어 있습니다,

ws = new WebSocket(`wss://designonex.com:14147/?group=이곳은어디`);

이 URL에서 group= 뒤의 값은 메시지 브릿지에서 공간을 구분하는 고유 식별자 역할을 합니다.
즉, 이 부분은 사용자가 속한 ‘방(room)’입니다.

예를 들어, group 값에 내가 a를 할당하면, 다른 사용자가 같은 a를 사용할 경우 동일한 공간을 공유하게 됩니다.
따라서 내 계정과 세션만을 위한 ‘개인 공간’을 만들고 싶다면 유일한 값을 지정해야 합니다.

클라이언트에서는 보안을 위해서 토큰을 만들어야 안전한 서비스를 사용할 수 있습니다.

개발, 확장, 보안은 각각 클라이언트의 몫입니다.

메시지 브릿지(Message Bridge) 설명 : https://designonex.com/bbs/board.php?bo_table=real_time_bridge&wr_id=4
메시지 브릿지는 무료 서비스: https://designonex.com/bbs/board.php?bo_table=real_time_bridge&wr_id=9
메시지 브릿지 이용약관 : https://designonex.com/bbs/board.php?bo_table=real_time_bridge&wr_id=5
메시지 브릿지 무료 사용 약관 : https://designonex.com/bbs/board.php?bo_table=real_time_bridge&wr_id=10