1:1 DM 기본 예제 > BlueTalk::블루톡 무료 실시간 채팅 위젯 · 1:1 DM

1:1 DM 구현 예제

1:1 DM 기본 예제

이 페이지는 BlueTalk(블루톡)의 1:1 DM(Direct Message) 기능을 어떻게 사용하는지에 대한 개념과, 화면에 DM 전용 위젯을 붙이는 예제를 보여줍니다.
예제 코드는 모두 현재 bluetalk.js 구조(new BlueTalk() + window.SITE_KEY / GLOBAL_*)에 맞게 작성되어 있습니다.

1. 개념: BlueTalk DM 구조

BlueTalk의 DM은 다음과 같은 구조를 가집니다.

DM 세션(dm_key) – 1:1 대화를 식별하는 고유 키
owner / target – DM을 시작한 사용자와 상대 사용자
상태(status) – 요청/대기/승인/차단 등의 상태값

실제 UI에서는:

글로벌 채팅 / 채널에서 사용자 닉네임을 클릭 → “1:1 대화 요청” 메뉴 선택
DM 목록 화면에서 대화방을 선택
DM 전용 페이지나 위젯에서 메시지를 주고받는 방식

※ 이 예제에서는 “이미 dm_key가 만들어져 있다”는 전제 아래
해당 DM 세션을 화면에 표시하는 방법만 다룹니다. (dm_key 생성/목록 조회는 서버·WS 구현에 따라 달라질 수 있습니다.)

2. DM 전용 페이지의 기본 구조

일반적으로는 DM 전용 페이지 하나를 만들어서, 그 안에 BlueTalk DM 위젯을 붙이는 방식을 많이 사용합니다.
예를 들어 /talk/dm.php 같은 페이지를 만들고, 쿼리스트링으로 dm_key를 전달하는 방식입니다.

<?php
// /talk/dm.php (예시)

include_once('../common.php');

// 1) 파라미터로 넘어온 dm_key
$dm_key = isset($_GET['dm_key']) ? trim($_GET['dm_key']) : '';

// 2) 로그인 여부에 따라 user_id / nickname / user_key 준비
if ($is_member) {
    $blt_user_id  = $member['mb_id'];
    $blt_nickname = get_text($member['mb_nick']);
} else {
    $blt_user_id  = 'guest';
    $blt_nickname = '손님';
}

// 3) site_key / secret 은 config.php 등에서 불러온다고 가정
$blt_site_key = $blt_site_key ?? '발급받은_site_key';
$blt_secret   = $blt_secret   ?? '서버_비밀문자열';

// 4) user_key 생성 (예시)
$payload      = $blt_user_id . '|' . $blt_site_key . '|' . $blt_secret;
$blt_user_key = hash('sha256', $payload);
?>

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>1:1 DM</title>
  <script src="https://bluetalk.kr/talk/bluetalk.js"></script>
</head>
<body style="margin:0; padding:0;">

  <div id="dm-root" style="width:100%; height:100vh;"></div>

  <script>
    // PHP에서 넘긴 값들을 JS 전역에 세팅
    window.SITE_KEY          = "<?= $blt_site_key; ?>";
    window.GLOBAL_USER_ID    = "<?= htmlspecialchars($blt_user_id,   ENT_QUOTES, 'UTF-8'); ?>";
    window.GLOBAL_USER_KEY   = "<?= $blt_user_key; ?>";
    window.GLOBAL_NICKNAME   = "<?= htmlspecialchars($blt_nickname, ENT_QUOTES, 'UTF-8'); ?>";

    // URL 쿼리로 받은 dm_key
    const DM_KEY = "<?= htmlspecialchars($dm_key, ENT_QUOTES, 'UTF-8'); ?>";

    // DM 모드로 BlueTalk 초기화
    const bt = new BlueTalk({
      mode:     "dm",
      targetId: "dm-root",
      dmKey:    DM_KEY    // ★ DM 세션 식별자
    });
    bt.init();
  </script>

</body>
</html>

이 페이지를 새 창/레이어로 띄워주면, 사용자는 DM만 표시되는 전용 화면에서 대화할 수 있습니다.

3. 기존 페이지 안에 DM 위젯 내장하기

DM을 별도 페이지가 아니라, 게시판 상세/프로필 페이지 등 기존 레이아웃 안에 “일부 영역만” 표시하고 싶다면, 아래와 같이 mode: 'dm'으로 위젯을 붙이면 됩니다.

