Most of the work needs to be done in the Messages components.
chatter/src/components/Messages/components/Messages.js
- Implement hooks to handle events (sending/receiving messages)
- Display messages (both sent and received)
- Use sockets to:
- Send the user's message to Botty
- Show a typing message when Botty is typing
- Handle incoming Botty messages and display them
- Documentation: https://socket.io/
- Implement audio cues for sending/receiving messages
- Scroll to the bottom of the messages list when sending/receiving a message
- Socket setup/configuration with the Botty server (botty.alexgurr.com)
- All UX and UI, including for messages
- All components, including a message and typing message component
- A context for setting the latest message, which will change the preview in the left user list
- Hooks for playing send/receive sounds
See the Botty server documentation for more information.
bot-typing: Emitted by Botty when they are typing in response to a user message.bot-message: Emitted by Botty with a message payload in response to a user message.user-message: Emitted by you/the client with a messsage payload
We've provided Message components and classes. Here's some information about the classes.
.message--last: The last message in a group.message--typing: The message the user sees when the recipient is typing.message--me: Denotes a user message
- References to functions and current hook state
- How to interact with socket.io, events and payloads
- How React contexts work
