안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제 마법 우체국(서버)을 통해 메시지가 모두에게 전달되는 ‘브로드캐스팅’ 마법을 배워보았죠? 오늘은 채팅방에 새로운 친구가 들어오거나 나갈 때 자동으로 알려주는 ‘입장 마법(Presence Magic)’을 배워보겠습니다!
1. 입장 마법의 원리: “누가 전화를 연결했나요?”
웹소켓 전화선이 연결되는 순간, 서버는 “오! 새로운 마법사가 줄을 잡았구나!”라고 알아채요. 서버는 이 새로운 친구의 이름을 명단에 적고, 이미 방에 있는 다른 사람들에게 “방금 ‘꼬마 마법사’님이 입장하셨습니다!”라고 안내 방송을 해준답니다. 이것이 바로 실시간 접속자 목록(User List)의 원리예요.
2. 접속자 알림과 목록 관리하기 (코드)
새로운 연결(Connection)이 생길 때마다 실행되는 자바스크립트 이벤트와 이를 화면에 그리는 방법을 알아봅시다. 사용자님의 ‘EduPad’ 프로젝트에서 같은 과목을 공부 중인 친구들을 한눈에 확인하는 기능을 상상해 보세요!
<?php
// chat_presence.php: 실시간 입장 알림 마법
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<style>
.chat-layout { display: flex; max-width: 600px; margin: auto; border: 2px solid #9b59b6; border-radius: 15px; }
.user-list { width: 150px; background: #f3e5f5; padding: 15px; border-right: 1px solid #ddd; }
.chat-main { flex: 1; padding: 15px; }
.notice { color: #8e44ad; font-style: italic; font-size: 13px; text-align: center; margin-bottom: 10px; }
.online-dot { color: #2ecc71; margin-right: 5px; }
</style>
</head>
<body>
<div class="chat-layout">
<div class="user-list">
<h4>👥 접속 중</h4>
<div id="user-names">
<div><span class="online-dot">●</span>나(용사님)</div>
</div>
</div>
<div class="chat-main">
<div id="notice-area"></div>
<div id="chat-box" style="height:200px; background:white; padding:10px;">
채팅 내용이 여기에 표시됩니다.
</div>
</div>
</div>
<script>
const socket = new WebSocket('ws://your-magic-server.com/chat');
// 3. 서버에서 '입장' 신호가 왔을 때 처리해요
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.type === 'join') {
const notice = document.getElementById('notice-area');
notice.innerHTML = `<div class="notice">✨ ${data.user}님이 입장하셨습니다!</div>`;
// 목록에도 추가해요
const userList = document.getElementById('user-names');
userList.innerHTML += `<div><span class="online-dot">●</span>${data.user}</div>`;
}
};
</script>
</body>
</html>3. 왜 입장 알림 마법이 중요할까요?
함께 있다는 ‘연결감’을 주기 때문이에요!
1. 살아있는 커뮤니티: 아무도 없는 방에서 혼자 말하는 것보다, 누가 들어왔는지 아는 것이 훨씬 즐겁죠. ‘시골 라이프’ 플랫폼에서도 누군가 상담실에 입장했을 때 관리자에게 즉시 알림이 간다면 훨씬 빠른 서비스가 가능해집니다.
2. 상태 관리: 누가 지금 온라인인지 아는 기술은 나중에 ‘친구 찾기’나 ‘실시간 대전 게임’을 만들 때 가장 기초가 되는 핵심 기술이랍니다.
4. 아이들과 함께하는 ‘방울 소리 입장’ 놀이
방 문에 작은 방울을 달아보세요. 가족 중 누군가 들어올 때마다 딸랑! 소리가 나죠? “이 방울 소리가 바로 서버가 보내주는 입장 알림(Join Event)이야. 소리를 듣고 우리가 ‘누구 오셨어요?’라고 묻는 게 접속자 목록을 확인하는 과정이란다!”라고 설명해 주세요. 이벤트 기반 프로그래밍(Event-driven)의 원리를 아주 쉽게 이해하게 됩니다.
마치며: 이제 외롭지 않아요!
오늘 우리는 대화방에 누가 들어왔는지 실시간으로 확인하는 입장 마법을 배웠습니다. 이제 우리 채팅방은 북적북적 활기찬 공간이 되었네요! 다음 시간에는 내 메시지를 더 돋보이게 만드는 ‘꾸미기 마법: 나만의 닉네임과 알록달록 말풍선’을 배워보겠습니다. 멋진 마법사 이름을 정할 준비 되셨나요? 내일 아침에 만나요! ✨
