Principal Configurações Avançadas Como configurar uma conexão WebSocket?

Como configurar uma conexão WebSocket?

Última atualização em May 15, 2024

WebSockets estabelecem uma conexão contínua entre o cliente e o servidor, permitindo a comunicação bidirecional. A Snypto utiliza essa conexão para fornecer atualizações em tempo real sobre eventos da plataforma. Para se conectar ao WebSocket da Snypto, basta fornecer um token e seguir as instruções de configuração descritas neste guia.

Observação: esse recurso é experimental e a documentação pode mudar a cada lançamento. Além disso, a compatibilidade com versões anteriores não pode ser garantida, por isso é importante garantir que você esteja usando a versão mais recente da implementação.

Por que devo usar uma conexão WebSocket?

Uma conexão WebSocket permite atualizações de dados em tempo real, tornando-a ideal para clientes como um SDK cliente Android ou iOS para Snypto. Isso ajuda a atualizar o painel sem a necessidade de recarregar a página. Consequentemente, pode aprimorar a experiência do usuário e melhorar a produtividade do agente.

Como configurar uma conexão WebSocket com a Snypto?

Para configurar uma conexão WebSocket com a Snypto, você precisa iniciar uma conexão com o token PubSub de autenticação fornecido pela Snypto. A URL para a conexão é **wss:///cable.**Se estiver usando a Cloud da Snypto, você pode usar wss://app.snypto.com/cable como URL.

Um token PubSub é um token usado para autenticar um cliente ao se conectar a um serviço PubSub (publicar-assinar). O cliente deve apresentar este token ao serviço para estabelecer uma conexão e começar a publicar ou assinar mensagens.

Existem dois tipos de tokens PubSub disponíveis na Snypto, conforme listado abaixo.

  1. Token PubSub do usuário: Este token tem privilégios de um agente/administrador e receberia todos os eventos listados posteriormente na página. Você pode obter o token PubSub chamando a API Profile.

  2. Token PubSub de contato: Snypto gera um token PubSub exclusivo para cada sessão que um contato possui. Este token pode ser usado para conectar-se ao WebSocket e receber atualizações em tempo real para a mesma sessão. Quando um contato é criado por meio de APIs públicas, o pubsub_token é incluído na carga de resposta. Este token concede acesso apenas a eventos relacionados à sessão atual, como:conversation.createdconversation.status_changedmessage.createdmessage.updatedconversation_typing_onconversation_typing_off e presence.update.

    Consulte as APIs do cliente para criar integrações voltadas para o cliente em tempo real usando Snypto.

    Observação: esse token pode ser alternado regularmente com base no tipo de instalação. Certifique-se de estar usando o token mais recente.

Como se conectar ao WebSocket da Snypto?

Para se conectar ao WebSocket da Snypto, use o comando subscribe e inclusa seu pubSubTokenaccountId, e userId (se estiver usando um token de usuário) na solicitação de conexão. Aqui está um exemplo de como você pode se conectar à Snypto.

// Add a helper method to convert JSON to a string
const stringify = (payload = {}) => JSON.stringify(payload);

const pubSubToken = "<contact/user-pub-sub-token>";
const accountId = "<your-account-id-in-integer>";
const userId = "<user-id-in-integer-if-using-user-token>";
const connection = new WebSocket(
  "wss://app.snypto.com/cable"
);

connection.send(
  stringify({
    command: "subscribe",
    identifier: stringify({
      channel: "RoomChannel",
      pubsub_token: pubSubToken,
      account_id: accountId,
      user_id: userId,
    }),
  })
);

// The expected string in connection.send is of the format:
// {"command":"subscribe","identifier":"{\\"channel\\":\\"RoomChannel\\",\\"pubsub_token\\":\\"your-pubsub-token\\",\\"account_id\\": account_id_integer,\\"user_id\\":user_id_integer }"}

Publicando presença no servidor WebSocket

Para manter o status dos seus usuários online na Snypto, você pode enviar um evento de atualização de presença para a Snypto a cada 30 segundos. Esta ação manteria o status do agente/contato online.

Como atualizar a presença de um agente/administrador?

Para atualizar a presença de um agente ou administrador, envie a seguinte carga ao servidor:

const userPayload = stringify({
  command: "message",
  identifier: stringify({
    channel: "RoomChannel",
    pubsub_token: "<user-pubsub-token>",
    account_id: accountId,
    user_id: userId,
  }),
  data: stringify({ action: "update_presence" }),
});

