😽

sendbirdを試してみた

2022/01/24に公開

はじめに

チャット機能はメッセージのやり取りをすることだけを考えると一見シンプルな機能に感じますが、リアルタイム性やパフォーマンス、1対1のメッセージなのか多対多メッセージなのか、テキスト以外の送受信もできるのかなど、要件や仕様によって設計や実装が複雑になりやすい機能です。

実装するのが大変なので、いい感じにチャット機能を提供するSaaSがないか調べてみるとsendbirdというサービスがあったので試してみました。

https://sendbird.com/

環境

試した環境のバージョン

// pacakge.json
"next": "12.0.8",
"sendbird": "^3.1.7",
"sendbird-uikit": "^2.5.3",

試したリポジトリ

sendbirdとは

アプリ内にチャット機能や音声、ビデオ通話などを組み込めるサービスです。

まずはアカウントを作成する

sendbird のchat apiを使うにはまずアカウントを作成する必要があります。

アカウント作成したらダッシュボードに入れる

こんな感じのダッシュボードに入れます。

ユーザーを追加する

チャットするユーザーを追加します。

ここまでで、アカウント作成してダッシュボードへ入れるようになったので、このあとからUIKitやSDKを使ってクイックスタートを試してみます。

UIKit for Chatのクイックスタートをやってみる

UIKit for Chatを利用すると、アプリ内の標準的なチャット機能を、カスタマイズ可能なUIコンポーネントと簡単かつ迅速に統合することが可能です。

UIKit をインストールする

$ yarn add sendbird-uikit

アプリからUIKitを呼び出してみる

クイックスタートのStep2以降そのままやってみる

エラー出た

Step2以降そのまま進めてたらエラー出た。

調べてみたところ、SSRの場合はダイナミックインポートしないといけなそうだった。

https://codesandbox.io/s/cocky-hawking-h3zbs これはnextJSのサンプルです。つまり、UIKitを使うには、多くの動的なデータが含まれているので、UIKitを動的にインポートする必要があります。

https://community.sendbird.com/t/element-is-not-defined/1437
https://codesandbox.io/s/cocky-hawking-h3zbs?file=/pages/index.js:0-201

ドキュメントにもちゃんと書かれてたけど見逃してた。

UIKitのコンポーネント

Appコンポーネントを呼び出したら、基本的なチャット機能使える感じでした。App以外にもChannelListやChannelなど、チャットに必要なコンポーネントはひととおりり揃ってそうで良さそうでした。

Appコンポーネントは、チャットの実装に必要なすべてのUIKitコンポーネントを集めたもので、アプリIDとユーザIDの設定のみが必要です。

// Create a chat application.
import { App } from "sendbird-uikit";
import "sendbird-uikit/dist/index.css";

const MyApp = () => {
    <Route id={'/chat'}>
        <App
            appId={appId}
            userId={userId}
            nickname={nickname}
            profileUrl={profileUrl}
            accessToken={accessToken}
            theme={theme}
            userListQuery={userListQuery}
        />
    </div>
}

提供されてるサンプルアプリを動かしてみたら、storybookにコンポーネント定義されてて、使えそうなコンポーネント探すときの参考になりそうだった。

提供されてるサンプルアプリ

変更した点

.env追加

sendbirdのダッシュボードからapp idと user idを取得して環境変数に追加する

NEXT_PUBLIC_YOUR_APP_ID=
NEXT_PUBLIC_USER_ID=

src/components/Chat/Chat.tsx追加

import { App as SendBirdApp } from 'sendbird-uikit';
import styled from 'styled-components';

const Container = styled.div`
  font-family: sans-serif;
  text-align: center;
  height: 100vh;
  width: 100vw;
`;

const Chat = () => {
  if (
    process.env.NEXT_PUBLIC_YOUR_APP_ID === undefined ||
    process.env.NEXT_PUBLIC_USER_ID === undefined
  ) {
    return <div>Can not read env info</div>;
  }
  return (
    <Container>
      <SendBirdApp
        appId={process.env.NEXT_PUBLIC_YOUR_APP_ID}
        userId={process.env.NEXT_PUBLIC_USER_ID}
      />
    </Container>
  );
};

export default Chat;

src/pages/index.tsx 修正

SSRの場合、ダイナミックインポーで読み込むようにしてる

import type { NextPage } from 'next';
import 'sendbird-uikit/dist/index.css';
import dynamic from 'next/dynamic';

