Javascript SDK (version 0.0.7)

0.0.7 버전 업데이트 내용

• connectUser() 사용 시 사용자 토큰 필요
• 연결 실패 시 재연결 시작, 성공, 실패
• 토큰 유효기간 초과 시 에러
• 에러 코드 추가됨

초기화

Browser

<script src="{your_path}/gitple-live-sdk-v0.0.7.min.js"></script>

React, Vue, ETC

import * as GitpleLive from "gitplelive";

사용 예제

Browser

<script src="{your_path}/gitple-live-sdk-v0.0.7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.6/dayjs.min.js"></script>

<script>
    const app_id = 'app_id';
    const app_key = 'app_key';
    const url = 'https://{API_HOST}';
    const user_id = 'user_id';
    const userInfo = {user_id};

    const headers = {
        APP_ID: app_id,
        APP_API_KEY: app_key,
    };

    let gitplelive = null;

    let session_token = "";

    // client ip & token 발급
    function startGitpleLive() {
        let apiURL = `${url}/v1/users/${user_id}/token`;
        const data = {
            expires_at: dayjs().add(7, "day").unix() * 1000
        };
        const config = {headers};

        axios.post(apiURL, data, config)
                .then((res) => {
                    session_token = res.data.token;
                    gitpleLiveInit();
                })
                .catch((error) => {
                    console.log(error);
                    console.log(error && error.response && error.response.data);
                });
    }

    function disconnectLive() {
        gitplelive.disconnectUser();
    }

    function gitpleLiveInit() {
        const config = {app_id, url, session_token};

        try {
            gitplelive = new GitpleLive.Client(config);
        } catch (err) {
            console.log(err);
        }

        try {
            gitplelive.connectUser(userInfo);
        } catch (err) {
            console.log(err);
        }

        /**
         * 이벤트 핸들러 등록
         */

        // 연결됨
        gitplelive.on("connected", () => {
            console.log("GitpleLive Connect");
        });

        // 연결 종료됨
        gitplelive.on("disconnected", () => {
            console.log("GitpleLive Disconnect");
        });

        // 재연결 시작
        gitplelive.on("reconnectTry", () => {
            console.log("GitpleLive reconnectTry");
        });

        // 재연결 성공
        gitplelive.on("reconnectSucceed", () => {
            console.log("GitpleLive reconnectSucceed");
        });

        // 재연결 실패
        gitplelive.on("reconnectFailed", () => {
            console.log("GitpleLive reconnectFailed");
            gitplelive.disconnectUser();
        });

        gitplelive.on("error", (error) => {
            console.log("GitpleLive Error:");
            console.log(error)
        });

        // 채널 이벤트
        gitplelive.on("group:channel_create", (channel) => {
            console.log("=== group:channel_create ===");
            console.log("Channel Data :", channel);
        });

        gitplelive.on("group:channel_update", (channel) => {
            console.log("=== group:channel_update ===");
            console.log("Channel Data :", channel);
        });

        gitplelive.on("group:channel_delete", (channel) => {
            console.log("=== group:channel_delete ===");
            console.log("Channel Data :", channel);
        });

        gitplelive.on("group:channel_join", (channel, user) => {
            console.log("=== group:channel_join ===");
            console.log("channel:", channel);
            console.log("user:", user);
        });

        gitplelive.on("group:channel_leave", (channel, user) => {
            console.log("=== group:channel_leave ===");
            console.log("channel:", channel);
            console.log("user:", user);
        });

        gitplelive.on("group:channel_manager_create", (channel, user) => {
            console.log("=== group:channel_manager_create ===");
            console.log("channel:", channel);
            console.log("user:", user);
        });

        gitplelive.on("group:channel_manager_delete", (channel, user) => {
            console.log("=== group:channel_manager_delete ===");
            console.log("channel:", channel);
            console.log("user:", user);
        });

        gitplelive.on("group:channel_freeze", (channel) => {
            console.log("=== group:channel_freeze ===");
            console.log("channel:", channel);
        });

        gitplelive.on("group:channel_unfreeze", (channel) => {
            console.log("=== group:channel_unfreeze ===");
            console.log("channel:", channel);
        });

        // 메시지 이벤트
        gitplelive.on("group:message_send", (channel, message) => {
            console.log("=== group:message_send ===");
            console.log("channel:", channel);
            console.log("message:", message);
        });

        gitplelive.on("group:message_delete", (channel, message) => {
            console.log("=== group:message_delete ===");
            console.log("channel:", channel);
            console.log("message:", message);
        });

        // 사용자 이벤트 핸들러
        gitplelive.on("user_update", (user) => {
            console.log("=== user_update ===");
            console.log("user:", user);
        });

        gitplelive.on("user_delete", (user) => {
            console.log("=== user_delete ===");
            console.log("user:", user);
        });

        // 채널 메시지 읽음 이벤트
        gitplelive.on("group:channel_message_read_event", (channel) => {
            console.log("=== group:channel_message_read_event ===");
            console.log("channel:", channel);
        });

        // 채널 메시지 배달 이벤트
        gitplelive.on("group:channel_message_delivered_event", (channel) => {
            console.log("=== group:channel_message_delivered_Event ===");
            console.log("channel:", channel);
        });

    }

    window.onload = function () {
        startGitpleLive();
    }

</script>

React, Vue, ETC

import * as GitpleLive from "gitplelive";
import axios from 'axios';
import dayjs from 'dayjs';

