# (1) テキストチャットの設置

# Komi とは？

# 0. Komi に登録して API キーを取得する

# 1. Komi SDK をインストールする

HTML に以下のコードを記述します。

<script src="https://some.cdn.domain/js/komi.js"></script>

ヒント

NPM または Yarn でインストールすることもできます。

# 2. Komi インスタンスを初期化する

Komi のインスタンスを初期化します。以下のコードを記述します。

const komi = new Komi('pk_test_********')

pk_test_******** は、ダッシュボードから取得した [パブリックキー] で置き換えます。

# 3. メンバーとしてログインする

チャットに参加するには、「メンバー」としてログインする必要があります。

ここでは、匿名のメンバーとしてログインします。以下のコードを記述します。

// メンバー情報を保持するグローバル変数
let currentUser = null

// ログイン処理
const login = async () => {
  const isLoggedIn = await komi.isLoggedIn()
  if (isLoggedIn) {
    currentUser = await komi.getCurrentUser()
  } else {
    currentUser = await komi.loginAsAnonymous()
  }
}

# 4. ルームに参加する

「ルーム」は、特定のメンバーとの間でチャットを行うことができる仮想的な部屋です。

それぞれのルームごとに、

ルーム名（プロジェクト内で一意）
参加できるメンバーのリスト
メッセージの履歴

を持ちます。ルームが異なれば、上記もそれぞれ異なります。

ルームに参加するには、以下のコードを記述します。

const room = komi.joinRoom('room-name', currentUser)

room-name がルーム名です。もしそのルーム名のルームがまだ存在しない場合、新規に作成されます。

# 5. テキストチャットの UI をレンダリングする

プレビルド UI を利用することもできますが、チュートリアルでは自前で UI を構築する方法を見ていきます。

// UIの状態を保持するグローバルオブジェクト
const data = {
  messages: [],
}

const render = (props) => {
  const { messages } = props

  renderTextChat({ messages })
}

const renderTextChat = (props) => {
  const { messages } = props

  const html = `
    <ol>
      ${messages.map((msg) => `
        <li>${msg.text} - ${msg.user.name}</li>
      `)}
    </ol>
    <form onsubmit="handlePost(event)">
      <input type="text" name="text" placeholder="メッセージを入力...">
      <button type="submit">送信</button>
    </form>
  `

  document.getElementById('text-chat').innerHTML = html
}

WARNING

このコードはわかりやすさを優先した簡易的な実装であるため、本番リリースには使用しないでください。特に以下の点に留意してください。

メッセージ本文やユーザー名をエスケープ無しでレンダリングしており、XSS を引き起こすリスクがあります。textContent を使うか、React, Vue などの XSS 対策が施されたビューライブラリを使用してください。
毎回すべてのメッセージをレンダリングし直すため、パフォーマンスに劣ります。React, Vue などのモダンなビューライブラリを使用をおすすめします。

# 6. メッセージの送受信を実装する

room.messaging でメッセージを送受信する API にアクセスできます。以下のコードを記述します。

// メッセージの送信
const handlePost = async (event) => {
  event.preventDefault()

  const text = new FormData(event.target).get('text')

  if (text) {
    const message = await room.messaging.post({ text })
    data.massages.push(message)
    render(data)
  }
}

// メッセージの受信
room.messaging.onReceive((message) => {
  data.messages.push(message)
  render(data)
})

テキストチャットの実装はこれで完了です！　ここまでのコード全文は GitHub にあります。

# 7. 動作確認をする

作成したページを2つのタブ（もしくは2つのブラウザ）で開きます。

// TODO: スクショ等を貼る

# 次のステップ

ここで作成したチャットにさらにビデオチャットを設置しましょう。

← Getting Started kommu! (2) ビデオチャットの追加 →