그누보드5 실시간 채팅 알림 뱃지 기능 구현 방법

• 목록
• 스크랩

그누보드5 실시간 채팅 알림 뱃지 기능 구현 방법

그누보드5 운영자 및 개발자가 고객센터 실시간 채팅에서 읽지 않은 메시지 수를 뱃지로 표시하고 동적으로 갱신하는 소스를 적용할 때 도움을 얻을 수 있습니다.

action.php 파일 카운트 쿼리 및 JSON 응답 로직 추가 방법

그누보드5 환경에서 고객센터 실시간 채팅 알림 뱃지 기능을 구현하기 위해 action.php 파일 맨 하단에 읽지 않은 메시지 수를 반환하는 쿼리와 JSON 응답 로직을 추가할 수 있습니다.

1. 추가 위치

• 대상 파일: action.php 파일의 맨 하단

2. 구현 소스 코드

if(isset($_POST['act']) && $_POST['act'] == 'getTotalUnreadCount'){
 $sql = "SELECT COUNT(*) as cnt FROM `aidex_chatMessage` WHERE `type` = '1' AND `isRead` = '0";
 $row = sql_fetch($sql);
 // 이 줄 앞에 다른 echo나 출력문이 있으면 안 됩니다.
 ob_clean(); // 혹시 모를 앞선 출력을 비움
 echo json_encode(array("jg" => "ok", "count" => (int)$row['cnt']));
 exit;
}

3. 주의 사항 및 다음 행동

• 출력문 충돌 방지: json_encode 실행 전 다른 echo나 공백, 출력문이 존재하면 JSON 파싱 에러가 발생할 수 있으므로 ob_clean()을 통해 앞선 출력을 반드시 비워야 합니다.
• 테이블 구조 확인: 사용 중인 데이터베이스에 aidex_chatMessage 테이블과 type, isRead 필드가 정상적으로 존재하는지 먼저 확인해야 합니다.

JSON 응답 전 ob_clean()을 활용한 출력문 충돌 방지 방법

그누보드 환경에서 AJAX 등을 통해 서버로부터 JSON 응답을 받을 때, 앞선 다른 출력문이나 공백, BOM 등으로 인해 JSON 데이터가 손상되어 파싱 에러(Parsing Error)가 발생할 수 있습니다.

구현 위치 및 조건

서버 측 처리 파일(예: action.php) 맨 하단에서 $_POST['act'] == 'getTotalUnreadCount' 조건 등을 처리할 때 적용합니다.

if(isset($_POST['act']) && $_POST['act'] == 'getTotalUnreadCount'){
 $sql = "SELECT COUNT(*) as cnt FROM `aidex_chatMessage` WHERE `type` = '1' AND `isRead` = '0'";
 $row = sql_fetch($sql);
 
 // 이 줄 앞에 다른 echo나 출력문이 있으면 안 됩니다.
 ob_clean(); // 혹시 모를 앞선 출력을 비움
 echo json_encode(array("jg" => "ok", "count" => (int)$row['cnt']));
 exit;
}

주의 사항 및 다음 행동

• ob_clean() 함수는 이전까지 버퍼에 쌓인 출력 내용을 지워주어 정상적인 JSON 포맷만 출력되도록 돕습니다.
• 해당 코드 라인 앞쪽에 의도치 않은 echo, print, 또는 PHP 파일 시작/끝의 보이지 않는 공백이나 개행문자가 포함되지 않았는지 먼저 확인해야 합니다.
• JSON 응답 파싱 에러가 계속 발생한다면 브라우저 개발자 도구의 네트워크 탭에서 응답(Response) 본문을 열어 HTML 태그나 경고문 같은 불필요한 문자열이 함께 출력되고 있는지 점검해야 합니다.

tail.sub.php에 알림 뱃지 배치 및 AJAX 갱신 방법

그누보드5 환경에서 실시간 채팅 알림 뱃지를 화면에 렌더링하고 주기적으로 동기화하려면 공통 하단 파일인 tail.sub.php 또는 레이아웃 파일에 알림 표시 영역(HTML)을 추가하고, 주기적으로 서버에 요청을 보내는 스크립트를 배치해야 합니다.

1. 적용 위치 및 주의사항

• 수정 대상 파일: tail.sub.php
• 주요 조건: 파일 수정 전 원본 파일을 반드시 백업해야 합니다.
• 경로 확인: 댓글 및 팁 게시판의 일부 후기나 예시 코드에서 AJAX 요청 URL(url: "/adm/contact/action.php" 등)을 경로에 맞게 정확히 지정해야 합니다. 관리자 디렉토리 명이 기본 adm이 아닌 경우(예: adm2 등) 실제 운영 중인 경로와 일치하는지 확인합니다.

