실시간 쪽지 메시지 브로커 (클라이언트) 1.1.0

ii0000039210

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 2개월 전 · 조회 282 282 · 댓글 1 1

링크

https://designonex.com/ (31)

안녕하세요. 흑횽GDT입니다.

버전별로 업데이트를 하겠습니다.

귀하의 사이트 개발에 알맞는 버전을 사용하시길 바랍니다.

## 서비스 설명 ##

메시지 브로커란?
여러 프로그램(클라이언트) 사이에서 메시지를 받아 다른 곳으로 전달(중계)해주는 서버를 말합니다.

여러분들의 이해를 돕기위해, 채팅과 유사하며, 파이어베이스 스몰 사이즈라고 이해하시면 도움이 될 듯합니다.

## 서비스 특징 ##

1. 텔레그램처럼 서버에 저장되지 않습니다.

## 사용가능한 언어 ##

html, php, jsp, asp, aspx 모두 가능합니다.

(그누보드, 워프, 제로보드 등등 모두 사용가능)

## 테스트 사이트 사용방법 ##

1. 링크1 사이트 접속

2. 화면 실시간 쪽지 보내기 버튼 클릭

3. 팝업에서 메시지 입력하고 전송 버튼 클릭

4. 사이트 팝업 허용. (필수) * 참고, 크롬 알림허용도 하면 우측 하단에 알림 뜹니다.

5. 메세지 출력

** 브라우저 팝업 정책 **

- 처음 팝업을 열려고 시도 → 차단됨
- 사용자가 ‘허용’ 버튼 누름
- 하지만 차단되었던 팝업을 자동으로 다시 실행하지 않음

즉, 팝업허용하고, 다시 메시지를 전송해야 기능을 확인할 수 있습니다.

## 설치 방법 ##

1. 압축파일 다운로드 하시고 압축해제 후, 루트에 memo 폴더 만드신 후, 업로드 해주세요

2. head.sub.php 사용하고 있는 파일을 오픈 후, <head></head> 사이에 다음 코드를 삽입해주세요.

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>

지금까지는 테스트 사이트와 동일한 결과를 얻을 수 있습니다.

다음은 여러분들의 아이디어로 확장하시면 됩니다. 쪽지나 채팅 등 다양하게 제작할 수 있습니다.

프로젝트명 : Message Broker(서버) 1.0.0
배포명 : 실시간 쪽지 메시지 브로커 (클라이언트) 1.1.0

#############################################################

완전 구형 노트북으로 만들고 있어서 그런가요? 윈도우7이고 달달거리는 노트북이라 업로드가 안되는것일까요?

파일이 업로드 되지 않네요. 내일 다시 올려보고, 일단 임시로 다운로드 받으세요.

다운로드 주소 :

https://designonex.com/bbs/board.php?bo_table=notice&wr_id=1