const DynamicAppWithNoSSR = dynamic(() => import("../components/Chat/Chat"), {
  ssr: false,
  loading: () => <p>...</p>
});

const Home: NextPage = () => (<DynamicAppWithNoSSR />);

export default Home;

動いた

Channel作成して、メッセージ送ってみたりした。

ダッシュボードをみると動かした時に作ったグループチャンネルが生み出されてた。

ダッシュボードからルームの中身も見れそうっぽかった

以上でUIKitのクイックスタートはおわり。

次はJavaScript SDKのクイックスタートを試してみる

クイックスタート

パッケージ導入

$ yarn add sendbird

Step2からStep7をひととおりやると、SDKの初期化、チャンネル作成など、SDKの使い方が試せます。

SDKのクイックスタート試してみるは終わり。

疑問に思ったことメモ

認証まわりってどうなってるの？

ユーザーIDとAPP IDだけでいろいろAPI叩けたので、どんな感じなのか気になった。ドキュメント読んでみると、デフォルトではユーザーIDだけでもsendbirdサーバーにアクセスできるけど、アクセストークン使ってsendbirdサーバーに接続できる設定もありそうでした。

チャット機能をシステムに組み込むときってどんな感じでやるんだろう？

チャット機能だけ外部サービス（sendbird）に切り出して、チャット機能以外を、たとえばLaravelとかで実装する場合、Laravel側のユーザーとsendbird側のユーザーを同期する必要があると思ったのですが、sendbird側にユーザー作成するAPIがあるのかなど気になりました。
（Laravel側で新規ユーザー作成したときに、sendbird側にもユーザーを作成するAPI叩いて作ってあげるみたいなことしなといけないそうなイメージ）

ドキュメントを見た感じ、ユーザー作成のAPIありそうでした。

ポストマン

レスポンスの例

{
    "user_id": "Jacob",
    "nickname": "Asty",
    "profile_url": "https://sendbird.com/main/img/profiles/profile_05_512px.png",
    "access_token": "07a0ccf6d3e801223e65b06b6066352e0512b43c",
    "is_online": false,
    "last_seen_at": 0,
    "discovery_keys": ["123-456-7890", "654-321-0987"],
    "preferred_languages": [],
    "has_ever_logged_in": false,
    "metadata": {
        "location": "Seoul",
        "marriage": "N",
        "hasSomeone": "Y"
    }
}

もし実際にsendbirdを使うとしたら？

普段バックエンドはLaravel使って開発することが多いのですが、チャット機能だけ外部サービスに切り出しましましょうって感じで進めるとすると、どういう設計、実装になるのか気になった。

処理イメージ

Laravel側でユーザー作成した際に、Laravelからsendbird側へユーザー作成のAPIを叩く
そのレスポンスをLaravel側のユーザー管理するDBにも保存しておく（sendbirdのidやtokenなど）
チャット機能を使うときは、まずフロントからLaraveへユーザー情報を取得するAPIを叩く
そのレスポンスにsendbirdへのトークンも含めるようにして、それを元に改めてフロントからsendbirdへ接続するAPIを叩く
それ以降はsendbirdのUIkit使ったり、SDK使ったりでチャットの操作できるってイメージ

感想

トライアルのアカウント作成して、SDKやUIKitを試せるまでの流れがスムーズで良かった
UIKitのクックスタート通りに手を動かしたら、すぐに手元の環境でチャット機能を動かせたのが良かった
ドキュメントもわかりやすい印象だった。わかりやすい印象だったが、Stripeとかぐらいわかりやすかったら嬉しい気がした。
クイックスタートで作成できる分のメッセージ機能に関しては、ほんとにすぐできるので便利だと感じる一方で、実際に実践投入する際には個別の要件があり、それを満たすための実装をするのは大変かもしれないという印象だった。（sendbirdだけではなく、外部サービス利用するとき全般で言えることだと思いますが、採用する場合はどういうサービスなのか結構ちゃんと調べる必要があるので、その辺りの調査で時間かかったりするとコスト削減にならないかもしれないと思ったりしました）
UIKitのコンポーネントのカスタマイズ性も、そんなに高くない印象だったので、デザインや仕様が固まってる場合は、逆に使うの大変かもしれないという印象でした。

よく読みそうなリンク

JavaScript SDK

JavaScript SDKのリファレンス

JavaScript SDK使ったサンプルアプリ

API

API ポストマン

UIKit

UIKitのリポジトリ

UIKit使ったサンプルアプリ

料金

https://sendbird.com/pricing

GitHubで編集を提案