チャットルーム作成機能を実装した #29

ryo-manba · 2022-10-25T08:02:55Z

概要

chatroomを作成できるようにした
とりあえず名前だけ受け付けるようにしている
作成に成功したチャットルームをリストで表示している
chat.serviceをCRUD操作に対応させていますが、現状Createしか行いません。(今後使う予定です)

その他

細かい実装は別issueでやります

テスト方法

# docker起動
docker compose up -d

# migrateする
npx prisma migrate dev

# DBの状態を確認する
npx prisma studio

サーバーを起動して localhost:3000/chatにアクセス

demo

動画でprismaに登録されたidが13, 14なのは事前にテストしてたから

2022-10-25.16.45.47.mov

rakushoo · 2022-10-26T15:37:00Z

確認しました。

別のマージによりconflictがあるようなので、その対応後にも確認しますが、front/backendを起動させたときの報告です。

backend:
yarn & yarn start:dev でサーバーは起動しました。

frontend:
細かいのですが、yarn && yarn build && yarn start では、下記のような socket.io-client のパスが見当たらないようなエラーが出ていました。yarn run dev では起動できてます。

shogo@[0:29:27]:~/work/development/42Tokyo/ft_transcnendence/add-create-chat-room/frontend% yarn && yarn build && yarn start
yarn install v1.22.19
$ typesync || :
/bin/sh: typesync: command not found
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "@emotion/react > @emotion/babel-plugin@11.10.2" has unmet peer dependency "@babel/core@^7.0.0".
warning "@emotion/react > @emotion/babel-plugin > @babel/plugin-syntax-jsx@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
[4/4] 🔨 Building fresh packages...
$ cd .. && husky install .config/.husky
husky - Git hooks installed
✨ Done in 2.29s.
yarn run v1.22.19
$ next build
info - Linting and checking validity of types .warn - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config

Failed to compile.

./pages/chat/index.tsx
2:20 Error: Unable to resolve path to module 'socket.io-client'. import/no-unresolved
12:7 Error: Unsafe assignment of an any value. @typescript-eslint/no-unsafe-assignment
12:16 Error: Unsafe call of an any typed value. @typescript-eslint/no-unsafe-call
23:3 Error: Unsafe member access .emit on an any value. @typescript-eslint/no-unsafe-member-access
23:3 Error: Unsafe call of an any typed value. @typescript-eslint/no-unsafe-call
36:5 Error: Unsafe member access .on on an any value. @typescript-eslint/no-unsafe-member-access
36:5 Error: Unsafe call of an any typed value. @typescript-eslint/no-unsafe-call
42:7 Error: Unsafe member access .off on an any value. @typescript-eslint/no-unsafe-member-access
42:7 Error: Unsafe call of an any typed value. @typescript-eslint/no-unsafe-call

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

yuta-fujimoto

動作に関してはきちんと確認できました！ありがとうございます。

yuta-fujimoto · 2022-10-27T09:24:55Z

backend/src/chat/chat.gateway.ts

+
+  @WebSocketServer() server: Server;
+
+  private logger: Logger = new Logger('ChatGateway');


これbackend全体で統一して使ったほうが見栄えよさそうですね

確かに全体で統一してもいいかもですね。
でもnewするときに名前を指定できるから、モジュールごととかでもいいのかな。

導入するかどうかを調査するissue作っときます

ドキュメントで各サービスごとにインスタンス化することを推奨していたので、今の感じでいきましょう
#43

yuta-fujimoto · 2022-10-27T09:36:12Z

frontend/pages/chat/index.tsx

