🗳️ 실시간 방 만들기 가이드

쌤보드에 올리는 앱(HTML)에 "실시간 방"을 켜면, 교사가 방을 만들고 학생들이 6자리 코드로 접속해 같은 화면 상태를 실시간으로 공유할 수 있어요(퀴즈·투표·협동 활동 등). 이 글의 코드를 AI에게 그대로 주면 방을 쓰는 앱을 만들어 줘요.

준비된 것들

• 앱은 실행될 때 자기 ID가 window.__SSAMLAB_TOOL_ID에 자동으로 들어와요(방 만들 때 필요).
• 모든 방 API 주소는 https://ssamlab.kr/api/room/ 로 시작해요. (실시간 방 앱은 이 주소로만 통신 가능)
• 방 코드는 6자리 숫자, 방은 6시간 뒤 자동으로 사라져요.

방 API

복붙용 최소 코드

아래를 앱에 넣으면 방을 만들고/입장하고/동기화할 수 있어요. AI에게 "이 방 API로 ○○ 앱 만들어줘" 하면서 같이 주세요.

복사var API = "https://ssamlab.kr/api/room/";
var code = "", hostToken = "", memberToken = "", since = 0;

function api(action, body) {
  return fetch(API + action, { method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify(body) }).then(function (r) { return r.json(); });
}

// 교사: 방 만들기
function createRoom() {
  return api("create", { tool_id: window.__SSAMLAB_TOOL_ID || "" })
    .then(function (j) { if (j.ok) { code = j.code; hostToken = j.host_token; } return j; });
}
// 학생: 코드로 입장
function joinRoom(inputCode, nick) {
  return api("join", { code: inputCode, nick: nick || "학생" })
    .then(function (j) { if (j.ok) { code = inputCode; memberToken = j.member_token; } return j; });
}
// 교사: 공유 상태 바꾸기 (모든 참여자에게 반영)
function setState(state) { return api("state", { code: code, host_token: hostToken, state: state }); }
// 학생: 이벤트 보내기 (교사가 받음)
function sendEvent(payload) { return api("event", { code: code, member_token: memberToken, payload: payload }); }

// 2.5초마다 최신 상태·이벤트 받기 (토큰 꼭 포함!)
function poll(onState, onEvent) {
  if (!code) return;
  var u = API + "poll?code=" + encodeURIComponent(code) + "&since=" + since;
  if (memberToken) u += "&member_token=" + encodeURIComponent(memberToken);
  else if (hostToken) u += "&host_token=" + encodeURIComponent(hostToken);
  fetch(u).then(function (r) { return r.json(); }).then(function (j) {
    if (j && j.ok) {
      if (j.state && onState) onState(j.state);
      (j.events || []).forEach(function (ev) {
        since = Math.max(since, Number(ev.seq || 0));
        if (onEvent) onEvent(ev);
      });
    }
  }).catch(function () {}).then(function () { setTimeout(function () { poll(onState, onEvent); }, 2500); });
}