실시간 쪽지 메시지 브로커 (클라이언트) 1.0.0 (기본 소스)
페이지 정보
본문
기본버전
모든 페이지에 따라 다녀야 할 소스
<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 = "파라미터를 받을 페이지 URL"; // 팝업으로 받을 페이지
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>
쪽지를 보내는 소스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쪽지 보내기</title>
<style>
body { margin:0; font-family: sans-serif; }
.popup-bg {
position: fixed; inset:0;
background: rgba(0,0,0,0.4);
display:flex; align-items:center; justify-content:center;
}
.popup {
background:#fff; width:450px; padding:20px;
border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,0.2);
}
.field { margin-bottom:12px; }
label { display:block; font-size:14px; margin-bottom:4px; }
input, textarea {
width:100%; padding:8px 2px; border:1px solid #ccc; border-radius:4px;
font-size:14px;
}
textarea { height:100px; resize:none; }
.actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
button { padding:8px 14px; font-size:14px; border-radius:4px; cursor:pointer; border:0; }
.cancel { background:#ddd; }
.send { background:#4f46e5; color:#fff; }
</style>
</head>
<body>
<div class="popup-bg">
<div class="popup">
<h2>쪽지 보내기</h2>
<!--div class="field">
<label>받는 사람 </label>
<div style="padding:0 5px; font-size:0.7em">* 아이디가 없을 경우에는 접속한 모든 분들께 쪽지가 전달됩니다.</div>
<input type="text" id="to" placeholder="아이디를 입력해주세요." />
</div-->
<div class="field">
<label>메시지</label>
<textarea id="msg" placeholder="내용을 입력하세요"></textarea>
</div>
<div class="actions">
<button class="cancel" onclick="window.close()">취소</button>
<button class="send" onclick="sendMessage()">전송</button>
</div>
</div>
</div>
<script>
const domain = window.location.hostname;
let ws = new WebSocket("wss://designonex.com:14147/?group=" + encodeURIComponent(domain));
// ✅ 연결 성공
ws.onopen = () => {
console.log("✅ WebSocket 연결됨");
};
// ✅ 서버에서 메시지 수신
ws.onmessage = (e) => {
console.log("
- 다음글실시간 쪽지 메시지 브로커 (그누보드 클라이언트) 1.2.0 파일 다운로드 25.11.07
댓글목록
등록된 댓글이 없습니다.