<!-- 예: 어떤 PHP 페이지의 본문 영역에 -->
<div class="panel panel-default">
  <div class="panel-heading">1:1 대화</div>
  <div class="panel-body" style="padding:0;">
    <div id="dm-widget" style="height:420px;"></div>
  </div>
</div>

<script src="https://bluetalk.kr/talk/bluetalk.js"></script>
<script>
  window.SITE_KEY          = "<?= $blt_site_key; ?>";
  window.GLOBAL_USER_ID    = "<?= htmlspecialchars($blt_user_id,   ENT_QUOTES, 'UTF-8'); ?>";
  window.GLOBAL_USER_KEY   = "<?= $blt_user_key; ?>";
  window.GLOBAL_NICKNAME   = "<?= htmlspecialchars($blt_nickname, ENT_QUOTES, 'UTF-8'); ?>";

  // 이 예제에서는 서버 쪽에서 미리 dm_key를 구했다고 가정
  const DM_KEY = "DM_KEY_FROM_SERVER"; // ★ 실제 dm_key로 교체 필요

  const bt = new BlueTalk({
    mode:     "dm",
    targetId: "dm-widget",
    dmKey:    DM_KEY
  });
  bt.init();
</script>

여기서도 마찬가지로 dm_key는 서버 측에서 가져와서 전달해야 합니다.
(예: DM 목록에서 선택한 세션의 dm_key, 또는 “회원 A ↔ 회원 B” 조합으로 생성한 dm_key 등)

4. DM 링크/버튼 만들기 (글로벌 → DM 페이지)

“글로벌 채팅에서 유저 닉네임 클릭 → 1:1 대화” 같은 기능은 다음과 같이 단순 링크 구조로도 시작할 수 있습니다.

<!-- 예: 유저 정보 팝업/메뉴에서 DM 페이지로 이동링크 제공 -->
<a href="/talk/dm.php?dm_key=<?= urlencode($dm_key); ?>" target="_blank">
  1:1 대화하기
</a>

dm_key를 어떤 규칙으로 만들지, 언제 생성할지는 서비스 정책에 따라 다릅니다.
예를 들어:

“회원 A와 B 사이의 DM은 항상 1개만 허용” → dm_key = hash("A|B|site_key") 형태로 결정
“대화방을 끊어서 새로 만들 수 있게” → DB에 dm 세션 테이블을 두고 A가 요청할 때마다 새로운 dm_key 생성

이 문서에서는 UI 예제만 다루고, dm_key 생성/승인/목록 조회 등은 WS 이벤트 문서와 실제 서버 구현을 참고해 설계하셔야 합니다.

5. 예전 문서와의 차이 (Bluetalk.openDM, Bluetalk.sendDM 제거)

예전 샘플에는 다음과 같이 Bluetalk.openDM() 이나 Bluetalk.sendDM() 같은 존재하지 않는 전역 함수가 개념 예제로 들어가 있었을 수 있습니다.

// ❌ 현재 버전에서는 지원하지 않는 패턴 (사용 금지 예시)
Bluetalk.openDM({ dm_key: "..." });
Bluetalk.sendDM({ dm_key: "...", content: "..." });

이런 함수들은 SDK에 실제로 구현되어 있지 않기 때문에,
그대로 사용하면 ReferenceError가 발생합니다.

현재 버전에서는 항상 아래 패턴을 사용해야 합니다.

const bt = new BlueTalk({
  mode:     "dm",
  targetId: "dm-root-or-widget",
  dmKey:    "DM_KEY_FROM_SERVER"
});
bt.init();

6. 정리

BlueTalk DM은 dm_key를 기준으로 세션을 구분합니다.
DM 전용 페이지나, 기존 페이지 일부 영역에 mode: 'dm' 위젯을 붙여 사용할 수 있습니다.
JS에서는 new BlueTalk({ mode: 'dm', targetId, dmKey }).init() 패턴을 사용합니다.
Bluetalk.openDM(), Bluetalk.sendDM() 등 예전 개념 예제 함수는 실제 SDK에 존재하지 않으므로 사용하지 않습니다.
dm_key 생성/목록 조회/승인/차단 등 세부 로직은 웹 서비스 정책과 서버 구현에 따라 설계해야 합니다.

실제 서비스 코드와 섞다 보면 dm_key 설계나 페이지 구조가 헷갈릴 수 있습니다.
그런 경우 현재 사용 중인 구조(회원 테이블, 쪽지/DM 정책 등)를 정리해서 Q&A에 올려주시면, 함께 설계 방향을 잡아드리겠습니다.