웹소켓 상담 채팅

부가기능

웹소켓 상담 채팅

120,000Rp

파일 다운로드

Rp를 사용하여 다운로드 할 수 있습니다. RP로 구매한 자료는 재 다운로드시 중복 차감되지 않습니다. 부가기능 무료이용 혜택이 유효한 경우 RP 소진 없이 다운로드하실 수 있습니다.

로그인 후 이용해주세요.

wschat_1.2.2.zip

데모 보기

설치환경
PHP 7.4 이상 / OpenSSL

기능번호
788

최근 업데이트
2026.09.26 20:35

조회
266

1.2.2 업데이트
# 채팅방 목록이 많아지는 경우 스크롤이 작동하지 않던 문제 수정
# 버전변경 (1.2.2)

1.2.1 업데이트
# 진행중 · 완료 목록에 최신 메시지 날짜 · 시간을 2026.01.01 12:00:00 형식으로 표시하도록 개선
날짜 영역의 줄이 맞지 않던 부분 수정
메시지가 없는 상담은 상담 생성 시간을 표시 하도록 개선

# 버전변경 (1.2.1)

1.2.0 업데이트
# FAQ 질문 버튼을 왼쪽 정렬 · 가로 배치 · 자동 줄바꿈으로 개선
# 웹소켓으로 메시지 본문을 전달받아 즉시 표시하도록 개선
# 자체 서버에서는 사용자 메시지 전송도 웹소켓 명령으로 처리. 권한 확인과 DB 저장은 PHP에서 수행.
# Pusher 방식은 HTTP로 전송 · 저장하고, 수신은 웹소켓으로 본문을 전달하도록 개선
# 메시지 · 읽음 상태 등 실시간 변경을 화면에 직접 반영.
# 전송 요청에 식별자를 적용해 재전송으로 같은 메시지가 중복 저장되는 문제 개선
# 중복 이벤트와 순서가 뒤바뀐 이벤트 처리 보강.
# Pusher 크기 제한을 넘는 긴 메시지는 분할 전송하고 수신 시 재조립하도록 개선
# 자체 서버는 긴 메시지도 허용 범위 안에서 하나의 이벤트로 전달하도록 처리

# 전달 실패 내역을 DB에 저장하고 재시도하도록 추가.
# 장애 중 쌓인 복구 요청은 대화방별로 합쳐 불필요한 재전송 축소
# 복구 시 현재 DB 내용을 다시 확인해 누락된 대화를 갱신하도록 개선
# 반복 연결 실패 시 재접속 간격을 늘려 서버 요청 집중 완화
# 자체 서버 인증을 연결을 끊지 않고 갱신하도록 개선
# 발신한 연결에는 같은 이벤트를 다시 보내지 않고, 전송 응답으로 화면을 갱신해 중복 수신과 사용량 축소 개선
# 느린 웹앱 · PWA 푸시 발송 때문에 채팅 전송 응답이 지연되지 않도록 처리 순서 변경
# 정상 연결 중에는 대화 내용을 반복 조회하지 않고, 별도로 약 30초 간격으로 미처리 전달 작업을 확인하도록 개선

# 메시지마다 전체 대화를 다시 그리지 않고 변경된 말풍선만 갱신하도록 개선
# 읽음 처리 시 기존 이미지 · 동영상 요소를 유지하도록 개선
# 대화방별 표시 · 보관 메시지를 최대 160개로 제한하고 이전 대화 · 최근 대화 이동 지원.
# 브라우저의 대화방 캐시와 중복 이벤트 기록에 상한 적용.
# 대화방 목록 미리보기를 160자로 제한해 전달량 축소
# 메시지 조회에 필요한 DB 인덱스 보강
# 상담기록 삭제 시 관련 전달 대기 데이터도 정리

# 자체 서버 상태 응답에 protocol : 3 표시.
# nginx 요청 크기 예제를 64KB로 변경. 자체 서버 적용 시 Node 서버 재시작 필요.

# 버전변경 (1.2.0)

1.1.0 업데이트
# 채팅방 설정 저장 후 확인 버튼 클릭시 팝업함수 충돌로 인해 닫히지 않는 문제 수정
# 채팅버튼의 아이콘이 잘못 표기되는 문제 수정 (기본 설정이 초기화 됩니다.)
# 상담 아이콘 크기 설정 추가 (기본 30px)
# 웹호스팅_연결가이드.pdf 추가
# 버전 변경 (1.1.0)

주의사항
압축 파일 내 server 폴더는 자체서버 사용자 전용입니다.
웹호스팅 사용자는 server 폴더는 업로드 하지 않으셔도 됩니다.

자체서버 운영용 server 폴더 구성

.env.example : 환경설정 예시
.gitignore : 실제 .env, 로그, node_modules 유입 방지
pnpm-lock.yaml : 서버 패키지 버전 고정
nginx.conf.example : WebSocket 프록시 설정 예시