+    });
+
+    return () => {
+      socket.off('room:created');


これってつけてる理由を調べてみてどっちでも良さそうだな、と思ったんですが何かつけてる理由ありますか？

実はあります。

開発環境だとstrict modeが効いているので、複数回レンダリングされます。
useEffectにsocket.onを書いても、レンダリングされた回数イベントハンドラーが適用されるので、
offがないと、本来1回しか呼ばれてほしくないイベントが複数呼ばれることになってしまいます。

具体的な例をあげると、チャットルームを作成するたび、同じものが2回listに追加されるという挙動になるはずです。

参考

the listeners must be removed in the cleanup step, in order to prevent multiple event registrations

https://socket.io/how-to/use-with-react-hooks

なるほど、理解しました。ありがとうございます！！

rakushoo · 2022-10-27T15:24:33Z

リポジトリを作成し直して、手順通りで、Chatroomの作成が確認できました。
ビルドが通らなかった根本の原因は不明です。。
プルリク自体の内容は問題ないと思いますのでマージします。

ryo-manba added 3 commits October 25, 2022 16:47

add: chatroom table

8deab77

add: websocket package

1deef99

remove: unused imports

8e17b67

ryo-manba self-assigned this Oct 25, 2022

ryo-manba added 3 commits October 26, 2022 23:49

update: port 3000 -> 3001

41b0243

add: chat module

5aee69a

add: chat frontend

f12e48c

ryo-manba changed the title ~~[WIP]チャットルーム作成機能を実装した~~ チャットルーム作成機能を実装した Oct 26, 2022

ryo-manba requested review from rakushoo, yuta-fujimoto and takashi247 October 26, 2022 14:57

ryo-manba changed the title ~~チャットルーム作成機能を実装した~~ [WIP]チャットルーム作成機能を実装した Oct 26, 2022

ryo-manba added 2 commits October 27, 2022 11:20

Merge branch 'main' into add-create-chat-room

6d376fd

update: devDependencies

a6fe610

ryo-manba changed the title ~~[WIP]チャットルーム作成機能を実装した~~ チャットルーム作成機能を実装した Oct 27, 2022

ryo-manba mentioned this pull request Oct 27, 2022

アクセス時にチャットルーム一覧を表示する #38

Merged

yuta-fujimoto approved these changes Oct 27, 2022

View reviewed changes

add: typesync package

6c12d98

rakushoo merged commit f4bcfb5 into main Oct 27, 2022

rakushoo deleted the add-create-chat-room branch October 27, 2022 15:24

takashi247 mentioned this pull request Oct 28, 2022

useEffectの中でsocket.on使ってるところは漏れなくsocket.offをつける #48

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

チャットルーム作成機能を実装した #29

チャットルーム作成機能を実装した #29

ryo-manba commented Oct 25, 2022 •

edited

Loading

rakushoo commented Oct 26, 2022

yuta-fujimoto left a comment

yuta-fujimoto Oct 27, 2022

ryo-manba Oct 27, 2022

ryo-manba Oct 27, 2022

ryo-manba Oct 27, 2022

yuta-fujimoto Oct 27, 2022

ryo-manba Oct 27, 2022

ryo-manba Oct 27, 2022

yuta-fujimoto Oct 27, 2022 •

edited

Loading

rakushoo commented Oct 27, 2022


		@WebSocketServer() server: Server;

		private logger: Logger = new Logger('ChatGateway');

チャットルーム作成機能を実装した #29

チャットルーム作成機能を実装した #29

Conversation

ryo-manba commented Oct 25, 2022 • edited Loading

概要

関連issue

その他

テスト方法

demo

rakushoo commented Oct 26, 2022

yuta-fujimoto left a comment

Choose a reason for hiding this comment

yuta-fujimoto Oct 27, 2022

Choose a reason for hiding this comment

ryo-manba Oct 27, 2022

Choose a reason for hiding this comment

ryo-manba Oct 27, 2022

Choose a reason for hiding this comment

ryo-manba Oct 27, 2022

Choose a reason for hiding this comment

yuta-fujimoto Oct 27, 2022

Choose a reason for hiding this comment

ryo-manba Oct 27, 2022

Choose a reason for hiding this comment

ryo-manba Oct 27, 2022

Choose a reason for hiding this comment

yuta-fujimoto Oct 27, 2022 • edited Loading

Choose a reason for hiding this comment

rakushoo commented Oct 27, 2022

ryo-manba commented Oct 25, 2022 •

edited

Loading

yuta-fujimoto Oct 27, 2022 •

edited

Loading