const app_id = "test";
const app_key = "test-key";
const url = 'https://{API_HOST}';
const user_id = "user_id";

const config: GitpleLive.Config = { app_id, url, session_token };
const userInfo: GitpleLive.UserInfo = { user_id };
const gitplelive: GitpleLive.Client = new GitpleLive.Client(config);

const headers = {
    APP_ID: app_id,
    APP_API_KEY: app_key,
};

let session_token: string;

// Session Token 발급
function startGitpleLive() {
    let apiURL = `${url}/v1/users/${user_id}/token`;

    // for development
    if (devMode) apiURL = `${url}:8080/v1/users/${user_id}/token`;

    // 1. get session token
    axios.post(apiURL, {
        expires_at: dayjs().add(7, "day").unix() * 1000
    }, { headers })
        .then((res) => {
            session_token = res.data.token;
            gitpleLiveInit();
        })
        .catch((error) => {
            console.log(error);
            console.log(error && error.response && error.response.data);
        });
}


startGitpleLive();

function gitpleLiveInit() {
    let config: GitpleLive.Config = { app_id, url, session_token };
    let gitplelive: GitpleLive.Client = new GitpleLive.Client(config);

    try {
        gitplelive.connectUser(userInfo);
    } catch (err) {
        console.log(err);
    }

    /**
     * 이벤트 핸들러 등록
     */
    if (gitplelive) {
        // 연결됨
        gitplelive.on("connected", () => {
            console.log("GitpleLive onConnected");
            // gitplelive?.disconnectUser();
        });

        // 연결 종료됨
        gitplelive.on("disconnected", () => {
            console.log("GitpleLive disconnected");
        });

        // 재연결 시작
        gitplelive.on("reconnectSucceed", () => {
            console.log("GitpleLive reconnectSucceed");
        });

        // 재연결 성공
        gitplelive.on("reconnectTry", () => {
            console.log("GitpleLive reconnectTry");
        });

        // 재연결 실패
        gitplelive.on("reconnectFailed", () => {
            console.log("GitpleLive reconnectFailed");
            gitplelive.disconnectUser();
        });

        // 에러
        gitplelive.on("error", (error: GitpleLive.GitpleLiveError) => {
            console.log(error);
        });

        // 채널 이벤트
        gitplelive.on("group:channel_create", (channel: GitpleLive.Channel) => {
            console.log("=== group:channel_create ===");
            console.log("Channel Data :", channel);
        });

        gitplelive.on("group:channel_update", (channel: GitpleLive.Channel) => {
            console.log("=== group:channel_update ===");
            console.log("Channel Data :", channel);
        });

        gitplelive.on("group:channel_delete", (channel: GitpleLive.Channel) => {
            console.log("=== group:channel_delete ===");
            console.log("Channel Data :", channel);
        });

        gitplelive.on("group:channel_join", (channel: GitpleLive.Channel, user: GitpleLive.User) => {
            console.log("=== group:channel_join ===");
            console.log("channel:", channel);
            console.log("user:", user);
        });

        gitplelive.on("group:channel_leave", (channel: GitpleLive.Channel, user: GitpleLive.User) => {
            console.log("=== group:channel_leave ===");
            console.log("channel:", channel);
            console.log("user:", user);
        });

        gitplelive.on("group:channel_manager_create", (channel: GitpleLive.Channel, user: GitpleLive.User) => {
            console.log("=== group:channel_manager_create ===");
            console.log("channel:", channel);
            console.log("user:", user);
        });

        gitplelive.on("group:channel_manager_delete", (channel: GitpleLive.Channel, user: GitpleLive.User) => {
            console.log("=== group:channel_manager_delete ===");
            console.log("channel:", channel);
            console.log("user:", user);
        });

        gitplelive.on("group:channel_freeze", (channel: GitpleLive.Channel) => {
            console.log("=== group:channel_freeze ===");
            console.log("channel:", channel);
        });

        gitplelive.on("group:channel_unfreeze", (channel: GitpleLive.Channel) => {
            console.log("=== group:channel_unfreeze ===");
            console.log("channel:", channel);
        });

        // 메시지 이벤트
        gitplelive.on("group:message_send", (channel: GitpleLive.Channel, message: GitpleLive.Message) => {
            console.log("=== group:message_send ===");
            console.log("channel:", channel);
            console.log("message:", message);
        });

        gitplelive.on("group:message_delete", (channel: GitpleLive.Channel, message: GitpleLive.Message) => {
            console.log("=== group:message_delete ===");
            console.log("channel:", channel);
            console.log("message:", message);
        });

        // 사용자 이벤트 핸들러
        gitplelive.on("user_update", (user: GitpleLive.User) => {
            console.log("=== user_update ===");
            console.log("user:", user);
        });

        gitplelive.on("user_delete", (user: GitpleLive.User) => {
            console.log("=== user_delete ===");
            console.log("user:", user);
        });

        // 채널 메시지 읽음 이벤트
        gitplelive.on("group:channel_message_read_event", (channel: GitpleLive.Channel) => {
            console.log("=== group:channel_message_read_event ===");
            console.log("channel:", channel);
        });

        // 채널 메시지 배달 이벤트
        gitplelive.on("group:channel_message_delivered_event", (channel: GitpleLive.Channel) => {
            console.log("=== group:channel_message_delivered_Event ===");
            console.log("channel:", channel);
        });
    }

}