チャットアプリの作成④ 確認応答とデータバリデーション
LINEのオープンチャットとか、ジモティなどのアプリでの他人とのチャットで、個人情報だとか不適切情報を入れるとはじかれるというのがあります。
今回は、前回のチャットアプリを少し改良して、きちんと通信されたかの確認応答(acknowledgement)とそのような応用について説明します。
実験結果
bad-words
以下のコマンドでインストールできる bad-words は、悪い言葉をフィルターするためのものです。ブラックリストに単語を追加することができます。
npm i bad-words@3.0.3
前回のチャットアプリの流れ
前回のコードは次のようになっていました。
確認応答ありの流れ
これを今回は少し改良して、通信が無事にできたか相手からの応答を受けるようにします。LINEアプリの既読確認みたいなものですね。
この図は PlantUML で記述しています。
コード
chat.js で soket.io を呼ぶ時に、確認応答された後のコールバック関数を3番目の引数として記述します。前回のコードに対して太字が追加部分になります。
const messageInput = document.getElementById('message-input')
const statusMessage = document.getElementById('status-message')
document.getElementById('message-form').addEventListener('submit', (e) => {
e.preventDefault()
statusMessage.textContent = "送信中..."
socket.emit('sendMessage', messageInput.value, (error) => {
if (error) {
statusMessage.textContent = error
return
}
statusMessage.textContent = '正常に送信されました。'
})
})
そして、index.js のsocket.on()の関数に第3引数を追加して、コールバック関数を呼び出す処理を次のように追加（太字部分）します。
socket.on('sendMessage', (message, callback) => {
if (filter.isProfane(message)) {
return callback('注意！不適切な言葉を使えません。')
}
io.emit('updateMessage', message) // 全てのブラウザに送られる
callback()
})
上記コードでは、問題があるときにcallback(値)としていて、問題がないときはcallback()としていますが、値があってもなくてもコールバックを呼び出すことが可能であり、どのようにな値を渡すかは chat.js のほうでどのように対応するかによります。
コールバックは[送信]ボタンをクリックしたブラウザで実行される chat.js のみに渡されます。
感想
上の実験結果を見ればわかるように、日本語の酷い言葉は検出されません。また、次のように１行追加して実行すると、「slug」ははじかれるようになりますが、「カス」ははじかれません。bad-words に頼らず独自処理や独自モジュールを作ればよいのでしょうけれど。
filter.addWords('カス', 'slug') // ブラックリスト登録
if (filter.isProfane(message)) { ...