Skip to main content
Categories
サーバーサイド・フレームワークサーバーサイド言語中級の学習学習

チャットアプリの作成④ 確認応答とデータバリデーション

  • Post Author
    By pitang1965
  • Post Date
    Sat Nov 02 2019
stairs-4574579_640

LINEのオープンチャットとか、ジモティなどのアプリでの他人とのチャットで、個人情報だとか不適切情報を入れるとはじかれるというのがあります。

今回は、前回のチャットアプリを少し改良して、きちんと通信されたかの確認応答(acknowledgement)とそのような応用について説明します。

実験結果

不適切なチャットメッセージを検出して対処する

bad-words

以下のコマンドでインストールできる bad-words は、悪い言葉をフィルターするためのものです。ブラックリストに単語を追加することができます。

npm i bad-words@3.0.3

前回のチャットアプリの流れ

前回のコードは次のようになっていました。

前回のコードの流れ(確認応答なし)

確認応答ありの流れ

これを今回は少し改良して、通信が無事にできたか相手からの応答を受けるようにします。LINEアプリの既読確認みたいなものですね。

確認応答あり

この図は PlantUMLで記述しています。

コード

chat.jssoket.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.jssocket.on()の関数に第3引数を追加して、コールバック関数を呼び出す処理を次のように追加(太字部分)します。

     socket.on('sendMessage', (message, callback) => {
        if (filter.isProfane(message)) {
            return callback('注意!不適切な言葉を使えません。')
        }
        io.emit('updateMessage', message)  // 全てのブラウザに送られる
        callback()
    }) 

上記コードでは、問題があるときにcallback(値)としていて、問題がないときはcallback()としていますが、値があってもなくてもコールバックを呼び出すことが可能であり、どのようにな値を渡すかは chat.js のほうでどのように対応するかによります。

コールバックは[送信]ボタンをクリックしたブラウザで実行される chat.js のみに渡されます。

感想

上の実験結果を見ればわかるように、日本語の酷い言葉は検出されません。また、次のように1行追加して実行すると、「slug」ははじかれるようになりますが、「カス」ははじかれません。bad-words に頼らず独自処理や独自モジュールを作ればよいのでしょうけれど。

 filter.addWords('カス', 'slug') // ブラックリスト登録
 if (filter.isProfane(message)) { ...