Sendbird Platform APIを利用してグループチャンネルにメッセージを送信する

はじめに

自チームが持っているプロダクトのチャット機能をリプレイスするということで、
今まで通りSaaSを利用した開発にしようということになりました

その移管先の一つとして、「Sendbird」 🕊️

色々調べていく中で、チャット機能のこれができないと始まらない機能として
メッセージ送信の実装方法について調査したので記録しやす

弊社について

自分が所属している会社についても紹介させてください 🙇‍♂️
弊社では物流課題解決や荷物を配送するドライバーの価値を向上させるために
「ピックゴー」 というサービスを運用しています

自分が所属しているチームは
配送中のトラブルや問い合わせに対する対応をログとして管理する
「ピックゴー タワー」 というプロダクトを開発するチームに所属しています

Sendbirdに関する記事1本目

さっき、Qiitaで「Sendbird」に関する記事ってあるかなと思い検索してみたら...

検索結果：「Sendbird に一致する記事は見つかりませんでした」

👼：やった〜、Qiita内で「Sendbird」に関する記事1本目やん

てことで、Qiita内でSendbirdに関する記事1本目です(たぶん)

とりあえず、プロトタイプを作ろう

ドキュメントをひたすら調査しても実際にどう動くのかイメージできないので小さいものを作っていく

パッケージ追加

プロダクト自体、Nuxt 3 + TypeScriptで実装されているためTypeScriptに対応したパッケージを選択しました
さっそく、パッケージを追加していきます

$ yarn add sendbird-platform-sdk-typescript

Githubはこちら：

ディレクトリ構成

composablesディレクトリ配下にsendbirdという名前のディレクトリ切ってその下に実装していきます
(ファイル名はもっとマシなのを考えたい...)

┣ composables
   ┣ sendbird
      ┗ useChatMessage.ts

実装していく

親切にGithubの方にAPI仕様書があるではないか~ ✨

と思ったけど、そのまま書いても動きません

時間かけて模索した結果をつらつらと書いていきます...

APP_IDを設定してあげる

まず、どのSendbirdアプリケーションに対してアクセスするかを識別できないといけません

SendbirdのダッシュボードからAPP_IDを持ってきて、
new Sendbird.ServerConfiguration() 内に設定してあげます

    const APP_ID = 'MY_SENDBIRD_APP_ID'
    const serverConfig = new Sendbird.ServerConfiguration(`https://api-${APP_ID}.sendbird.com`, { 'app_id': APP_ID })
    const configuration = Sendbird.createConfiguration({ baseServer: serverConfig })

APP_ID の参照方法
ダッシュボードのサイドメニューから「Settings」→「General」→「Application ID」から参照できました

設定した内容を元にメッセージ機能のモジュール、MessageApi()を呼び出してインスタンスを生成してあげます

:
const configuration = Sendbird.createConfiguration({ baseServer: serverConfig })
const messageApi = new Sendbird.MessageApi(configuration)

パラメータ設定

パラメータ設定として以下のように設定する

• channelTypeは group_channelsに設定
• channelUrlの値は ダッシュボードのグループチャンネルからURL取得できます
• sendMessageData.userIdもユーザーのプロフィール情報から取得できる
• sendMessageData.messageTypeは、今回はテキストメッセージなので MESG
• createdAtは、UNIXタイムスタンプを設定します

const body = {
      channelType: 'group_channels',
      channelUrl: 'sendbird_group_channel_url',
      apiToken: API_TOKEN,
      sendMessageData: {
        userId: 'USER_ID',
        channelType: 'group',
        channelUrl: 'sendbird_group_channel_url',
        messageType: 'MESG',
        message: 'testだよ',
        :
        sortedMetaarray: JSON.stringify([]),
        createdAt: Date.now(),
        :     
      }
    }

sortedMetaarray に関しては何の情報なのか全然わかっていないけど待ち受けている型がstringなので値としては '' (空文字)でいいのではと思われますが「値が不正」だと怒られます

{"error":true,"message":"Invalid value: \"sorted_metaarray\".","code":400111}

「分類やフィルタリングに使用できる追加のメッセージ情報を格納するためのキー値項目で構成される
JSON オ ブジェクトの配列。
取得時に、項目は追加された順序で返されます。このフィールドに格納できる内容の詳細については、こちらをご覧ください。」

👼：とりまオブジェクト配列にすればええのね

ってことで、sortedMetaarray: JSON.stringify([]),としています

メッセージ送信部分

MessageApiで生成したインスタンスからsendMessage()を呼び出す
そこにパラメータを設定していけば実装の方は完成 🎉

  messageApi.sendMessage(body.apiToken, body.channelType, body.channelUrl, body.sendMessageData)
      .then((data: Sendbird.SendBirdMessageResponse) => {
        console.log('API called successfully. Returned data: ' + data)
      }).catch((err) => {
        console.log(err)
      })

動かしてみる

とりあえず、動作確認のためなので何かしらボタンを押下したタイミングでこのメソッドを発火させるようにしました

動かしてみた結果、
Sendbirdのダッシュボード上で期待したメッセージが送信されていました！🎉

もっと簡易的にAPI試したい場合

PostmanからSendbird Platform APIを自分のワークスペースにフォークして試せます

おわりに

Sendbird Platform APIを使用してプロジェクト側からSendbirdに対して「メッセージ送信」機能を試してみました
まだ、パラメータ情報としてどれがどういった情報なのかであったりなど、調査が必要な点はありますがとりあえず送信できて安心しました...

宣伝

宣伝もさせてください~🙇‍♂️
現在弊社では絶賛エンジニア募集中です！
自社開発したい方やエンジニアとして成長したい方など少しでも興味ありましたらカジュアル面談や会社説明会も開催していますの気軽にお問い合わせください！

沖縄に支社があるので沖縄でも募集中です