Skip to content

Commit

Permalink
Updated Changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@AdityaSingh-02
AdityaSingh-02 committed Jun 18, 2023
1 parent 8256097 commit 6d1fbce
Showing 1 changed file with 11 additions and 11 deletions.
22 changes: 11 additions & 11 deletions .tours/2---how-a-message-is-sent.tour
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@
{
"file": "apps/meteor/client/views/room/components/body/RoomBody.tsx",
"description": "## The Chat Room/Channel\n\n- **RoomBody.tsx** is a file that handles the rendering of the Chat Room/Channel on the client side. It brings together multiple components to enable user interaction and communication within the chat environment.\n\n- In this file, there are various methods implemented. Let's specifically examine the process of sending a message through the **MessageComposer** component.\n#### **Additionally, the code in \"RoomBody.tsx\" includes logic for performing various actions related to the chat functionality. These actions might include *sending messages*, *editing* or *deleting* messages, *managing user permissions*, and handling user interactions within the chat environment.**",
"line": 51
"line": 53
},
{
"file": "apps/meteor/client/views/room/components/body/RoomBody.tsx",
"description": "### Chat/Room Layout\n\n- The \"RoomBody.tsx\" file is straightforward to comprehend. You can easily navigate through the components and grasp their functionalities.\n\n- The majority of the code in this file revolves around message rendering and handling various chat-related actions.",
"line": 533,
"line": 539,
"selection": {
"start": {
"line": 464,
Expand All @@ -30,7 +30,7 @@
{
"file": "apps/meteor/client/views/room/components/body/RoomBody.tsx",
"description": "### Composer Container\n\n- At the bottom of the \"RoomBody.tsx\" file, there is a component responsible for rendering the Message Composer. It accepts several props, including the room ID and subscription details. These props help verify whether the user is allowed to send messages in the given context.\n\n- The Message Composer component also manages the size and layout of the composer, allowing users to comfortably compose and send messages. It provides functionality to retrieve the previous and next messages for reference or navigation purposes.\n\n```\n <ComposerContainer />\n```\n\n- **Note** ComposerContainer is also built from combination multiple components, we will explore components and see how data is sent.\n",
"line": 624
"line": 630
},
{
"file": "apps/meteor/client/views/room/components/body/composer/ComposerContainer.tsx",
Expand All @@ -50,12 +50,12 @@
{
"file": "apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx",
"description": "## The Message Box\n\n#### This file serves as the implementation of the Message Composer component, where you can explore and analyze how the code functions. By examining the code in this file, you can gain a better understanding of its inner workings.\n\n\n#### The Message Composer component receives several props, including *\"rid\"* (room ID), *\"tmid\"* (thread ID), and *\"onSend\"* (handler for sending messages), among others. These props provide necessary data and functionality for the composer to operate effectively.\n\n\n#### By inspecting and experimenting with the code, you can gain insights into how different aspects of the Message Composer are implemented and how they interact with other components and functions.\n\n- The MessageBox is using MessageBoxProps type for defining its type\n```\ntype MessageBoxProps = {rid: IRoom['_id']; ...};\nconst MessageBox = ({rid, tmid, ...}: MessageBoxProps): ReactElement => \n```",
"line": 98
"line": 99
},
{
"file": "apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx",
"description": "## Sending Message\n\n#### Rocket chat's Room/channel message composers have multiple options such as uploading files, Writing text messages and Quoted messages, And then we have a send button at the right corner of composer which sends what you have entered.\n\n#### To understand how the send button works for sending a simple text message:\n\n- When the send button is clicked, an event is triggered.\n- The event handler associated with the send button retrieves the text message entered by the user.\n- The text message is then processed and prepared for sending.\n- The necessary information, such as the room/channel ID, sender details, and the text message content, is included.\n- The prepared message is sent to the server via an appropriate network request or function call.\n- The server receives the message and performs further processing, including broadcasting it to the relevant recipients in the room/channel.\nThe message is displayed in the chat interface for all participants to view.",
"line": 341,
"line": 345,
"selection": {
"start": {
"line": 3,
Expand All @@ -70,17 +70,17 @@
{
"file": "apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx",
"description": "## Message Input \n\n- The MessageComposerInput component plays a crucial role in handling user inputs within the message composer. It is responsible for capturing various types of inputs and encompasses multiple associated actions.\n\n#### The MessageComposerInput component enables users to interact with the message composer through different actions, such as:\n\n1. **Typing and Editing**: Users can enter and edit text within the composer input field.\n\n2. **Formatting**: It may support various formatting options like bold, italic, bullet points, etc., allowing users to apply formatting to their messages.\n\n3. **Mentions**: Users can mention specific individuals or groups within the message by using the appropriate syntax or by selecting them from a list.\n\n4. **Emojis**: It may provide an emoji picker or support emoji shorthand, allowing users to insert emojis into their messages.\n\n5. **Attachments**: Users can attach files or media to their messages, such as images, documents, or videos.",
"line": 376
"line": 380
},
{
"file": "apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx",
"description": "### The Send Button\n\n- To send any message you need to click send button or hit Enter/Return key, when you click send button **handleSendMessage** method/function is called.\n```\n <MessageComposerAction\n onClick={handleSendMessage}\n ....\n />\n```",
"line": 424
"line": 428
},
{
"file": "apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx",
"description": "## Handle message send\n\n- This is the function which sends messages further, it Gets text from chat.composer.text where chat is actully using useChat() which is coming from [ChatAPI](./apps/meteor/client/lib/chats/ChatAPI.ts) consisting of multiple functions.\n\n#### The handleSendMessage function is responsible for processing and sending the message to the intended recipients. It performs the following actions:\n\n1. Retrieves the content of the message entered by the user.\n2. Collects additional information needed for sending the message, such as the room/channel ID, sender details, and any associated metadata.\n3. Packages the message data into a suitable format for transmission.\n4. Initiates the process of sending the message, it goes through a WebSocket connection.\n5. The message is then transmitted to the server for further processing.\n6. The server handles the message, ensuring it is delivered to the specified room/channel and received by the intended recipients.\n7. Once the message is successfully sent, it may trigger updates to the chat interface, including displaying the sent message in the conversation history.\n\n- Here we have \n ```\n const chat = useChat(); // useChat is a Context using ChatAPI.\n const text = chat.composer?.text ?? ''; //Text is getting information from useChat Context.\n\n onSend?.({ // onSend was recieved as prop and hence we are returning with some value and a boolean tshow\n\t\t\tvalue: text,\n\t\t\ttshow,\n\t\t});\n ```\n",
"line": 158
"line": 159
},
{
"file": "apps/meteor/client/views/room/components/body/composer/ComposerMessage.tsx",
Expand Down Expand Up @@ -134,13 +134,13 @@
},
{
"file": "apps/meteor/client/lib/chats/flows/sendMessage.ts",
"description": "## Calling Meteor method\n\n### This method is taking 2 parameters, one is the route for meteor method(api/v1/method.call/:method) and another parameter is message which is passed on by sendMessage function below.",
"description": "## Calling Meteor method\n\n### This method is taking 2 parameters, one is the route for meteor method(api/v1/method.call/:method) and another parameter is message which is passed on by sendMessage function below.\n\n```\nawait sdk.call('sendMessage', message);\n```",
"line": 32
},
{
"file": "apps/meteor/client/lib/utils/call.ts",
"file": "apps/meteor/app/utils/client/lib/SDKClient.ts",
"description": "## Meteor.Call\n\n### The sendMessage function in the code triggers a Meteor method by passing a method name and its corresponding parameters. This invocation is responsible for initiating the sendMessage functionality. If by any chance someone calls any other method it would simply throw error.\n\n- There are basically **2 Meteor methods** for sendMessage each of them performing different tasks\n - **The first method is responsible for sending the message data to the database and performing various related tasks. However, there may be a slight delay in the message being rendered in the room or channel. To mitigate this delay, a second Meteor method is executed concurrently in an asynchronous manner.**\n\n - **The second method is specifically designed to facilitate the instant display of the sent message. If this method were disabled or not implemented, there would be a noticeable delay in the message being rendered and visible to the users.**",
"line": 6
"line": 161
},
{
"file": "apps/meteor/app/lib/server/methods/sendMessage.ts",
Expand Down

0 comments on commit 6d1fbce

Please sign in to comment.