FlipFlop Lite Gossip Typescript SDK

FlipFlop Lite Gossip Typescript SDK는 FlipFlop Lite Gossip Server와 연동하여 쉽고 다양한 채팅기능을 사용할 수 있습니다. 카카오톡과 같은 그룹 채팅방에서부터 유튜브 인터넷 방송의 오픈채팅의 기능까지 다양하게 구현할 수 있도록 높은 사용성을 제공합니다.

Enviorment requirement

• Nodejs: 16.0+
• Browser: Latest Chrome and Firefox

Installation

Library는 브라우저에서만 작동합니다. 케이스에 맞게 사용해주시기 바랍니다.

CDN은 지원하고 있지 않습니다. NPM과 YARN과 같은 패키지 매니저를 이용하여 라이브러리를 다운받으세요

npm i ffl-gossip
# or
yarn add ffl-gossip

Quick Start

Gossip Client 설정

1. FlipFlop Lite User Console 회원가입 및 로그인

FlipFlop Lite User Console에 들어가서 회원가입 후 로그인해주시기 바랍니다.

2. 새로운 Application 생성

로그인 후 바로 보이는 화면에서 새로운 어플리케이션을 생성할 수 있습니다. 어플리케이션을 생성하면 ApiKey, ApiSecret키를 발급됩니다. 반드시 로컬환경에 ApiKey, ApiSecret를 저장해주세요. 앱키쌍은 복구할 수 없습니다. 키쌍을 분실시 재발급을 요청해야합니다.

3. 멤버 로그인

FlipFlop Lite 생태계에서는 FlipFlop Lite User Console을 로그인하여 앱, 조직을 생성 및 관리하는 사용자는 User라고 칭하고 User가 만든 서비스앱의 회원들을 Member라고 칭합니다.

FlipFlop Lite의 비디오 생태계를 이용하기 위해서는 비디오의 주체가 되는 멤버가 필요합니다. FlipFlop Lite의 가이드에 따라 멤버는 ApiKey, ApiSecret을 이용하여 유저가 만든 앱에 로그인을 할 수 있습니다.

FlipFlop Lite의 비디오 생태계 Api는 멤버의 appUserId를 사용해 이용할 수 있습니다.

4. 새로운 방송생성

생성된 App을 클릭하여 AppDashboard 페이지에 들어가서 방송을 생성합니다. 방송이 생성되면 해당 방송의 ChannelKey를 알 수 있습니다.

5. Gossip Server Token 발급

위의 단계를 Step by Step으로 얻은 ApiKey, ApiSecret, appUserId, ChannelKey를 이용하여 ffl-gossip sdk를 사용할 수 있습니다.

ApiKey, ApiSecret, appUserId를 이용해 토큰을 발급해주세요.

발급된 ChatToken과 같이 Channel Key를 이용하면 FlipFlop 채팅방에 입장할 수 있습니다.

import fflGossip from 'ffl-gossip';

// Get chat token and member info
const getChatToken = async () => {
  const result = await getChatToken({
    apiKey: '...',
    apiSecret: '...',
    appUserId: '...',
  });

  return result;
};

// Connect Gossip SDK
const connectGossipSdk = async () => {
  const result = await getChatToken();

  const client = fflGossip({
    token: result.data.chatToken,
    member: {
      appUserId: result.data.userId,
      username: result.data.userName,
      avatar: result.data.avatarProfileUrl,
    },
    isStreamer: true,
  });

  client.connect({
    channelKey: '...',
    receiveCallback: (message: MessageInfo) => {
      // Side Effect on Receiving Message
      if (message.messageType !== 'JOIN') {
        // Add Join Messaege Logic
        // ...
      } else {
        // Add Normal Message Logic
        // ...
      }
    },
    onConnect: () => {
      console.log('Connect Gossip');
    },
  });
};

오픈채팅

자세한 코드를 보고 싶다면 sample-code를 확인해주세요