설치방법

1. 다운로드하신 ZIP파일의 압축을 해제 하신 후 adm, extend, rb 폴더를 그누보드가 설치된 경로로 업로드 해주세요.
1-1. 웹호스팅 사용자는 server 폴더는 업로드하지 않습니다.
2. 관리자모드 > 빌더설정 > 상담 채팅 설정 메뉴에서 기능을 설치해주세요
3. 동봉된 가이드 문서를 참고하여 웹소켓을 연결해주세요.

웹소켓 연동 가이드는 동봉된
웹호스팅 사용자 : 웹호스팅_연결가이드.pdf
자체서버 운영시 : 자체서버_연결가이드.pdf
를 참고하세요.

상세정보

사이트 방문자를 놓치지 않는 실시간 상담 채팅

사이트를 방문한 회원·비회원과 실시간으로 대화할 수 있는 1:1 상담 채팅 기능입니다.

별도 메신저로 이동할 필요 없이 사이트 안에서 상담 요청부터 대화, 파일 전달, 상담 종료까지 편리하게 관리할 수 있습니다.

상담 전에는 관리자가 등록한 자주 묻는 질문과 답변을 대화형으로 안내하고,

필요한 고객만 실제 상담으로 연결할 수 있어 반복 문의를 줄이는 데 효과적입니다.

주요 기능

- 회원 및 이름 · 연락처를 입력한 비회원 상담 지원

- 대화형 FAQ 인트로와 답변별 외부 링크 설정

- 상담 대기 · 진행 · 완료 상태별 관리

- 관리자 수락 후 상담 또는 즉시 메시지 작성 방식 선택

- 실시간 메시지, 입력 중 표시, 알림음 및 읽지 않은 메시지 배지

- 상담 요일 · 시간, 운영시간 밖 안내 및 부재중 메시지 설정

- 회원 파일 첨부와 AES-256-GCM 암호화 보관

- 웹앱 · PWA 푸시 알림 연동 지원

- 상담 색상, 라이트 · 다크 모드, 버튼 위치 · 크기 · 아이콘 설정

- 메시지 삭제 정책과 상담 기록 자동 보관 · 삭제 설정

- 일반 웹호스팅용 Pusher 연결 및 자체 실시간 서버 방식 지원

FAQ가 먼저 고객의 궁금증을 해결하고 실제 상담이 필요한 경우에만 관리자로 연결되어

상담 업무를 효율적으로 운영할 수 있습니다.

대화 내용과 첨부파일은 사이트에서 직접 관리하며, 실시간 연결이 원활하지 않을 때는 주기적인 확인 방식으로 대화 누락을 줄입니다.

일반 웹호스팅에서는 Pusher를 이용해 간편하게 시작할 수 있고,

독립 서버 환경에서는 제공되는 자체 서버를 이용해 외부 서비스 사용량 제한 없이 운영할 수 있습니다.

설치 환경: PHP 7.4 이상, OpenSSL AES-256-GCM 지원 환경이 필요합니다.

자체 서버 방식은 Node.js 22 이상이 필요합니다.

리빌더미니홈 1:1 대화하기
20일 전

266

10

이전글결제위젯 관리2026.09.28

다음글스크래퍼2026.09.12

댓글목록

bank365

미니홈 1:1 대화하기

　20일 전

Pusher 값은 어디서 구하나요? ㅜㅜ
부가기능 설명이나... 본 게시글서 링크가 있으면 좋을텐데요 ㅜㅜ
Pusher 에서 막히고 있습니다 ㅠㅠ

아 찾았습니다.

근데 영문어 사이트네요 ㄷㄷ;;;;;;;
다들 여기 참조하세요
https://dashboard.pusher.com/accounts/sign_in

2026-09-21 06:32

리빌더

미니홈 1:1 대화하기

　19일 전

스크린샷을 포함하여 가이드문서를 업데이트 했습니다.
감사합니다.

2026-09-21 12:39

미키손

미니홈 1:1 대화하기

　19일 전

리빌더 웹소켓 1:1 채팅 기능, 직접 세팅해서 사용해 보니
기대 이상으로 참 유용하군요! ^^
덕분에 사이트 관리가 훨씬 편해졌습니다.

다만 사용하다 보니 아주 살짝 아쉬운 부분이 있어서 조심스레 의견 남겨봅니다.

개선 필요 사항: 사전 질문 선택형 리스트가 한 줄을 모두 차지하여 전체 높이가 과도하게 길어집니다
기대 효과: 리스트를 버튼(태그) 형태로 가로 배열하면 공간 활용도와 가독성이 크게 향상될 것으로 보입니다

사용성을 높일 수 있는 부분이라 생각되어 건의드리오니,
여유가 되실 때 검토해 주시면 감사하겠습니다.

2026-09-21 12:57