HTTP Requests

HTTP requests are the next feature we will look at to expand your app functionality. If you want to connect your app to the outside world, the HTTP property enables users to invoke an external web service.

In this topic, we will create a slash command get for our Hello World app. This command executes a GET HTTP request based on the given URL. You can also use our Tester App or any app of your choice. Make sure that a Rocket.Chat server is ready to deploy the app.

Step 1: Register the slash command

The slash command must be registered in the app's main class, at the root of the project.

import { IAppAccessors, IConfigurationExtend, ILogger } from '@rocket.chat/apps-engine/definition/accessors';
import { App } from '@rocket.chat/apps-engine/definition/App';
import { IAppInfo } from '@rocket.chat/apps-engine/definition/metadata';
import { HTTPRequestCommand } from './commands/HTTPRequestCommand'; // [1]

export class HelloWorldApp extends App {
    constructor(info: IAppInfo, logger: ILogger, accessors: IAppAccessors) {
        super(info, logger, accessors);
    }

    public async extendConfiguration(configuration: IConfigurationExtend) {
        configuration.slashCommands.provideSlashCommand(new HTTPRequestCommand()); // [2]
    }
}

Here, we import our new slash command class and then register it in the app's configuration.

Step 2: Create the slash command

1. If you haven't created a separate directory for slash commands, it is recommended to create a commands directory at the root of the project.

2. Create the HTTPRequestCommand.ts file in this directory.

3. Then enter the code shown below:

import {
    IHttp,
    IModify,
    IRead,
} from '@rocket.chat/apps-engine/definition/accessors';
import {
    ISlashCommand,
    SlashCommandContext,
} from '@rocket.chat/apps-engine/definition/slashcommands';

export class HTTPRequestCommand implements ISlashCommand {
    public command = 'get'; // [1]
    public i18nParamsExample = '';
    public i18nDescription = '';
    public providesPreview = false;

    public async executor(context: SlashCommandContext, read: IRead, modify: IModify, http: IHttp): Promise<void> {
        const [url] = context.getArguments(); // [2]

        if (!url) { // [3]
            throw new Error('Error!');
        }

        await http.get(url); // [4]
    }
}

This code implements the following:

1. The slash command is called get.

2. When executed, it uses the argument that the user passed after the command as the URL.

3. The argument is mandatory. If no argument is provided, an error is thrown.

4. Perform the GET request using the provided argument.

Optionally, you can store the GET request in a console constant. When the command is executed, it is logged.

const response = await http.get(url);
console.log("result: " + response.data);

Step 3: Print the request to a conversation

Now, instead of logging console output to the instance's log, let's output it to the conversation.

Add the following private method to HTTPRequestCommand.ts.

private async sendMessage(context: SlashCommandContext, modify: IModify, message: string): Promise<void> {
    const messageStructure = modify.getCreator().startMessage();
    const sender = context.getSender(); // [1]
    const room = context.getRoom(); // [2]

    messageStructure
        .setSender(sender)
        .setRoom(room)
        .setText(message); // [3]

    await modify.getCreator().finish(messageStructure); // [4]
}

This function implements the following:

1. Gets the user who invoked the command (in this case, you).

2. Selects the room where the command was executed.

3. Sets the received string as the message.

4. Sends the message to the room.

Then, append the following code to the end of the executor method:

const response = await http.get(url);
const message = JSON.stringify(response.data, null, 2);
await this.sendMessage(context, modify, message);

Instead of simply sending the request and not capturing the response, we store the response in a constant, format its content as a string, and transmit it using our new sendMessage method.

Note: To learn more about messaging, see the IMessageBuilder documentation.

Step 4: Deploy the app

To deploy the app, run:

rc-apps deploy --url <server_url> -u <user> -p <pwd>

• The <server_url> parameter is the URL of your Rocket.Chat server.

• Replace the placeholders with the URL, username, and password for your server, respectively.

After executing this command, your application will be deployed to the server.

Packaging your app

Alternatively, you can execute the rc-apps package command. This gives you a compressed zip file of your app that you can upload as a private app to your Rocket.Chat server.

Step 5: Test the app

After deploying the application, enter /get <some_url> in any channel and the app will send a GET request to the specified URL. In this example, we will use JSONPlaceholder to obtain dummy data to test our app:

• Enter /get https://jsonplaceholder.typicode.com/todos/1 in a chat.

• You receive the following response in the chat:

{
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
}

Similarly, you can apply this feature to connect with any domain of your choice.

Next, let's gain an understanding of events and the Apps-Engine-supported features to handle Rocket.Chat events.