본문으로 건너뛰기

튜토리얼

간단한 메시지 발송​

Step 1. Chat SDK 설치​

npm install gitplelive-chat-sdk

Step 2. Chat SDK 초기화​

Module 방식과 script tag 방식을 모두 사용할 수 있습니다.

import { ChatClient, Config } from 'gitplelive-chat-sdk';

let gitpleLiveChatClient;
try {
  const config: Config = {
    host, // gitplelive api host (ex. live.example.com ), Without http:// or https:// or url path
    app_id,
  };

  gitpleLiveChatClient = new ChatClient(config);
} catch (error) {
  // handle error
}

Step 3. 사용자 접속​

Platform API를 사용하여 미리 사용자 생성 후 사용자 세션 토큰을 발급받아 사용해주세요.

주의

접속 요청 후 연결 성공 이벤트가 정상적으로 호출되어야 SDK 기능을 사용할 수 있습니다.

try {
  const userInfo = { user_id, session_token };
  await gitpleLiveChatClient.connectUser(userInfo);
} catch (error) {
  // handle error
}

// 연결 성공 이벤트 확인
gitpleLiveChatClient.connection.on('connected', () => {
  // handle event
});

Step 4. 그룹 채널 생성​

대화를 시작할 대화 채널을 생성합니다. 생성한 채널에는 자동으로 참가됩니다.

import { GroupChannelCreateParams, GroupChannel } from 'gitplelive-chat-sdk';

try {
  const params: GroupChannelCreateParams = {
    channel_id: 'first_channel',
    name: 'first channel',
  };

  const channel: GroupChannel = await gitpleLiveChatClient.groupChannel.createChannel(params);
} catch (error) {
  // handle error
}

Step 5. 메시지 발송​

첫번째 메시지를 발송합니다.

텍스트 또는 파일 메시지 발송이 가능합니다. 자세한 내용은 그룹 채널 메시지 발송을 참고해주세요.

정보

메시지가 정상적으로 발송되면 메시지 수신 이벤트에서 수신된 메시지를 확인할 수 있습니다.

import { GroupChannelMessageParams, BaseChannel, BaseMessage } from 'gitplelive-chat-sdk';

try {
  const channel_id = 'Group Channel ID';

  const params: GroupChannelMessageParams = {
    type: 'text',
    content: 'first message',
  };

  const message: BaseMessage = await gitpleLiveChatClient.groupChannel.sendMessage(channel_id, params);
} catch (error) {
  // handle error
}

// 메시지 수신 이벤트 확인
gitpleLiveChatClient.groupChannel.on('group:message_send', (channel: BaseChannel, message: BaseMessage) => {
  // handle event
});

샘플 코드​

간단한 html 샘플 코드입니다.

<!doctype html>
<html lang='en'>
  <head>
    <script type="text/javascript" src="{your_module_path}/gitplelive-chat-sdk/dist/chat.min.js"></script>

    <script>
      const app_id = 'APP ID';
      const host = 'GitpeLive API Host';
      const user_id = 'User ID';
      const session_token = 'Session Token';

      const config = { host, app_id };
      const userInfo = { user_id, session_token };

      let gitpleLiveChatClient;

      let connected = false;

      async function start() {
        // SDK 초기화
        try {
          gitpleLiveChatClient = new GitpleLiveChat.ChatClient(config);
        } catch (error) {
          console.error('GitpleLive SDK init error', error);

          // handle error
        }

        // 사용자 접속
        try {
          await gitpleLiveChatClient.connectUser(userInfo);
        } catch (error) {
          console.error('GitpleLive connectUser() error', error);

          // handle error
        }

        // 연결 성공 이벤트
        gitpleLiveChatClient.connection.on('connected', () => {
          console.log('GitpleLive Connect');

          connected = true;

          // handle event
        });

        // 그룹 채널 메시지 수신 이벤트
        gitpleLiveChatClient.groupChannel.on('group:message_send', (channel, message) => {
          console.log('GitpleLive new message');
          console.log(channel);
          console.log(message);

          // handle event
        });
      }

      async function createChannel() {
        if (connected) {
          try {
            const params = {
              channel_id: 'first_channel2',
              name: 'first channel2',
            };

            const channel = await gitpleLiveChatClient.groupChannel.createChannel(params);
            console.log('GitpleLive created channel', channel);
          } catch (error) {
            console.error('GitpleLive createChannel() error', error);

            // handle error
          }
        } else {
          console.error('GitpleLive not connected');
        }
      }

      async function sendMessage() {
        if (connected) {
          try {
            const channel_id = 'first_channel2';

            const params = {
              type: 'text',
              content: 'first message',
            };

            const message = await gitpleLiveChatClient.groupChannel.sendMessage(channel_id, params);
            console.log('GitpleLive created message', message);
          } catch (error) {
            console.error('GitpleLive sendMessage() error', error);

            // handle error
          }
        } else {
            console.error('GitpleLive not connected');
        }
      }

      window.onload = () => {
        start();
      }
    </script>
  </head>
  <body>
    <h1>Gitple Live SDK - Sample Code</h1>
    <button onclick='createChannel()'>create channel</button>
    <button onclick='sendMessage()'>send message</button>
  </body>
</html>

샘플 앱​

https://github.com/finset-io/gitplelive-chat-sample