그누보드 게시판별 채널 연동 예제 > BlueTalk::블루톡 무료 실시간 채팅 위젯 · 1:1 DM

게시판/페이지별 채널 분리 예제

1. 개념: 게시판별로 채널 나누기

그누보드의 각 게시판은 $bo_table 값으로 구분됩니다. 예를 들어:

자유게시판: $bo_table = 'free'
주식게시판: $bo_table = 'stock'
코인게시판: $bo_table = 'coin'

BlueTalk의 채널도 단순히 문자열 키로 구분되므로, 기본 아이디어는 다음과 같습니다.

channel_key = "board_" + $bo_table
예) free 게시판 → "board_free"
    stock 게시판 → "board_stock"
    coin 게시판 → "board_coin"

이렇게 만들면 게시판마다 완전히 분리된 채팅방을 갖게 됩니다.

2. PHP에서 channel_key 만들기

우선 head.sub.php 또는 공통 레이아웃에서 $bo_table 값을 보고 채널 키를 하나 만들어 줍니다.

<?php
// /theme/사용중인테마/head.sub.php 상단 또는 공통 include 파일

// 이미 정의해 둔 BlueTalk 설정
// $blt_site_key, $blt_secret 등은 config.php에서 가져온다고 가정합니다.

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

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

// ★ 게시판별 채널 키 생성
$blt_channel_key = 'global';  // 기본값

if (isset($bo_table) && $bo_table) {
    // 게시판마다 "board_게시판ID" 형태로 채널을 나눔
    $blt_channel_key = 'board_' . $bo_table;
}
?>

위 예시는 “게시판이 아니면 글로벌 채널(global)”, “게시판이면 board_게시판ID”를 채널로 사용하는 구조입니다.

3. JS에서 channel_key 전달하기

다음으로, PHP에서 만든 $blt_channel_key를 JS 측에 전달해 주어야 합니다.
현재 bluetalk.js는 window.GLOBAL_CHANNEL 값을 보고 기본 채널을 선택하도록 되어 있으므로, 이 전역값을 문자열로 세팅해 주는 것이 가장 간단합니다.

<!-- /theme/사용중인테마/head.sub.php 하단 근처 -->

<div id="bluetalk-container">
    <div id="bluetalk" style="width:100%; height:100%;"></div>
</div>

<script src="https://bluetalk.kr/talk/bluetalk.js"></script>
<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'); ?>";

  // ★ 게시판별 채널 키
  window.GLOBAL_CHANNEL    = "<?= htmlspecialchars($blt_channel_key, ENT_QUOTES, 'UTF-8'); ?>";

  const bt = new BlueTalk({
    mode:     'global',   // 글로벌 레이아웃이지만 내부 default 채널은 GLOBAL_CHANNEL 값으로 결정
    targetId: 'bluetalk'
  });
  bt.init();
</script>

여기서 GLOBAL_CHANNEL이 문자열이면, BlueTalk는 해당 문자열을 기본 채널 키로 사용합니다.
(예: "board_free", "board_stock" 등)

4. 게시판 목록별 채널 탭(응용)

하나의 페이지에서 여러 게시판 주제를 한 번에 보고 싶다면, window.GLOBAL_CHANNEL을 배열로 넘겨 상단에 채널 탭을 표시할 수도 있습니다.

<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'); ?>";

  // 예: 상단 탭 3개 (전체 / 주식 / 코인)
  window.GLOBAL_CHANNEL = [
    { id: 'global',       label: '전체 채팅' },
    { id: 'board_stock',  label: '주식게시판 채널' },
    { id: 'board_coin',   label: '코인게시판 채널' }
  ];

  const bt = new BlueTalk({
    mode:     'global',
    targetId: 'bluetalk'
  });
  bt.init();
</script>

이 방식은 “페이지 하나에 여러 채널을 탭으로 전환”하는 레이아웃에 유용합니다.
반대로, 이 문서의 메인 주제인 “게시판마다 독립된 채널”이 필요하다면 앞서 설명한 문자열 방식(board_{$bo_table})이 더 간단합니다.

5. 조건부 출력 + 채널 매핑 종합 예제

마지막으로, 실제로 써먹기 좋은 “종합 예제”를 하나 보겠습니다.
이 예제에서는 다음과 같은 조건을 만족합니다.

메인 페이지에서는 global 채널 사용
게시판 페이지에서는 board_게시판ID 채널 사용
그 외 페이지에서는 블루톡을 출력하지 않음

<?php
// head.sub.php

// 1) 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 = '손님';
}
$blt_payload  = $blt_user_id . '|' . $blt_site_key . '|' . $blt_secret;
$blt_user_key = hash('sha256', $blt_payload);

// 2) 기본 채널값 및 출력 여부 결정
$show_bluetalk   = false;
$blt_channel_key = 'global';

// 메인 페이지라면 global 채널 사용
if (defined('_INDEX_')) {
    $show_bluetalk = true;
    $blt_channel_key = 'global';
}

// 게시판 페이지라면 board_게시판ID 채널 사용
if (isset($bo_table) && $bo_table) {
    $show_bluetalk   = true;
    $blt_channel_key = 'board_' . $bo_table;
}
?>

<?php if ($show_bluetalk) { ?>
  <style>
  #bluetalk-container {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 360px;
      max-width: calc(100% - 40px);
      height: 480px;
      max-height: calc(100vh - 80px);
      z-index: 9999;
      box-shadow: 0 14px 32px rgba(15,23,42,0.6);
      border-radius: 12px;
      overflow: hidden;
      background: #020617;
  }
  </style>

  <div id="bluetalk-container">
      <div id="bluetalk" style="width:100%; height:100%;"></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'); ?>";

    // 게시판별 채널 키 (예: global, board_free, board_stock ...)
    window.GLOBAL_CHANNEL    = "<?= htmlspecialchars($blt_channel_key, ENT_QUOTES, 'UTF-8'); ?>";

    const bt = new BlueTalk({
      mode:     'global',
      targetId: 'bluetalk'
    });
    bt.init();
  </script>
<?php } ?>

이 패턴을 기본으로 잡아두면, 나중에 “특정 게시판만 예외 처리” 등을 추가하기도 쉬워집니다.

6. 정리