실시간 쪽지 메시지 브로커 (클라이언트) 1.1.0 정보
실시간 쪽지 메시지 브로커 (클라이언트) 1.1.0- ii0000039210 자기소개 아이디로 검색 회원게시물
- 조회 129
- 댓글 1
관련링크
본문
안녕하세요. 흑횽GDT입니다.
버전별로 업데이트를 하겠습니다.
귀하의 사이트 개발에 알맞는 버전을 사용하시길 바랍니다.
## 서비스 설명 ##
메시지 브로커란?
여러 프로그램(클라이언트) 사이에서 메시지를 받아 다른 곳으로 전달(중계)해주는 서버를 말합니다.
여러분들의 이해를 돕기위해, 채팅과 유사하며, 파이어베이스 스몰 사이즈라고 이해하시면 도움이 될 듯합니다.
## 서비스 특징 ##
1. 텔레그램처럼 서버에 저장되지 않습니다.
## 사용가능한 언어 ##
html, php, jsp, asp, aspx 모두 가능합니다.
(그누보드, 워프, 제로보드 등등 모두 사용가능)
## 테스트 사이트 사용방법 ##
1. 링크1 사이트 접속
2. 화면 실시간 쪽지 보내기 버튼 클릭
3. 팝업에서 메시지 입력하고 전송 버튼 클릭
4. 사이트 팝업 허용. (필수) * 참고, 크롬 알림허용도 하면 우측 하단에 알림 뜹니다.
5. 메세지 출력
** 브라우저 팝업 정책 **
- 처음 팝업을 열려고 시도 → 차단됨
- 사용자가 ‘허용’ 버튼 누름
- 하지만 차단되었던 팝업을 자동으로 다시 실행하지 않음
즉, 팝업허용하고, 다시 메시지를 전송해야 기능을 확인할 수 있습니다.
## 설치 방법 ##
1. 압축파일 다운로드 하시고 압축해제 후, 루트에 memo 폴더 만드신 후, 업로드 해주세요
2. head.sub.php 사용하고 있는 파일을 오픈 후, <head></head> 사이에 다음 코드를 삽입해주세요.
<style>
#popup {
display: none;
position: fixed;
top: 20px;
right: 20px;
background: #ffc;
padding: 10px;
border: 1px solid #cc0;
border-radius: 5px;
z-index: 9999;
}
</style>
<script>
const domain = window.location.hostname;
const ws = new WebSocket("wss://designonex.com:14147/?group=" + encodeURIComponent(domain));
ws.onopen = () => console.log("✅ 연결됨");
ws.onmessage = (e) => {
// JSON 수신
const data = JSON.parse(e.data);
// 1️⃣ 개별 변수에 담기
const receivedId = data.id || null;
const receivedExt = data.ext || null;
const receivedExt1 = data.ext1 || null;
const receivedMessage = data.message || "새 쪽지 도착";
console.log("받은 ID:", receivedId);
console.log("받은 EXT:", receivedExt);
console.log("받은 EXT1:", receivedExt1);
console.log("받은 메시지:", receivedMessage);
if(receivedMessage){
openPostPopup(receivedId, receivedExt, receivedExt1, receivedMessage);
}
// 2️⃣ HTML div 팝업 표시
const popup = document.getElementById("popup");
document.getElementById("popup-msg").innerText = receivedMessage;
popup.style.display = "block";
setTimeout(() => popup.style.display = "none", 5000);
// 3️⃣ Windows Notification (Toast)
if(Notification.permission === "granted"){
new Notification("새 쪽지 알림", { body: receivedMessage });
} else if(Notification.permission !== "denied"){
Notification.requestPermission().then(permission => {
if(permission === "granted"){
new Notification("새 쪽지 알림", { body: receivedMessage });
}
});
}
// 4️⃣ 파라미터 기반 기능 실행 예시
if(receivedId === "user1" && receivedExt === "111"){
console.log("특정 기능 실행 가능!");
}
};
ws.onclose = () => console.log("⚠️ 연결 종료");
ws.onerror = () => console.log("❌ 오류 발생");
function openPostPopup(receivedId, receivedExt, receivedExt1, receivedMessage) {
// 1. 팝업 먼저 열어 팝업차단 방지
let popup = window.open("", "postPopup", "width=600,height=500");
// 2. form 생성
let form = document.createElement("form");
form.method = "POST";
form.action = "<?php echo G5_URL?>/memo/receive_client.php"; // 팝업으로 받을 페이지
form.target = "postPopup";
// 3. 전송할 값 hidden input으로 작성
let data = {
Id: receivedId,
Ext: receivedExt,
Ext1: receivedExt1,
message: receivedMessage
};
for (let key in data) {
let input = document.createElement("input");
input.type = "hidden";
input.name = key;
input.value = data[key];
form.appendChild(input);
}
// 4. form을 body에 추가하고 submit 실행
document.body.appendChild(form);
form.submit();
}
</script>
3. 그리고, index에 다음 코드를 알맞은 위치에 삽입해주세요.
<div style="border:1px solid #ddd; padding:10px">
<a href="#" onclick="openPopup(); return false;" class="btn_b03" style="padding:5px; font-weight:bold; ">실시간 쪽지 보내기</a>
<script>
function openPopup() {
window.open(
"<?php echo G5_URL ?>/memo/index.php",
"popupWindow",
"width=600,height=500,top=100,left=200"
);
}
</script>
</div>
지금까지는 테스트 사이트와 동일한 결과를 얻을 수 있습니다.
다음은 여러분들의 아이디어로 확장하시면 됩니다. 쪽지나 채팅 등 다양하게 제작할 수 있습니다.
프로젝트명 : Message Broker(서버) 1.0.0
배포명 : 실시간 쪽지 메시지 브로커 (클라이언트) 1.1.0
#############################################################
완전 구형 노트북으로 만들고 있어서 그런가요? 윈도우7이고 달달거리는 노트북이라 업로드가 안되는것일까요?
파일이 업로드 되지 않네요. 내일 다시 올려보고, 일단 임시로 다운로드 받으세요.
다운로드 주소 :
https://designonex.com/bbs/board.php?bo_table=notice&wr_id=1
1
댓글 전체
제가 개발하면서 한 가지를 잠시 잊고 있었던 것 같습니다.
처음에는 이 기능이 주로 개발자들에게 필요한 엔진이라고 생각했는데,
그누보드를 사용하는 많은 회원님들은 개발자가 아닌 일반 사용자도 많이 있다는 것을 고려하지 못했습니다.
그 사실을 다시 떠올리고 나니,
이 기능은 복잡한 설정이나 코드를 건드리지 않아도
누구나 쉽게 사용할 수 있어야 한다는 걸 명확히 깨닫게 되었습니다.
그래서 이제는 방향을 바꿔,
전문지식이 없어도 설치만 하면 바로 사용할 수 있는
그누보드 플러그인 형태로 개발을 진행하고 있습니다.
잠시 생각이 짧았던 부분이 부끄럽기도 하지만,
이 과정을 통해 더 많은 분들이 편하게 사용할 수 있는 방향을 찾았다는 점에서
더 나은 결과로 이어지도록 진행하겠습니다.
감사합니다.
