フロントエンドへの通知

[h-takeyeah]

Server-Sent eventsで入室および退室イベントが発生した時にフロントエンドに在室者の配列を投げます。

// 例
[
  {
    "user_id": 1234,
    "user_name": "辻野あかり"
    "entered_at": "2021-03-10T14:54:59.000Z"
  },
  // 以下同...
]

クライアントサイドではこんな感じでデータが取得できます．JavaScriptの例です．

const evtSource = new EventSource('http://localhost:3000/v1/sse')

evtSource.addEventListener('error', err => {
  console.error(err)
  // 再読み込みした時にも出るかも
  alert('サーバーとの通信が切断されました(再読み込みした時にも表示されます)')
})

// event名が指定されていないイベントが来たらこれが呼ばれる
evtSource.addEventListener('message', msgEvent => {
  console.log(msgEvent.data)
})

// イベント名は任意
evtSource.addEventListener('usersUpdated', msgEvent => {
  try {
    // dataプロパティが万一なかったらとりあえずからの配列を出す
    console.log(JSON.parse(msgEvent?.data ?? []))
  } catch (err) {
    console.error(err)
  }
})

// コネクションを確立したら呼ばれる
evtSource.addEventListener('open', event => {
  console.log('conneection established! (Event Source Interface)')
})

まだ実現できていないのは

• user_nameプロパティ(メンバーを登録する・読み出すAPIが生えてないのでまだ無理．作るまで全員りんごアイドルになってもらう)

• 在室人数を示すプロパティが無い(付けろと言われればすぐ付けられる) です．他にも思い出したら付け足します．レビューお願いします．

  close #17

[equal-l2]

PR名を、PRの内容がわかるように変更してください。

[ghost]

@h-takeyeah これは青シャツさんの言う通りで、これ何？ってなりました。最低限もしissueと紐づいてるなら fix/17 にするとかが良いかと思います。PR名も命名規則を付けたほうが良いかもしれませんね...

逆に、descriptionのやる気と真反対なのはすげえなぁって思ってしまいましたが...

[h-takeyeah]

@equal-l2 @Stroheim001 言い忘れてましたがバックエンドから投げられてくるのはJSON.stringify()した文字列です．

[ghost]

了解です

[h-takeyeah]

@equal-l2 @Stroheim001 SSEのエンドポイントは/v1/users_updated_eventになります． この会話の最初の方に出した実装例から名前が変更になっています． 複数形，過去形で分かりにくいと思うのでメモしておきます．