# (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: スクショ等を貼る
# 次のステップ
ここで作成したチャットにさらに ビデオチャットを設置 しましょう。