Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Add Communication Service for users in room #66

Merged
merged 14 commits into from
Nov 12, 2023

Conversation

Josephaedan
Copy link
Contributor

@Josephaedan Josephaedan commented Nov 10, 2023

Changes to existing process flow:

  • "Create Room": Frontend creates a room in Collaboration service (as before), but now uses the generated roomId to generate a new room in Communication Service
  • "Join Room": Matching Service creates a room in Collaboration service (as before), but now uses the generated roomId to generate a new room in Communication Service too

Changes to API Gateway

  • Add communication service to secrets
  • Add proxy for /communication to Communcation Service

Changes to docker-compose.yaml

  • Add communication service as new docker service at port 8006

Changes to Matching Service

  • Creates room in communication service after creating room from Collaboration service (still need to clean up string literals sorry @joelwongjy)

Communication Service

  • Socket generates rooms with roomId equal to the room generated from Collaboration service. This is called from the Frontend in 'Create Room' or from Matching Service in 'Join a Room'
  • Upon entering a room, users will establish a connection with the server socket and fetch all previous messages
  • When user sends a message, a socket event is fired which will make all users in the room receive the new message (including the sender). I chose this way as it allows for synchronisation of the messages without updating optimistically on the sender's UI.

Frontend

Changes to Existing Implementation

  • Add popover theme in Chakra-ui theme
  • Add new pulse animation in Chakra-ui theme
  • Add an AlwaysScrollToBottom helper function for utils

New Implementation Decisions

  • Add new useChatStore Zustand Store for storing and accessing messages in the chatroom. This is used because Zustand allows for components to access different parts of the state and also subscribe to specific states for things like detecting notifications and deleting the store upon changing rooms (and also because we need to justify having Zustand).
  • Add new floating button for Chat function at the bottom right of the CodeEditor (in purple)
image
  • Add new chatbox functionality popover upon clicking the Chat button with the existing chat messages
image
  • Displays a notification for users whenever a new message is sent to the chatroom or when a user joins the room. This is triggered when messages are added while the user does not have chat opened
image image

@Josephaedan Josephaedan force-pushed the feat/communication-service branch from be2d00d to a565215 Compare November 10, 2023 13:27
@Josephaedan Josephaedan marked this pull request as ready for review November 10, 2023 13:33
@Josephaedan Josephaedan force-pushed the feat/communication-service branch from 92e9d31 to 940ac09 Compare November 10, 2023 17:27
Copy link
Contributor

@raynerljm raynerljm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm! just one thing, the FE has a missing dependency for @codemirror/collab. also can u help to update the root README.md with details about setting up the communication-service env vars + the fact that the comm service is on localhost:8006

@Josephaedan Josephaedan merged commit 58f377d into staging Nov 12, 2023
3 checks passed
@Josephaedan Josephaedan deleted the feat/communication-service branch November 12, 2023 05:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants