Quick Start!

설치

$ npm install --save notidog-client

채팅 도우미 연결하기

1. 채팅 도우미 연결 정보 요청

2. 채팅 도우미 연결

import { NotiDog } from 'notidog-client';

// 채팅 도우미 서버 연결 처리
const client = NotiDog.create('{채팅 도우미 url}', '{채팅 도우미 인증 토큰}');

클라이언트 설명

사용자 정보 확인

서비스별 사용자 정보 | user_id | service_id ---|---|--- 부비라이브 | user_key의 문자형 | bubeelive

const user: { user_id: string, service_id: string, } = client.user;

이벤트 처리 - 방송

방송 참여자들의 채팅이나 후원 처리시 사용하는 이벤트

// 방송 이벤트 캐치
client
    // 방송 시작됨
    .on(EVENT.OPENED, () => {
        console.log(`ON.OPENED`);
    })
    // 방송 종료됨
    .on(EVENT.CLOSED, () => {
        console.log(`ON.CLOSED`);
    })
    // 방송자 채팅 처리 (공지, 타이머 등)
    .on(EVENT.OWNER_CHAT, (data: OwnerChatEventData) => {
        // data.msg: 방송자 채팅글
        console.log(`ON.CHAT - msg: ${data.msg}`);
    })
    // 모든 사용자 채팅 캐치
    .on(EVENT.CHAT, (data: ChatEventData) => {
        // data.id: 사용자 ID (부비라이브는 user_key)
        // data.name: 사용자 이름
        // data.msg: 사용자 채팅글
        console.log(`ON.CHAT - id: ${data.id} / name: ${data.name} / msg: ${data.msg}`);
    })
    // 사용자 후원 캐치
    .on(EVENT.COIN, (data: CoinEventData) => {
        // data.id: 사용자 ID (부비라이브는 user_key)
        // data.name: 사용자 이름
        // data.count: 사용자 후원 갯수
        // data.coin_name: 후원 상품명 (부비라이브에서는 사용)
        console.log(`ON.COIN - id: ${data.id} / name: ${data.name} / count: ${data.count} / coin_name: ${data.coin_name}`);
    })
    // 모든 사용자 입장 캐치
    .on(EVENT.USER_ENTERED, (data: UserEnteredExitedData) => {
        // data.id: 사용자 ID (부비라이브는 user_key)
        // data.name: 사용자 이름
        console.log(`ON.USER_ENTERED - id: ${data.id} / name: ${data.name}`);
    })
    // 모든 사용자 퇴장 캐치
    .on(EVENT.USER_EXITED, (data: UserEnteredExitedData) => {
        // data.id: 사용자 ID (부비라이브는 user_key)
        // data.name: 사용자 이름
        console.log(`ON.USER_EXITED - id: ${data.id} / name: ${data.name}`);
    });

이벤트 처리 - 채팅 도우미

채팅 도우미의 설정 값 변경이나 파일 업로드 등의 동작에 대한 처리시 사용하는 이벤트

// 채팅 도우미 이벤트 캐치
client
    // 설정값 변경시
    .config.on(CONFIG_EVENT.CONFIG_UPDATED, (resource, config) => {
        console.log(`ON.CONFIG_UPDATED - resource`, resource, `config`, config);
    })
    // 설정값 삭제시
    .config.on(CONFIG_EVENT.CONFIG_DELETED, (resource, config) => {
        console.log(`ON.CONFIG_DELETED - resource`, resource, `config`, config);
    })
    // 파일 업로드시
    .config.on(CONFIG_EVENT.ATTACHMENT_APPENDED, (resource, attachments: Array<AttachmentData>) => {
        console.log(`ON.ATTACHMENT_APPENDED - resource`, resource, `attachments`, attachments);
    });

채팅 도우미 설정 처리 - 변경

변경시 CONFIG_EVENT.CONFIG_UPDATED 이벤트 호출 됩니다.

// 채팅 도우미 사용자 설정
client.config.set(
    '/msg',
    {
        message:{
            data:{
                title:'난 내가지킬께  필요읍따  ㅇㅇ',
                msg:'[엉덩이팡팡팡]님의 방송이 시작되었습니다.',
                extra:{
                    mode:'LIVE_START',
                    seq_key:673325,
                    site_key:'',
                    user_key:1012216,
                    pb_key:'',
                    diff_date:'',
                    gold:20000,
                    vod_key:673325,
                    title:'난 내가지킬께  필요읍따  ㅇㅇ'
                }
            },
            android:{
                priority:'high'
            },
            apns:{
                payload:{
                    aps:{
                        alert:{
                            body:'[엉덩이팡팡팡]님의 방송이 시작되었습니다.'
                        },
                        badge:0,
                        sound:'default.wav',
                        'mutable-content':1
                    }
                }
            }
        }
    }
)
    .then((config: any) => {
        console.log(`config`, config);
    });

채팅 도우미 설정 처리 - 확인

// 채팅 도우미 사용자 설정값 전체 확인
client.config.get('/')
    .then((config: any) => {
        console.log(`config`, config);
    });


// 채팅 도우미 사용자 설정값 확인
client.config.get('/msg/message/data/extra')
    .then((config: any) => {
        console.log(`config`, config);
        // {
        //     mode:'LIVE_START',
        //     seq_key:673325,
        //     site_key:'',
        //     user_key:1012216,
        //     pb_key:'',
        //     diff_date:'',
        //     gold:20000,
        //     vod_key:673325,
        //     title:'난 내가지킬께  필요읍따  ㅇㅇ'
        // }
    });

채팅 도우미 설정 처리 - 삭제

변경시 CONFIG_EVENT.CONFIG_DELETED 이벤트 호출 됩니다.

