Você já pensou ou precisou criar uma maneira de compartilhar dados e ações entre diferentes usuários que estão navegando em um mesmo site ou aplicação web? Como por exemplo trocar mensagens criando uma aplicação de chat ou permitindo colaborar com em um documento ou projeto em tempo real.

Isso é possível graças à comunicação orientada a eventos, uma tecnologia que permite que você envie e receba mensagens entre o navegador e o servidor de forma assíncrona e desacoplada. Com ela, você pode criar aplicações web mais interativas e colaborativas, que reagem às mudanças nos dados instantaneamente.

Neste artigo, vamos explicar o que é comunicação orientada a eventos, como ela funciona e como você pode implementá-la em suas aplicações front end usando JavaScript.

O que é comunicação orientada a eventos?

Event-driven communication, ou em português: comunicação orientada a eventos, é um padrão de arquitetura que consiste em enviar e receber mensagens entre componentes ou serviços de forma assíncrona e desacoplada. Ou seja, em uma aplicação orientada a eventos, geralmente existe um loop de eventos que aguarda a ocorrência de eventos e, quando detectado, aciona uma função de retorno de chamada associada a esse evento.

Um evento pode ser qualquer coisa que você quiser, desde que seja relevante para a sua aplicação. Por exemplo, um evento pode ser um clique em um botão, uma alteração em um formulário, uma compra realizada etc.

Os componentes ou serviços que enviam eventos são chamados de produtores ou publicadores (publisher), e os que recebem eventos são chamados de consumidores ou assinantes (subscriber). Eles se conectam através de um intermediário chamado broker ou barramento de eventos, que é responsável por distribuir os eventos para os assinantes adequados.

Como funciona a comunicação orientada a eventos no frontend?

No desenvolvimento frontend, a comunicação orientada a eventos pode ser usada para sincronizar dados e ações entre diferentes seções ou páginas web de um mesmo site ou aplicação. Isso permite que você crie funcionalidades como chat, colaboração em tempo real, notificações, jogos multiplayer etc.

Para implementar essa comunicação, você precisa usar uma biblioteca ou serviço que forneça uma API para enviar e receber eventos entre o navegador e o servidor. O objetivo é permitir que o servidor envie eventos para o navegador sem que este precise fazer requisições constantes.

Utilizando uma comunicação de eventos com a SuperViz

A SuperViz oferece um Real-Time Data Engine que permite uma rápida configuração com poucas linhas de código. Com isso facilitando a implementação de comunicação orientada a eventos, tornando o processo mais simplificado e eficiente.

Com o Real-Time Data Engine é preciso criar uma sala onde todos os participantes que estão nela podem se inscrever para participar de eventos em tempo real. Para criar uma sala e adicionar o Real-Time Data Engine, faça como no código abaixo:

import SuperVizRoom from '@superviz/sdk'

const room = await SuperVizRoom(DEVELOPER_KEY, {
  roomId: "ID da sala",
  group: {
    id: "Id do grupo",
    name: "Nome do grupo",
  },
  participant: {
    id: "ID do participante",
    name: "Nome do participante"
  },
});

const realtime = new Realtime();
room.addComponent(realtime);

Para conseguir ouvir quando um evento é disparado, é necessário se inscrever através do método subscribe, que dispara uma função de callback sempre que um evento é recebido.

realtime.subscribe("nome do evento", funcaoDeCallback);

function funcaoDeCallback(payload) {
	// fazer algo
}

Com isso sempre que houver a necessidade pode-se enviar eventos, de um participante para outros usando o método publish, especificando um nome e um payload para o evento. O nome identifica o evento, enquanto o payload carrega dados para os destinatários.

const payload = {
	id: 108,
	message: 'Olá mundo'
}; 

realTime.publish("nome do evento", payload);

Conclusão

A comunicação orientada a eventos no desenvolvimento frontend permite a criação de aplicações web interativas e colaborativas. A SuperViz e seu Real-Time Data Engine simplificam essa implementação, facilitando a troca de mensagens em tempo real e a colaboração em projetos.

Também já disponibiliza uma suíte de componentes como Mouse Pointers, Who-Is-Online e Contextual Comments que já implementam o Real-Time Data Engine.

Comece a explorar os benefícios desta tecnologia com a SuperViz criando uma conta e obtendo gratuitamente um token.