2. 알림 뱃지 및 스크립트 구성 예시

<!-- 알림 뱃지 HTML 영역 예시 -->
<span class="chat-badge" id="chatUnreadBadge" style="display:none;">0</span>

<script>
// 주기적으로 서버의 action.php에 요청을 보내 unread count를 갱신하는 로직
function updateChatBadge() {
 $.ajax({
 url: G5_ADMIN_URL + '/contact/action.php',
 type: 'POST',
 data: { act: 'getTotalUnreadCount' },
 dataType: 'json',
 success: function(res) {
 if (res && res.count > 0) {
 $('#chatUnreadBadge').text(res.count).show();
 } else {
 $('#chatUnreadBadge').hide();
 }
 }
 });
}

// 페이지 로드 후 일정 간격(예: 5초)으로 실행
$(document).ready(function() {
 updateChatBadge();
 setInterval(updateChatBadge, 5000);
});
</script>

3. 다음 행동 및 확인 사항

• 브라우저 개발자 도구의 콘솔(Console)과 네트워크(Network) 탭을 열어 action.php 호출 시 getTotalUnreadCount 요청이 정상적으로 200 OK 응답과 JSON 데이터를 반환하는지 확인합니다.
• 만약 JSON 파싱 에러가 발생한다면 서버 측 action.php 파일 상단이나 출력 구간에 다른 echo문이나 공백이 포함되어 있는지 점검합니다.

데이터베이스 테이블 구조와 필드 구성

고객센터 실시간 채팅 알림 뱃지 기능을 구현하기 위해 사용되는 메시지 저장용 테이블(aidex_chatMessage)은 상담 메시지의 유형과 읽음 여부를 구분하여 카운트할 수 있도록 설계되어 있습니다.

주요 필드 및 조건

• aidex_chatMessage 테이블: 상담 내용과 메시지 상태를 관리하기 위한 커스텀 테이블입니다.
• type: 상담 유형을 구분하기 위한 필드로, 예제 코드에서는 type = '1' 조건을 사용하여 특정 상담 메시지만 필터링합니다.
• isRead: 메시지의 읽음 여부를 나타내는 필드로, 읽지 않은 메시지는 isRead = '0' 조건으로 조회하여 카운트합니다.

카운트 쿼리 예시

서버 측 파일인 action.php 맨 하단에서는 다음과 같은 SQL 쿼리를 통해 읽지 않은 메시지 수를 계산합니다.

$sql = "SELECT COUNT(*) as cnt FROM `aidex_chatMessage` WHERE `type` = '1' AND `isRead` = '0";
$row = sql_fetch($sql);

상황별 구현 가이드

내 상황	선택 기준	다음 행동
실시간 채팅 알림 뱃지 기능을 구현하려는 경우	데이터베이스 테이블(aidex_chatMessage) 존재 여부 확인	action.php 하단에 카운트 쿼리 및 JSON 응답 로직 추가
AJAX 응답 시 JSON 파싱 에러가 발생하는 경우	서버 측 불필요한 출력문(echo, 공백 등) 존재 여부	ob_clean()을 호출하여 버퍼를 비우고 exit로 종료
알림 뱃지가 화면에 표시되지 않는 경우	tail.sub.php 내 스크립트 경로 및 HTML 요소 배치 확인	관리자 경로(adm 등)와 일치하는지 확인 후 스크립트 재배치

실전 FAQ

Q. JSON 응답 시 파싱 에러가 계속 발생합니다.

• json_encode 호출 전 ob_clean()을 사용하여 이전 버퍼를 비웠는지 확인하십시오. 파일 상단이나 <?php 태그 앞뒤에 포함된 보이지 않는 공백이나 BOM 문자도 원인이 될 수 있습니다.

Q. 관리자 디렉토리 경로가 기본값(adm)과 다릅니다.

• AJAX 요청 URL(url: "/adm/contact/action.php")을 실제 운영 중인 관리자 폴더명(예: adm2)으로 수정해야 합니다. 브라우저 개발자 도구의 네트워크 탭에서 404 에러가 발생하는지 확인하십시오.

참고자료

기타 참고자료

• sir.kr — 고객센터 실시간 채팅 실시간 알림 뱃지 기능 소스 공유 - SIR - 개발자 커뮤니티
• sir.kr — 고객센터 실시간 채팅 - SIR - 개발자 커뮤니티