connection.send(userPayload);
// The expected string in connection.send is of the format:
// {"command":"message","identifier":"{\\"channel\\":\\"RoomChannel\\",\\"pubsub_token\\":\\"your-pubsub-token\\",\\"account_id\\": account_id_integer,\\"user_id\\":user_id_integer ","data":"{\\"action\\":\\"update_presence\\"}"}

Como atualizar a presença de um contato?

Para atualizar a presença de um contato, envie a seguinte carga ao servidor:

const agentPayload = stringify({
  command: "message",
  identifier: stringify({
    channel: "RoomChannel",
    pubsub_token: "<user-pubsub-token>",
  }),
  data: stringify({ action: "update_presence" }),
});

connection.send(agentPayload);
// The expected string in connection.send is of the format:
// {"command":"message","identifier":"{\\"channel\\":\\"RoomChannel\\",\\"pubsub_token\\":\\"your-pubsub-token\\","data":"{\\"action\\":\\"update_presence\\"}"}

Carga útil do WebSocket

Objetos

Um evento pode conter qualquer um dos seguintes objetos como carga útil. Diferentes tipos de objetos suportados na Snypto são os seguintes.

Conversação

A seguinte carga útil será retornada para uma conversa.

{
  "additional_attributes": {
    "browser": {
      "device_name": "string",
      "browser_name": "string",
      "platform_name": "string",
      "browser_version": "string",
      "platform_version": "string"
    },
    "referer": "string",
    "initiated_at": {
      "timestamp": "iso-datetime"
    }
  },
  "can_reply": "boolean",
  "channel": "string",
  "id": "integer",
  "inbox_id": "integer",
  "contact_inbox": {
    "id": "integer",
    "contact_id": "integer",
    "inbox_id": "integer",
    "source_id": "string",
    "created_at": "datetime",
    "updated_at": "datetime",
    "hmac_verified": "boolean"
  },
  "messages": ["Array of message objects"],
  "meta": {
    "sender": {
      // Contact Object
    },
    "assignee": {
      // User Object
    }
  },
  "status": "string",
  "unread_count": "integer",
  "agent_last_seen_at": "unix-timestamp",
  "contact_last_seen_at": "unix-timestamp",
  "timestamp": "unix-timestamp",
  "account_id": "integer"
}

Contato

A seguinte carga útil será retornada para um contato.

{
  "additional_attributes": "object",
  "custom_attributes": "object",
  "email": "string",
  "id": "integer",
  "identifier": "string or null",
  "name": "string",
  "phone_number": "string or null",
  "thumbnail": "string"
}

Usuário

A seguinte carga útil será retornada para um agente/administrador.

{
  "id": "integer",
  "name": "string",
  "available_name": "string",
  "avatar_url": "string",
  "availability_status": "string",
  "thumbnail": "string"
}

Mensagem

A seguinte carga útil será retornada para uma mensagem.

{
  "id": "integer",
  "content": "string",
  "account_id": "integer",
  "inbox_id": "integer",
  "message_type": "integer",
  "created_at": "unix-timestamp",
  "updated_at": "datetime",
  "private": "boolean",
  "status": "string",
  "source_id": "string / null",
  "content_type": "string",
  "content_attributes": "object",
  "sender_type": "string",
  "sender_id": "integer",
  "external_source_ids": "object",
  "sender": {
    "type": "string - contact/user"
    // User or Contact Object
  }
}

Notificação

A seguinte carga útil será retornada para uma notificação.

{
  "id": "integer",
  "notification_type": "string",
  "primary_actor_type": "string",
  "primary_actor_id": "integer",
  "primary_actor": {
    "can_reply": "boolean",
    "channel": "string",
    "id": "integer",
    "inbox_id": "integer",
    "meta": {
      "assignee": {
        "id": "integer",
        "name": "string",
        "available_name": "string",
        "avatar_url": "string",
        "type": "user",
        "availability_status": "string",
        "thumbnail": "string"
      },
      "hmac_verified": "boolean"
    },
    "agent_last_seen_at": "unix-timestamp",
    "contact_last_seen_at": "unix-timestamp",
    "timestamp": "unix-timestamp",
  },
  "read_at": "unix-timestamp",
  "secondary_actor": "object/null",
  "created_at":"unix-timestamp",
  "account_id": "integer",
  "push_message_title": "string"
}

Identificador

Cada evento terá um atributo "Identifier" no seguinte formato.

{
  "identifier": "{\\"channel\\":\\"RoomChannel\\",\\"pubsub_token\\":\\"token\\",\\"account_id\\":id,\\"user_id\\":user_id}"
}

Mensagem

