Chat
O componente Chat foi criado para ser utilizado na interação entre usuários. O componente utiliza Websocket para comunicação de envio e recebimento de mensagens.
Chat:
Imagem 1 - Componente Chat no Webrun.
Imagem 2 - Enviar Mensagem para todos. Nesta janela, o usuário poderá enviar uma mensagem para todos os usuários.
Imagem 3 - Conversa em Grupo.
Imagem 4 - Envio de diferentes tipos mídias.
Propriedades em comum:
| Propriedade | Descrição | Tipo | Exemplo |
|---|---|---|---|
| Altura | Define a altura do componente | Inteiro | 250 |
| Código | Informa o código gerado pelo Maker ao qual o componente/formulário foi associado. De forma geral, não interfere nas características do componente. | Inteiro | 5 |
| Container | Informa em qual container o componente irá ser inserido. | Indefinido | |
| Dica | Armazena uma dica para o componente, o qual se torna acessível no modo de inserção ou alteração. | Letras | "Digite o CPF do cliente" |
| Habilitado | Torna o componente possível ser editado ou manipulado. | Lógico | Sim |
| PosiçãoX e PosiçãoY | O "X" determina a posição do componente em relação à esquerda do formulário, e o "Y" em relação ao topo. | Inteiro | 100 |
| Tabulação | Indica a ordem de tabulação do componente em relação aos outros que compõem a aba do formulário na qual está posto. Essa ordem pode ser observada quando o usuário altera o estado do formulário/grade para o modo de inclusão ou edição e navega entre os componentes/campos usando a tecla Tab. | Inteiro | 2 |
| Tabular | Selecionando a opção Sim, quando o usuário estiver navegando entre os componentes, como foi descrito no item anterior, o componente receberá foco (observada a ordem de tabulação). | Lógico | Sim |
| Tamanho | Aplicado a todos - determina a largura do componente ou formulário. | Inteiro | 100 |
| Visível | Aplicada a todos os componentes, com exceção da Moldura e do objeto formulário - Selecionando a opção Sim, o componente aparece no formulário. | Lógico | Sim |
| Nome | Aplicada a todos os componentes e para o objeto formulário - apresenta o nome do componente. O Maker sugere um nome diferente dos nomes dos componentes existentes no formulário para evitar que mais de um componente possua o mesmo nome. | Letras | "Tabela de Consumidores" |
| Descrição | Aplicada a todos os componentes exceto para os componentes Árvore, Grade, Moldura, Imagem e para o objeto formulário - É a legenda que aparece sobre o componente para identificar (resumidamente) qual a sua função. Observação: Ao selecionar um determinado campo o Maker irá sugerir uma descrição obtida no dicionários de dados, caso o usuário deseje deixar o campo da descrição em branco basta apagá-lo e clicar fora do componente. | Letras | "Insira aqui a idade do consumidor" |
Propriedades específicas do componente Chat:
| Propriedade | Descrição | Tipo | Exemplo |
|---|---|---|---|
| Instância | (Opcional) Define o identificador da instância de comunicação do chat, pode ser qualquer valor. Chats que possuem o mesmo identificador de instância poderão se comunicar entre si. Quando essa propriedade está vazia, o chat irá gerar um identificador automaticamente e irá ser isolado dos demais chats do sistema. | Letras | CHAT_SUPORTE |
| Fonte de Dados | Define qual a conexão o componente irá realizar para receber os dados. | Conexão | Conexão Principal |
| Usuários do Sistema | Seleciona a tabela dos usuários do sistema que irão participar do chat. | Letras | fr_usuario |
| Campo ID | Seleciona o campo que vai receber o ID na consulta dos Usuários do Sistema. | Inteiro | usr_codigo |
| Campo Nome | Seleciona o campo que vai receber o Nome na consulta dos Usuários do Sistema. | Letras | usr_nome |
| Campo Foto | Seleciona o campo que vai receber a Foto na consulta dos Usuários do Sistema. | Imagem | usuario.png |
| Salvar Histórico | Define se o chat irá salvar o histórico. OBS: Necessita que as propriedades de SQL do histórico estejam definidas. | Lógico | Sim |
| SQL Histórico | Define o SQL que será utilizado para obter o histórico de mensagens. Clique aqui para baixar o modelo de estrutura e importar em seu projeto. | SQL | SELECT * FROM chat_history |
| Campo ID | Seleciona o campo que vai receber o ID da mensagem na consulta do Histórico SQL. O ID da mensagem não é um inteiro auto incremental pois o chat necessita gerá-lo em tempo de execução. Ele garante a unicidade. | Letras | id_historico |
| Campo Data | Seleciona o campo que vai receber a Data e Hora (em UTC) da mensagem na consulta do Histórico SQL. | Data/Hora | data_historico |
| Campo Status | Seleciona o campo que vai receber o Status da mensagem na consulta do Histórico SQL. | Inteiro | status_historico |
| Campo Remetente | Seleciona o campo que vai receber o Remetente da mensagem na consulta do Histórico SQL. | Inteiro | remetente_historico |
| Campo Destinatário | Seleciona o campo que vai receber o Destinatário da mensagem na consulta do Histórico SQL. Em mensagens de grupos, essa coluna receberá NULL e a coluna especificada na propriedade Campo Grupo irá receber o ID do grupo destinatário da mensagem. | Inteiro | destinatario_historico |
| Campo Grupo | (Opcional) Seleciona o campo que vai receber o ID do grupo na consulta do Histórico SQL. Em mensagens privadas, essa coluna receberá NULL e a coluna especificada na propridade Campo Destinatário irá receber o ID do usuário destinatário da mensagem. | Inteiro | grupo_historico |
| Campo Conteúdo | Seleciona o campo que vai receber o Conteúdo da mensagem na consulta do Histórico SQL. | Letras | conteudo_historico |
| Campo ID Mídia | (Opcional) Seleciona o campo que vai receber o ID da mídia anexada à mensagem na consulta do Histórico SQL. | Letras | id_midia_historico |
| Campo Tipo Mídia | (Opcional) Seleciona o campo que vai receber o tipo do arquivo da mídia anexada à mensagem na consulta do Histórico SQL. O formato do tipo salvo nessa coluna é o MIME type do arquivo. | Letras | tipo_midia_historico |
| Campo Arquivo Mídia | (Opcional) Seleciona o campo que vai receber o nome do arquivo da mídia anexada à mensagem na consulta do Histórico SQL. Por padrão, o chat salva os arquivos enviados na pasta Upload do Webrun. | Letras | arquivo_midia_historico |
| Exibir Notificações na Área de Trab. | Define se o chat irá exibir as notificações na área de trabalho. Para isso o usuário deve autorizar a página a exibir notificações. Quando desabilitado, a mensagem de solicitação não é exibida. | Lógico | Sim |
| Exibir Confirmação de Leitura | Exibe a confirmação de leitura para as mensagens do Chat. | Lógico | Sim |
| Exibir Estado dos Usuários | Exibe estados dos usuários do chat (Online ou Offline). | Lógico | Sim |
| Exibir Visto por Último | Exibe o visto por último dos usuários. OBS: Necessita que a propriedade "Exibir Estado dos Usuário" esteja ativa. | Lógico | Sim |
| Exibir Pesquisa | Exibe a barra de pesquisa no Chat. | Lógico | Sim |
| Exibir Enviar para Todos | Exibe a opção de enviar mensagem a todos os usuários. | Lógico | Sim |
| Expandir Foto ao Clicar | Expande a foto dos usuários ao clicar. | Lógico | Sim |
| Permitir Exportação | Adiciona uma opção no chat para possibilitar a exportação da conversa. | Lógico | Sim |
| Permitir Envio de Mídias | Adiciona uma opção no chat para possibilitar o envio de mídias (imagens, vídeos, aúdios, arquivos, etc). | Lógico | Sim |
| Permitir Criação de Grupos | Adiciona uma opção no chat para possibilitar a criação de grupos. | Lógico | Sim |
| Formulário de Grupos | (Opcional) Define o formulário que será utilizado para criação e edição de grupos do Chat. Quando não especificado, as telas padrões do Chat serão utilizadas. | Formulario | - |
| SQL Grupos | (Opcional) Define o SQL que será utilizado para obter os grupos do Chat. | SQL | SELECT * FROM chat_groups |
| Campo ID Grupo | (Opcional) Seleciona o campo que vai receber o ID do grupo na consulta de Grupos. | Inteiro | id_grupo |
| Campo Nome Grupo | (Opcional) Seleciona o campo que vai receber o Nome do grupo na consulta de Grupos. | Letras | nome_grupo |
| Campo Foto Grupo | (Opcional) Seleciona o campo que vai receber a Foto do grupo na consulta de Grupos. | Imagem | foto_grupo |
| SQL Grupos Usuários | (Opcional) Define o SQL que será utilizado para obter quais usuários estão nos grupos do Chat (Tabela Relacional). | SQL | SELECT * FROM chat_groups_users |
| Campo ID Grupo | (Opcional) Seleciona o campo que indicará qual Grupo o usuário faz parte. | Inteiro | id_grupo |
| Campo ID Usuário | (Opcional) Seleciona o campo que indicará qual Usuário faz parte do Grupo. | Inteiro | id_usuario |
| Campo Administrador | (Opcional) Seleciona o campo que indicará se o Usuário no Grupo indicado é Administrador. | Lógico | administrador |
| Ocupar Área do Formulário | Ocupa a área toda da aba no formulário em que o chat se encontra (tela cheia). OBS: Não é ideal que existam componentes além do chat na aba quando esta propriedade está ativada pois os componentes podem atrapalhar a visualização do chat, embora isso não seja uma restrição. | Lógico | Não |
| Limite de Caracteres | Define o limite de caracteres das mensagens no Chat. | Inteiro | 5000 |
| Quantidade de Mensagens Carregadas | Especifica a quantidade inicial de mensagens carregadas no chat, por conversa. Ao subir a barra de rolagem ele carrega mais essa quantidade de mensagens e assim sucessivamente. | Inteiro | 15 |
| Imagem Usuário Sem Foto | (Opcional) Imagem que será exibida para usuários que não possuem foto de perfil. Quando não especificado, o Chat irá criar uma automaticamente. | Imagem | Definido através da Galeria de imagens |
| Imagem Grupo Sem Foto | (Opcional) Imagem que será exibida para grupos que não possuem foto. Quando não especificado, o Chat irá criar uma automaticamente. | Imagem | Definido através da Galeria de imagens |
| Tamanho das Fotos | Define o tamanho das fotos dos usuários, em pixels, na lista de usuários do Chat. | Inteiro | 48 |
| Modo de Visualização | Define o modo de visualização do chat: - Automático: Modo automático, calculado pelo tamanho da tela. - Desktop: Layout modo desktop. - Mobile: Layout modo mobile. | Lista | Automático |
| Acessível | Torna o componente acessível ou não no formulário quando não está no modo Incluir: - Todos os modos; - Modo Inclusão/Alteração; | Lista | Todos os Modos |
| Estilo (CSS) | Estilo CSS que será aplicado no componente. | Letras | - |
| Estilo Mobile (CSS) | Estilo CSS que será aplicado no componente quando em modo mobile. | Letras | - |
Eventos:
| Evento | Descrição | Parâmetros Automáticos |
|---|---|---|
| Ao Conectar | Executado quando um usuário conecta no chat. Se o identificador no primeiro parâmetro for o mesmo do usuário corrente, significa que o chat carregou e o usuário está online. | 1. ID do usuário conectado; |
| Ao Desconectar | Executado quando um usuário desconecta do chat. Se o identificador no primeiro parâmetro for o mesmo do usuário corrente, significa que o usuário está com problemas de conexão com o servidor. | 1. ID do usuário desconectado; |
| Ao Enviar Mensagem | Executado quando o usuário envia uma mensagem no chat. Se o usuário enviou a mensagem pelo Enviar Mensagem Para Todos, o fluxo associado à esse evento será executado para cada usuário na lista. | 1. ID da mensagem; 2. ID do usuário remetente; 3. ID do usuário/grupo destinatário; 4. Valor lógico indicando se o ID do 3º parâmetro é um grupo; 5. Conteúdo da mensagem; |
| Ao Receber Mensagem | Executado quando o usuário recebe uma mensagem no chat. | 1. ID da mensagem; 2. ID do usuário remetente; 3. ID do usuário/grupo destinatário; 4. Valor lógico indicando se o ID do 3º parâmetro é um grupo; 5. Conteúdo da mensagem; |
| Ao Enviar Mídia | Executado quando o usuário envia uma mídia no chat. | 1. Caminho Completo do Arquivo; 2. ID da Mídia; 3. MIME Type do Arquivo; 4. Nome do Arquivo; |
| Ao Carregar Mídia | Executado quando uma mídia é exibida/carregada no chat. O retorno do fluxo associado à esse evento pode retornar a URL da mídia que o chat irá utilizar para exibição. Quando não retornado, o chat irá usar a URL padrão. | 1. ID da Mídia; 2. MIME Type do Arquivo; 3. Nome do Arquivo; |
| Ao Abrir Conversa | Executado quando o usuário abre a conversa com outro usuário ou grupo. | 1. ID do usuário/grupo; 2. Valor lógico indicando se o ID do 1º parâmetro é um grupo; |
Funções:
| Nome | Descrição | Parâmetros | Retorno | Observações | Compatibilidade |
|---|---|---|---|---|---|
| Chat - Abrir Conversa com Grupo | Abre a conversa com um grupo. | 1. Componente Chat _(Componente). 2. ID do Grupo (Inteiro). | Não possui. | - | Cliente |
| Chat - Abrir Conversa com Usuário | Abre a conversa com um usuário. | 1. Componente Chat (Componente). 2. ID do Usuário (Inteiro). | Não possui. | - | Cliente |
| Chat - Adicionar Usuários ao Grupo | Adiciona usuários a um grupo (em cache). | 1. Componente Chat (Componente). 2. ID do Grupo (Inteiro). 3. Lista contendo os IDs dos Usuários (Lista). | Não possui. | Essa função utiliza a cache do componente chat. Se o grupo não estiver na lista do chat especificado, a função não irá fazer nada. Alterações em grupos só serão feitas se o chat estiver com a propriedade "Permitir Criação de Grupos" habilitada. O usuário logado deve ser administrador do grupo especificado para poder adicionar/remover usuários. | Cliente |
| Chat - Atualizar Componente | Atualiza os dados em cache do componente (lista de grupos, usuários, etc). | 1. Componente Chat (Componente). | Não possui. | - | Cliente |
| Chat - Enviar Mensagem | Envia uma mensagem para o usuário/grupo ativo no chat. | 1. Componente Chat (Componente). 2. Mensagem (Letras). | Não possui. | - | Cliente |
| Chat - Exportar Conversa | Exporta uma conversa do usuário logado com outro usuário/grupo do chat. | 1. Componente Chat (Componente). 2. ID do Usuário/Grupo (Inteiro). 3. ID do 2º parâmetro é um grupo? (Lógico). 4. Formato de Exportação (pode ser: PDF) (Letras). 5. Ordem de Exportação das Mensagens (0: antigas para novas, 1: novas para antigas) (Inteiro). 6. Layout da página (de 1 a 6, onde 1 é A1 e 6 é A6) (Inteiro). 7. Rotacionar Página? (Lógico). 8. Estilo da Tabela (0: simples, 1: escuro) (Inteiro). 9. Bordas na Tabela? (Lógico). 10. Data Inicial (Data). 11. Data Final (Data). | Não possui. | 1. As datas nos 10º e 11º parâmetros podem ser nulas. Se a data inicial e a data final forem nulas, todo o histórico será exportado. Se somente a data final for nula, todas as mensagens da data inicial até o final serão exportadas. 2. Após o processamento, o download da conversa exportada será iniciado automaticamente. | Cliente |
| Chat - Fechar Conversa Ativa | Fecha a conversa ativa no chat. | 1. Componente Chat (Componente). | Não possui. | - | Cliente |
| Chat - Obter Lista de Usuários do Grupo | Obtém a lista de usuários de um grupo (em cache). | 1. Componente Chat (Componente). 2. ID do Grupo (Inteiro). | Lista contendo os IDs usuários no grupo (Lista). | Essa função utiliza a cache do componente chat. Se o grupo não estiver na lista do chat especificado, a função retornará uma lista vazia. | Cliente |
| Chat - Obter Lista de Usuários Online | Essa função obtém a lista de usuários online. | Não possui. | Lista de lista de usuários (Lista). | 1. A lista retornada contém as informações do usuário, como nome completo, id e última visualização. | Servidor |
| Chat - Obter Nome do Grupo | Obtém o nome de um grupo do chat (em cache). | 1. Componente Chat (Componente). 2. ID do Grupo (Inteiro). | Nome do grupo (Letras). | Essa função utiliza a cache do componente chat. Se o grupo não estiver na lista do chat especificado, a função retornará um texto vazio. O resultado dessa função pode não refletir o nome do grupo em tempo real no banco de dados. Se a cache do chat estiver desatualizada, ele irá apresentar diferenças. Para isso é possível utilizar a função "Chat - Atualizar Componente" para atualizar a cache do chat. | Cliente |
| Chat - Obter Nome do Usuário | Obtém o nome de um usuário do chat (em cache). | 1. Componente Chat (Componente). 2. ID do Usuário (Inteiro). | Nome do usuário (Letras). | Essa função utiliza a cache do componente chat. Se o usuário não estiver na lista do chat especificado, a função retornará um texto vazio. O resultado dessa função pode não refletir o nome do usuário em tempo real no banco de dados. Se a cache do chat estiver desatualizada, ele irá apresentar diferenças. Para isso é possível utilizar a função "Chat - Atualizar Componente" para atualizar a cache do chat. | Cliente |
| Chat - Remover Usuários do Grupo | Remove usuários de um grupo. | 1. Componente Chat (Componente). 2. ID do Grupo (Inteiro). 3. Lista contendo os IDs dos Usuários (Lista). | Não possui. | Essa função utiliza a cache do componente chat. Se o grupo não estiver na lista do chat especificado, a função não irá fazer nada. Alterações em grupos só serão feitas se o chat estiver com a propriedade "Permitir Criação de Grupos" habilitada. O usuário logado deve ser administrador do grupo especificado para poder adicionar/remover usuários. | Cliente |
| Chat - Sair do Grupo | Remove o usuário logado de um grupo ao qual ele faz parte. | 1. Componente Chat (Componente). 2. ID do Grupo (Inteiro). | Não possui. | Essa função utiliza a cache do componente chat. Se o grupo não estiver na lista do chat especificado, a função não irá fazer nada. Alterações em grupos só serão feitas se o chat estiver com a propriedade "Permitir Criação de Grupos" habilitada. | Cliente |
| Chat - Usuário é Administrador do Grupo? | Verifica se um usuário é administrador de um grupo (em cache). | 1. Componente Chat (Componente). 2. ID do Grupo (Inteiro). 3. ID do Usuário (Inteiro). | Valor lógico indicando se o usuário é administrador do grupo (Lógico). | Essa função utiliza a cache do componente chat. Se o grupo não estiver na lista do chat especificado, a função retornará falso. | Cliente |
| Chat - Usuário está Online? | Verifica se um usuário está online no chat (em cache). | 1. Componente Chat (Componente). 2. ID do Usuário (Inteiro). | Valor lógico indicando se o usuário está online (Lógico). | Essa função utiliza a cache do componente chat. Se o usuário não estiver na lista do chat especificado, a função irá retornar falso. | Cliente |
Utilização do CHAT em ambiente HTTPS com Proxy Reverso:
Em ambientes que usam HTTPS com Proxy Reverso (Apache HTTP) é necessário realizar as seguintes alterações no servidor Apache:
- Localizar a configuração do ProxyPass dentro do VirtualHost.
- Inserir a instrução:
RewriteEngine On
RewriteCond
%{REQUEST_URI}^/ [NC] RewriteCond%{HTTP:Upgrade}=websocket [NC] RewriteRule /(.*) ws://ENDERECO_LOCAL_BACKEND:PORTA_LOCAL_SEU_BACKEND/$1[P,L] - Reiniciar o servidor de aplicações. (Apache)
- É importante observar que o módulo de proxy da Apache não suporta WSTunnel no protocolo AJP.
Exemplo:
