Rich Presence

Utilizando rich presence no teu projeto

Aqui você vai saber do que você precisa para fazer uma rich presence no teu projeto.

• Criando o ambiente de trabalho:

Crie uma pasta (do nome que desejar) e abra no visual studio code. após isso, vamos criar a estrutura necessária:

nome-do-teu-projeto/
├── assets/               # adicionar imagens do projeto ou ícones
│ ├── icons/              # ícones
│ └── images/             # imagens do projeto
├── src/                  # [opicional] onde ficam os demais arquivos
│ ├── preload.js          # arquivo que abre a ponte ente o app e site
│ ├── rpc.js              # arquivo onde trabalhará a rich
│ └── renderer.js         # atualiza as informações do site para o app
└── index.js              # arquivo principal

• Criando uma aplicação

Vá até discord developers e crie uma aplicação do nome que desejar. não crie a aplicação como um bot.
Criando os assets: Ainda no developers portal, acesse a página "rich presence > art assets" e faça upload das imagens que você irá utilizar nesse processo.

• Criando o app desktop

Nesta parte iremos utilizar o electron, você vai precisar do Node.js.
Baixe as bibliotecas necessárias:
npm i electron --save-dev
npm i path
npm i discord-rpc

• Construindo o app

index.js:

const { app, BrowserWindow, ipcMain } = require('electron');
const { connectRPC, setActivity, clearActivity, setPageActivity } = require('./src/rpc.js');
const path = require('path');

function createWindow() {
const win = new BrowserWindow({
width: 1280,
height: 800,
icon: path.join(__dirname, 'assets/icon.png'), // caminho do seu asset
webPreferences: {
contextIsolation: true,
preload: path.join(__dirname, 'src/preload.js') // caminho do seu preload
},
autoHideMenuBar: true
});

win.loadURL('sua_url');
}

app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});

// Conectado ao RPC
connectRPC();

ipcMain.on('page-update', (event, pageName) => {
setPageActivity(pageName);
});

preload.js

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
// EXEMPLOS QUE FORAM UTILIZADOS NO FOOOLY!
inicio: () => ipcRenderer.send('page-update', 'inicio')
// adicione mais de preferir });

rpc.js

const DiscordRPC = require('discord-rpc');
const clientId = 'client_id'; // da aplicação

DiscordRPC.register(clientId);
const rpc = new DiscordRPC.Client({ transport: 'ipc' });

// Atividade inicial padrao
function setDefaultActivity() {
rpc.setActivity({
details: 'Minha primeira rich',
state: 'Detalhes',
largeImageKey: 'nome_do_seu_asset_no_developers_portal',
largeImageText: 'Texto dahora',
type: 0
});
}

function setActivity() {
if (
!rpc
) {
console.warn('[RPC] Dados inválidos para setActivity:', songInfo);
return;
}

rpc.setActivity({
details: `exemplo`,
state: `slakkkk`,
largeImageKey: 'nome_do_seu_asset_no_developers_portal',
largeImageText: `Texto dahora`,
smallImageKey: 'nome_do_seu_asset_no_developers_portal',
smallImageText: `Texto bala`,
type: 0,
instance: false
});
}

function clearActivity() {
setDefaultActivity();
}

function setPageActivity(pageName) {
// Exemplo de switch-case, mas você pode usar if/else também.
switch (pageName) {
case 'inicio':
// "inicio" definido no preload.js rpc.setActivity({
details: 'Na página inicial',
state: 'No Foooly',
largeImageKey: 'nome_do_seu_asset_no_developers_portal', // adicione os teus assets no developers portal da tua aplicação
largeImageText: 'Texto fodastico',
type: 0
});
break;

// adicione mais contextBridge(s) no preload e adicione mais switch-case(s)

default:
// Se não foi nenhuma das páginas acima, podemos voltar ao default
setDefaultActivity();
break;
}
}

rpc.on('ready', () => {
console.log('[RPC] Conectado ao Discord!');
setDefaultActivity();
});

function connectRPC() {
return rpc.login({ clientId }).catch(console.error);
}

module.exports = {
connectRPC,
setActivity,
clearActivity,
setPageActivity
};

É importante saber:

o arquivo renderer.js será somente utilizado caso você queira atualizações em tempo real do seu site para o aplicativo desktop..

• Colocando em funcionamento

Agora, é uma etapa bem simples e rápida. No teu site, cole o seguinte código (na tag script ou num arquivo).

// Ele chama a função no preload (app electron)
if (window.electronAPI?.inicio) {
window.electronAPI.inicio();
}

e é simples assim, prontinho!