실시간 WebSocket v1

// 공개 데모 전용입니다. 회원 전용 메시지는 v2를 사용하세요.
// 페이지에 <button id="send" disabled>보내기</button><ul id="messages"></ul> 추가
const room = 'main';
const url = new URL('/_joripspace/realtime', location.origin);
url.protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
url.searchParams.set('room', room);
url.searchParams.set('resource_type', 'chat');
const socket = new WebSocket(url);
const button = document.querySelector('#send');
const seen = new Set();
function render(message) {
  if (message.type !== 'chat.message' || !message.id || seen.has(message.id)) return;
  seen.add(message.id);
  const item = document.createElement('li');
  item.textContent = String(message.data?.body || '');
  document.querySelector('#messages').append(item);
}
socket.addEventListener('message', async (event) => {
  const message = JSON.parse(event.data);
  if (message.type === 'system.connected') {
    button.disabled = false;
    // 수신 리스너를 먼저 연결한 뒤 이력과 실시간 이벤트를 ID로 병합합니다.
    const historyUrl = new URL('/_joripspace/realtime/rooms/' + room + '/messages', location.origin);
    historyUrl.searchParams.set('resource_type', 'chat');
    historyUrl.searchParams.set('limit', '50');
    const response = await fetch(historyUrl);
    if (!response.ok) return console.warn('이력을 불러오지 못했습니다.');
    const page = await response.json();
    page.messages.forEach(render);
    // 이전 이력은 next_cursor를 보관해 before 쿼리로 추가 조회합니다.
  } else if (message.type === 'error') console.warn(message.code);
  else render(message);
});
button.addEventListener('click', () => {
  if (socket.readyState !== WebSocket.OPEN) return;
  const message = { id: crypto.randomUUID(), type: 'chat.message', data: { body: '안녕하세요!' } };
  socket.send(JSON.stringify(message)); // 재시도할 때는 같은 message 객체를 재사용
});
socket.addEventListener('close', () => { button.disabled = true; });
window.addEventListener('pagehide', () => socket.close());

const url = new URL('/_joripspace/realtime/rooms/main/messages', location.origin);
url.searchParams.set('resource_type', 'chat');
url.searchParams.set('limit', '50');
// 이전 응답의 next_cursor가 있으면 다음 요청에 넣습니다.
if (nextCursor) url.searchParams.set('before', nextCursor);
// 검색할 때는 같은 URL에 search를 추가합니다.
url.searchParams.set('search', '안녕하세요');
const response = await fetch(url);
if (!response.ok) throw new Error('이력 조회 실패');
const page = await response.json();

// 공개 v1 room 전용. room과 messageId는 현재 목록의 값입니다.
const url = new URL('/_joripspace/realtime/rooms/' + encodeURIComponent(room)
  + '/messages/' + encodeURIComponent(messageId), location.origin);
url.searchParams.set('resource_type', 'chat');
const response = await fetch(url, { method: 'DELETE' });
if (!response.ok && response.status !== 404) throw new Error('삭제 실패');
// 성공 또는 이미 없는 메시지라면 현재 화면의 해당 행을 제거합니다.
// v1은 다른 화면에 삭제 알림을 자동 전송하지 않습니다.
// 다른 화면은 이력을 다시 조회해 현재 조회 범위의 목록을 교체해야 합니다.