Cada evento incluirá um atributo "message" ao qual retornaremos o nome do evento, bem como os dados associados a ele. Para ver a lista de eventos, consulte a documentação abaixo.

Tipos de eventos

conversation.created

Este evento é acionado quando uma nova conversa é iniciada. Se estiver assinando o token PubSub do contato, esse evento incluirá apenas dados relacionados à sessão específica associada ao token PubSub.

Disponível para: agente/administrador, contato

{
  "message": {
    "event": "conversation.created",
    "data": {
      // Conversation object will be available here
    }
  }
}

conversation.read

Este evento é acionado e enviado aos agentes/administradores que têm acesso à caixa de entrada, quando um contato lê uma mensagem.

Disponível para: agente/administrador

{
  "message": {
    "event": "conversation.read",
    "data": {
      // Conversation object will be available here
    }
  }
}

message.created

Este evento é acionado e enviado aos agentes, administradores e contatos quando uma nova mensagem é criada em uma conversa à qual eles têm acesso.

Disponível para: agente/administrador, contato

{
  "message": {
    "event": "message.created",
    "data": {
      // Message object will be available here
    }
  }
}

message.updated

Este evento é acionado e enviado aos agentes, administradores e contatos quando uma mensagem é atualizada em uma conversa à qual eles têm acesso.

Disponível para: agente/administrador, contato

{
  "message": {
    "event": "message.updated",
    "data": {
      // Message object will be available here
    }
  }
}

conversation.status_changed

Este evento é enviado aos agentes, administradores e contatos quando o status de uma conversa é atualizado.

Disponível para: agente/administrador, contato

{
  "message": {
    "event": "conversation.status_changed",
    "data": {
      // Conversation object will be available here
    }
  }
}

conversation.typing_on

Este evento é enviado aos agentes, administradores e contatos quando um contato ou agente começa a digitar uma resposta.

Disponível para: agente/administrador, contato

{
  "message": {
    "event": "conversation.typing_on",
    "data": {
      "conversation": {
        // Conversation object will be available here
      },
      "user": {
        // Contact / Agent,Admin User object will be available here.
      },
      "is_private": "boolean", // Shows whether the agent is typing a private note or not.
      "account_id": "integer"
    }
  }
}

conversation.typing_off

Este evento é enviado aos agentes, administradores, contatos quando um contato ou agente termina de digitar uma resposta.

Disponível para: agente/administrador, contato

{
  "message": {
    "event": "conversation.typing_off",
    "data": {
      "conversation": {
        // Conversation object will be available here
      },
      "user": {
        // Contact / User object will be available here.
      },
      "account_id": "integer"
    }
  }
}

assignee.changed

Este evento é enviado aos agentes/administradores com acesso a uma caixa de entrada quando o agente atribuído é alterado.

Disponível para: agente/administrador

{
  "message": {
    "event": "assignee.changed",
    "data": {
      // Conversation object will be available here
    }
  }
}

team.changed

Este evento é enviado aos agentes/administradores com acesso a uma caixa de entrada quando a equipe designada é alterada.

Disponível para: agente/administrador

{
  "message": {
    "event": "team.changed",
    "data": {
      // Conversation object will be available here
    }
  }
}

conversation.contact_changed

Este evento é enviado aos agentes/administradores quando dois contatos são mesclados e todas as suas conversas são consolidadas em um contato.

Disponível para: agente/administrador

{
  "message": {
    "event": "conversation.contact_changed",
    "data": {
      // Conversation object will be available here
    }
  }
}

contact.created

Este evento é enviado aos agentes/administradores quando um contato é criado.

Disponível para: agente/administrador

{
  "message": {
    "event": "contact.created",
    "data": {
      // Contact object will be available here
    }
  }
}

contact.updated

Este evento é enviado aos agentes/administradores quando um contato é atualizado.

Disponível para: agente/administrador

{
  "message": {
    "event": "contact.updated",
    "data": {
      // Contact object will be available here
    }
  }
}

presence.update

Disponível tanto para o agente quanto para o contato, este evento fornece atualizações em tempo real sobre o status de disponibilidade dos usuários no sistema. O evento entregue aos contatos não incluirá informações sobre o status de disponibilidade de outros contatos.

Disponível para: agente/administrador

{
  "message": {
    "event": "presence.update",
    "data": {
      "account_id": "integer",
      "users": {
        "user-id": "string"
      },
      "contacts": {
        "contact-id": "string"
      }
    }
  }
}

notification_created

Este evento é enviado aos agentes/administradores quando uma notificação é criada.

Disponível para: agente/administrador