안녕하세요.
저희는 메시지 브릿지 채팅 플러그인을 공식 배포합니다.

이 플러그인은 회원가입 없이도 누구나 편리하게 소통할 수 있도록 설계된 솔루션으로,
비즈니스 상담, 고객 문의, 홍보 및 마케팅 활동 등 다양한 영역에서 활용이 가능합니다.

참고로, design1.php 파일명은 바꾸시면 됩니다.

## 텔레그램처럼 모든 데이터는 저장되지 않습니다. 새로고침하면 대화의 내용이 사라집니다.

메시지 브릿지(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

[간편 설치 안내]

1. 파일 업로드
design1.php 파일을 FTP를 통해 웹사이트에 업로드하세요.
(루트 또는 원하는 폴더 위치에 자유롭게 설치 가능)

2. 바로 사용 가능
업로드한 주소로 접속만 하면 즉시 채팅 기능 사용이 가능합니다.
팝업 창으로도, AJAX 방식의 DIV로도 자유롭게 구현할 수 있어 웹사이트 환경에 최적화된 채팅 경험을 제공합니다.

[스크립트 설명]

1. 화면에서 필요한 요소 가져오기

const messageArea = document.getElementById('messageArea');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');
...

• 여기서 getElementById는 HTML에서 특정 박스나 버튼을 가져오는 거예요.
• 예를 들어 messageArea는 채팅 메시지를 보여주는 큰 상자, messageInput은 사용자가 글을 쓰는 입력창, sendButton은 메시지를 보내는 버튼이에요.

2. 유저(사용자) ID 만들기

let myUserId = localStorage.getItem('chatUserId') || ('user_' + Date.now() + '_' + Math.floor(Math.random()*1000));
localStorage.setItem('chatUserId', myUserId);

• 채팅할 때 누가 말하는지 구분해야 해서 ID를 만듭니다.
• localStorage라는 곳에 저장하면, 브라우저를 껐다 켜도 ID가 그대로 남아요.
• 없으면 랜덤으로 만들어서 저장해요.

# 그누보드 회원 아이디를 사용하고 싶으면, 여기서 수정하면 됩니다. 

const myUserId = "<?php echo $member['mb_id']; ?>";

상황에 따라 틀리겠지만, 회원만 접속하는 채팅이면, localStorage.setItem('chatUserId', myUserId); 이 부분이 필요없습니다. 

3. WebSocket 연결

function initWebSocket() { ... }
initWebSocket();

• WebSocket은 실시간으로 채팅 데이터를 주고받는 길이에요.
• 여기서는 서버와 연결해서 메시지를 보내고, 상대방 메시지를 받을 수 있어요.
• 연결이 끊어지면 자동으로 다시 연결되도록 만들어놨어요.

3-1. WebSocket 그룹 [중요]

ws = new WebSocket("wss://designonex.com:14147/?group=" + encodeURIComponent(group) + "&userId=" + myUserId);

이 소스에 그룹이 제일 중요합니다. 그룹의 이름을

const domain = window.location.hostname;  

과 group을 합하면, 중복이 되지 않을 것입니다. 수정된 소스는 다음과 같습니다.

const domain = window.location.hostname;  
ws = new WebSocket("wss://designonex.com:14147/?group=" + encodeURIComponent(domain +"/" + group) + "&userId=" + myUserId);

이렇게 하면, 사이트 내에서 채팅룸을 여러개도 만들 수 있습니다.

4. 메시지 받기

ws.onmessage = (e) => { ... }

• 상대방이 보낸 메시지를 받으면 실행돼요.
• 텍스트 메시지면 addMessage 함수 호출
• 이미지 메시지면 addImageMessageGroup 호출
• 누가 입력 중이면 showTyping 호출

5. 연결 종료, 오류 처리

ws.onclose = () => { ... }
ws.onerror = () => { ws.close(); }

• 만약 인터넷이 잠깐 끊기거나 오류가 나면 2초 후 다시 연결하게 만들었어요.

6. 시간 표시

function getTimeStr(){ ... }

• 메시지 옆에 몇 시인지 표시해주는 함수예요.

7. 메시지 보내기

function addMessage(text, sender){ ... }

• 채팅창에 글을 보여주는 역할
• 글 안에 URL이 있으면 클릭할 수 있는 링크로 바꿔줘요.
• 글 보내고 나면 채팅창이 자동으로 스크롤돼요.

7. 글 입력, Shift+Enter 줄바꿈

messageInput.addEventListener('keydown', e=>{ ... });

• Enter: 메시지 전송
• Shift+Enter: 줄바꿈
• 입력 중일 때 상대방에게 타이핑 중 표시도 보내요.

8. 이미지 메시지 보내기

function addImageMessageGroup(urls, sender){ ... }

• 여러 장 이미지를 한 그룹으로 만들어서 채팅창에 보여줘요.
• 이미지를 클릭하면 모달 창(크게 보는 창)이 열려요.

9. 이미지 업로드 버튼

fileButton.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', async e => { ... });

• 파일 선택하면, 이미지 크기를 줄인 뒤 서버에 보냄
• 이미지를 클릭하면 모달에서 크게 보기 가능

10. 이모지 기능

const emojis=['😀','😂','😍','🥲','😎','😭','👍','🙏','💖','🎉'];
emojiButton.addEventListener('click', ()=>{ ... });

• 웃는 얼굴, 하트 같은 이모지를 선택해서 입력창에 넣을 수 있어요.

11. 이미지 모달(크게 보기)

function openModalByIndex(groupIdx, imgIdx){ ... }
function updateModalImage(){ ... }

• 이미지 클릭하면 큰 화면에서 볼 수 있음
• 좌우 버튼이나 드래그/스와이프로 이미지 바꿀 수 있음
• ESC 누르면 닫힘

12. 드래그 슬라이드

stage.on('touchstart mousedown', e=>{ ... });

• 손가락으로 스와이프하거나 마우스로 드래그하면
• 이전/다음 이미지로 이동 가능

13. 메시지 보내기 버튼

sendButton.addEventListener('click', ()=>{ ... });

• 입력창에 쓴 글을 채팅창에 추가하고, 서버로 보내요.

14. 상대방 타이핑 표시

function showTyping(show, userId){ ... }

• 상대방이 글을 입력 중이면
• 채팅창에 “... 입력 중” 표시가 나타나요

본 플러그인은 기본 기능 외에도 디자인, 보안, 사용자 경험(UX) 등 다양한 영역에서 확장이 가능합니다.
기업 환경에 맞춘 UI 커스터마이징부터, 안정적인 운영을 위한 보안 기능 강화까지
업무 목적에 맞춰 유연하게 확장·개발할 수 있도록 설계되었습니다.

고객사의 서비스 환경에 최적화된 형태로 발전시킬 수 있으므로
장기적인 운영 및 고도화에도 높은 효율을 제공합니다.