// 채팅 도우미 사용자 설정값 삭제
client.config.delete('/msg/message/data/extra')
    .then((result: boolean) => {
        console.log(`success?`, result);
    });

채팅 도우미 파일 업로드

변경시 CONFIG_EVENT.ATTACHMENT_APPENDED 이벤트 호출 됩니다.

HTMLFormElement 또는 Array, 해당 form 의 모든 input, type="file" 들을 업로드 처리

<form enctype="multipart/form-data">
    <input type="file" id="upload1"></input>
    <input type="file" id="upload2"></input>
</form>

// 채팅 도우미 파일 업로드 - HTMLFormElement
client.config.upload('/signature', document.querySelector('form'))
    .then((files: Array<AttachmentResultData>|null) => {
        files?.forEach((file: AttachmentResultData) => {
            console.log(`file`, file);
            // {
            //     original_name: '202508.png',
            //     url: 'https://notidog-static.codewiz.kr/bubeelive/991/signature/1759279530686-583066384.png',
            //     size: 43690
            // }
        });
    });

HTMLInputElement 또는 Array

<input type="file" id="upload1"></input>

// 채팅 도우미 파일 업로드 - HTMLInputElement
client.config.upload('/signature', document.querySelector('#upload1'))
    .then((files: Array<AttachmentResultData>|null) => {
        files?.forEach((file: AttachmentResultData) => {
            console.log(`file`, file);
            // {
            //     original_name: '202508.png',
            //     url: 'https://notidog-static.codewiz.kr/bubeelive/991/signature/1759279530686-583066384.png',
            //     size: 43690
            // }
        });
    });

FileList 또는 Array

<input type="file" id="upload1"></input>

// 채팅 도우미 파일 업로드 - HTMLInputElement
client.config.upload('/signature', document.querySelector('#upload1').files)
    .then((files: Array<AttachmentResultData>|null) => {
        files?.forEach((file: AttachmentResultData) => {
            console.log(`file`, file);
            // {
            //     original_name: '202508.png',
            //     url: 'https://notidog-static.codewiz.kr/bubeelive/991/signature/1759279530686-583066384.png',
            //     size: 43690
            // }
        });
    });

File 또는 Array

<input type="file" id="upload1"></input>

// 채팅 도우미 파일 업로드 - HTMLInputElement
client.config.upload('/signature', document.querySelector('#upload1').files.item(0))
    .then((files: Array<AttachmentResultData>|null) => {
        files?.forEach((file: AttachmentResultData) => {
            console.log(`file`, file);
            // {
            //     original_name: '202508.png',
            //     url: 'https://notidog-static.codewiz.kr/bubeelive/991/signature/1759279530686-583066384.png',
            //     size: 43690
            // }
        });
    });

채팅 도우미 파일 목록

// 채팅 도우미 파일 목록
client.config.files('/signature')
    .then((files: Array<AttachmentData>|null) => {
        files?.forEach((file: AttachmentData) => {
            console.log(`file`, file);
            // {
            //     url: 'https://notidog-static.codewiz.kr/bubeelive/991/signature/1759279530686-583066384.png',
            //     file_name: '1759279530686-583066384.png',
            //     size: 43690
            // }
            // or
            // {
            //     url: 'https://notidog-static.codewiz.kr/bubeelive/991/signature/1759279530686-583066384-original.png',
            //     file_name: '1759279530686-583066384-original.png',
            //     original_name: 'original.png',
            //     created_at: 1759279530686,
            //     size: 43690
            // }
        });
    });

// 서비스별 기본 이미지 파일 목록
client.config.defaultImages()
    .then((files: Array<AttachmentData>|null) => {
        files?.forEach((file: AttachmentData) => {
            console.log(`file`, file);
            // {
            //     url: 'https://notidog-static.codewiz.kr/bubeelive/991/signature/1759279530686-583066384.png',
            //     file_name: '1759279530686-583066384.png',
            //     size: 43690
            // }
        });
    });

// 서비스별 기본 사운드 파일 목록
client.config.defaultSounds()
    .then((files: Array<AttachmentData>|null) => {
        files?.forEach((file: AttachmentData) => {
            console.log(`file`, file);
            // {
            //     url: 'https://notidog-static.codewiz.kr/bubeelive/991/signature/1759279530686-583066384.mp3',
            //     file_name: '1759279530686-583066384.mp3',
            //     size: 43690
            // }
        });
    });

TTS 파일 생성

// TTS 파일 생성, 한글 + 여성
client.tts('아무개님 안녕하세요')
    .then((url: string|null) => {
        console.log(`url`, url);
    });

// TTS 파일 생성, 언어 및 성별 설정
client.tts('아무개님 안녕하세요', 'ko-KR', 'female')
    .then((url: string|null) => {
        console.log(`url`, url);
    });

테스트용

// 방송자 채팅 테스트용
client.fireTest(
    event: EVENT.OWNER_CHAT,
    {
        msg: '방송자 채팅 테스트'
    }: OwnerChatEventData
);

// 참여자 채팅 테스트용
client.fireTest(
    event: EVENT.CHAT,
    {
        id: '1',
        name: '김삿갓',
        msg: '김삿갓 채팅 테스트'
    }: ChatEventData
);

// 참여자 후원 테스트용
client.fireTest(
    event: EVENT.COIN,
    {
        id: '1',
        name: '김삿갓',
        count: 1000,
        coin_name: '1000꿀'
    }: CoinEventData
);

// 참여자 입장 테스트용
client.fireTest(
    event: EVENT.USER_ENTERED,
    {
        id: '1',
        name: '김삿갓',
    }: UserEnteredExitedData
);

// 참여자 퇴장 테스트용
client.fireTest(
    event: EVENT.USER_EXITED,
    {
        id: '1',
        name: '김삿갓',
    }: UserEnteredExitedData
);