DEV Community

loading...
Cover image for Chatbot para twitch com Javascript
A Caverna do Patocórnio

Chatbot para twitch com Javascript

Victor Castro
Web developer PHP | JS | Python 🧑🏻‍💻
・5 min read

Olá nesse tutorial vamos criar um chatbot para a twitch.tv utilizando javascript com a biblioteca tmi.js. Utilizar um chatbot no seu canal é uma das formas de você engajar os seus viewers, pois, você pode criar jogos e outras brincadeiras para divertir o seu público durante as lives. Um dos exemplos é criar um comando de duelo para que o seu chat fique duelando no chat. Outra coisa que você pode fazer é criar funcionalidade para que o seu bot ajude na moderação da sua live.

Ferramentas

Para criar esse projeto iremos utilizar as seguintes tecnologias:

  • node.js - Que é um runtime javascript. Você pode baixar ele aqui.

  • nodemon - Que é uma ferramenta que monitora o sistema de arquivos da sua aplicação e reinicia automaticamente após uma modificação.

  • npm - Que é um gerenciador de pacote javascript. Por padrão ele já vem instalado junto com o node.js, mas caso você queira também pode utilizar o yarn.

  • tmi.js - Biblioteca para se conectar no chat da twitch utilizando o protocolo IRC.

  • Editor de texto - Você pode utilizar um editor de texto da sua preferência, no meu caso irei utilizar o Vscode.

Iniciando Projeto

Apos a instalação do node iremos iniciar o nosso projeto utilizando o seguinte comando:

npm init -y

Se você olhar na pasta do seu projeto é para ter criado um arquivo chamado 'package.json' é nele que fica as configurações do nosso projeto.

Caso você queira saber mais sobre o npm init você pode descobrir mais aqui.

Instalação de depedências

Agora vamos instalar as bibliotecas necessárias para o nosso projeto.

npm install tmi.js

npm install --save-dev nodemon

Após rodar esses comandos se você olhar no seu projeto você deve ter a pasta 'node_modules' e o arquivo 'package-lock.json' no seu projeto.

Agora iremos criar scripts para facilitar na hora de rodar o nosso bot. Dentro do arquivo package.json iremos modificar a propriedade scripts e adicionar o seguinte código.

"scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
}
Enter fullscreen mode Exit fullscreen mode

O start serve para rodar o nosso quando finalizado. Já o dev serve para rodar o nosso bot enquanto estivermos trabalhando nele, pois, ele vai executar usando o nodemon e facilitará nosso trabalho enquanto estivermos modificando ele reiniciando automaticamente o nosso bot.

Criando arquivo de configuração

Agora precisando criar um arquivo chamado .env nele ficara guardado as variáveis de configurações nosso bot. Logo abaixo podemos ver como você devera deixar o arquivo depois de criado. Você devera substituir kastrinhobot pelo nome do seu nome, kastr0walker pelo nome do seu canal e TOKEN pelo token que você deve gerar aqui.

NOME_BOT=kastrinhobot
NOME_CANAL=kastr0walker
TOKEN_BOT=TOKEN
Enter fullscreen mode Exit fullscreen mode

Criando nosso primeiro comando

Agora está na hora de colocar a mão na massa e fazer o nosso primeiro comando no bot. A primeira coisa que precisamos fazer é importar as bibliotecas necessárias para o nosso projeto funcionar.

const tmi = require("tmi.js");
const dotenv = require("dotenv").config();
Enter fullscreen mode Exit fullscreen mode

Agora iremos salvar em variáveis as configurações que adicionamos no nosso arquivo .env.

const NOME_BOT = process.env.NOME_BOT;
const NOME_CANAL = process.env.NOME_CANAL;
const TOKEN_BOT = process.env.TOKEN_BOT;
Enter fullscreen mode Exit fullscreen mode

Devemos também criar um objeto para adicionar as informações do nosso bot.

const opts = {
  identity: {
    username: NOME_BOT,
    password: TOKEN_BOT,
  },
  channels: [NOME_CANAL],
};
Enter fullscreen mode Exit fullscreen mode

Devemos instanciar um novo objeto do tipo tmi.client passando como parâmetro o objeto que contem as configurações do nosso bot.

const client = new tmi.client(opts);
Enter fullscreen mode Exit fullscreen mode

Devemos criar uma função para ser executada toda vez que o bot detectar que uma mensagem foi enviada no chat. No nosso caso definimos essa função como recivedMessage nela recebemos quatro parâmetros.

  • target - Esse parâmetro recebe o nome do canal no qual o bot recebeu a mensagem.
  • context - Esse é um objeto na qual fica armazenado algumas informações do usuário que mandou mensagem no chat. Podemos achar nele o nome do usuário, se é sub ou mod de um canal dentre outras informações. Você pode conseguir mais informações colocando um console.log(context) dentro da função.
  • msg - Esse é uma string contendo a mensagem que foi enviada no chat.
  • bot - Esse é um booleano que retorna verdadeiro caso a mensagem recebida seja do nosso próprio bot.

O nosso primeiro comando que vamo criar é para o bot mandar uma mensagem de "Olá Mundo!" caso alguém digite !ola no chat. Para isso verificamos se a mensagem recebida é igual a !ola caso seja nós chamamos o método say do nosso client. Esse método é responsável por fazer com que o bot mande uma mensagem no chat. Ele recebe dois parâmetros o primeiro é o nome do canal na qual o bot vai mandar a mensagem. O segundo parâmetro é uma string contendo a mensagem na qual o bot vai enviar.

function recivedMessage(target, context, msg, bot) {
  // Verifica se a mensagem recebido é do nosso bot
  if (bot) {
    return;
  }

  if (msg == "!ola") {
    client.say(target, "Olá Mundo!");
  }
}
Enter fullscreen mode Exit fullscreen mode

Agora precisamos fazer com que o nosso bot se conecte no chat e comece a escutar as mensagens que são enviadas nele.
Para isso utilizamos as seguintes funções.

  • client.on("message", recivedMessage) - Essa função vai fazer com que o bot fique escutando o nosso chat e execute a função recivedMessage toda vez que uma mensagem é recebida.
  • client.on("connected", () => {}) - Essa função vai fazer com que o nosso bot mande "O bot tá on!" no nosso chat ao se conectar.
  • client.connet() - Essa função vai fazer com que o nosso bot se conecte com o chat do nosso canal.
client.on("message", recivedMessage);
client.on("connected", () => {
  client.say(NOME_CANAL, "O bot tá on!");
});

client.connect();
Enter fullscreen mode Exit fullscreen mode

Após isso salve o seu arquivo e execute no seu terminal o seguinte comando:

npm start

Pront agora o bot deve está conectado no seu canal e já sendo possível interagir com ele digitando !ola.

Agora que você entendeu a base de como criar o seu primeiro bot. Você pode utilizar a sua imaginação e desenvolver várias funcionalidades legais para o seu bot. Se você quiser se inspirar com ideias para o seu bot esse são alguns bots na qual já contribui no desenvolvimento.

Para esse tutorial utilizei como base esse repositório. Obrigado por ler meu artigo e boa sorte com as suas criações.

Discussion (1)

Collapse
eduardoklosowski profile image
Eduardo Klosowski

Agora só falta um artigo discutindo como organizar os comandos do bot para facilitar a leitura e manutenção do código, e não transformar o código em algo difícil de ler e bastante propenso a bugs.

Forem Open with the Forem app