Phoenix + Reactでチャットアプリを作ろう(Part 4)
React Hooksを使ったMessage作成機能の追加
2 min readMar 10, 2020
アプリ概要はPhoenix + Reactでチャットアプリを作ろう(Intro)参照。
ここまでのコードはP3_GROUP_CHANNEL参照。
Part 3で紹介したGroup Channel APIが構築されていることを前提とする。
本章ではReact Hooksを使ってGroup詳細画面にMessage作成機能を追加する。
作業項目は以下の通り。
- クライアント側GroupChannel作成
- GroupDetailPageにGroupChannelを追加
クライアント側GroupChannel作成
Websocketの処理にはPhoenixのJSライブラリを使用する。
npm install --save phoenix
Websocketの基本的な処理を定義しよう。
あとは、このChannelをGroupDetailPageで使うだけ。