🥇 Criação de um Web Chat com Webix e API WebSocket

Uma das APIs mais recentes e interessantes da web moderna é a API de sockets da web. Permite a criação de aplicativos em tempo real, onde os usuários podem colaborar, receber notificações e atualizações de dados sempre que os dados forem alterados. Este artigo mostrará como você pode criar um chat da web simples usando Webix e API de sockets da web.

O bate-papo na web é um “olá, mundo” para aplicativos da web em tempo real. Você pode obter o código final do github.

<b> Lado do servidor </b>

Usaremos a plataforma NodeJS, atualmente a melhor plataforma para aplicativos em tempo real, como servidor. Supondo que você tenha o NodeJS instalado, vamos começar criando uma nova pasta para o aplicativo e instalando a biblioteca Faye e o pacote Connect. Para instalá-los, você pode executar os próximos comandos:

npm install faye
npm install connect

Faye é um sistema de mensagens de publicação-assinatura que pode ser usado com NodeJS e Ruby no lado do servidor. Este sistema simplifica o trabalho com web sockets. “Connect” é um servidor web básico para NodeJS.

Agora vamos criar nosso servidor de chat. Será apenas um arquivo: server.js. O conteúdo deste arquivo é muito simples:

var connect = require('connect'),
faye = require('faye');

//serve static files
var app = connect()

.use (connect.static (“public”))
.use (connect.logger (‘dev’)) .listen (3000);

//init faye
var bayeux = new faye.NodeAdapter({mount: '/faye'});
bayeux.attach(app);

Como você pode ver, criamos um servidor web na porta 3000 que serve arquivos estáticos da pasta “pública”. Depois disso, conectamos o adaptador Faye ao servidor. Tanto para o código do servidor que precisamos.

WebSocket é uma API HTML, então toda a lógica será definida no código do lado do cliente. Vamos iniciar o servidor da web e mudar para o código do lado do cliente:

node server.js

<b> Lado do cliente </b>

Em primeiro lugar, vamos criar uma pasta para os arquivos do lado do cliente e chamá-la de “pública”. Em seguida, adicionaremos um arquivo chamado “index.html” nele.

  <html>
  <head>
  <title></title>
  <script type="text/javascript" src="http://cdn.webix.io/edge/webix.js"></script>
  <link rel="stylesheet" type="text/css" href="http://cdn.webix.io/edge/webix.css">
  </head>
   <body>
  <style type="text/css">
  .webix_list_item span{
   font-weight: bold;
   min-width: 100px;
   float: left;
   text-align: center;
   }
  .webix_list_item span.own{
   color:#4a4;
  }
  </style>
  <script type="text/javascript">
  var user_name = "Guest " + Math.ceil(Math.random()*9999);
  function chat_template(obj){
   return "<span "+(obj.user == user_name ? "class='own'" : "" )+">"+obj.user+"</span>      "+obj.value;
}
function send_message(){
   var text = $$("message").getValue();

   if (text)
       $$("chat").add({
           user:  user_name,
           value: text
       });

   $$("message").setValue("");
   $$("message").focus();
}

webix.ui({ 
   rows:[
       { template:"Webix Based Chat", type:"header" },
       {
           view: "list", id:"chat", gravity:3,
           type:{ height:"auto" },
           template:chat_template
       },
       { cols: [
           { view:"text", id:"message", placeholder:"Type message here", gravity: 3},
           { view:"button", value: "Send", click:send_message }
       ]}
    ], type:"space", margin:2
 });

webix.UIManager.addHotKey("Enter", send_message, $$("message"));
webix.UIManager.setFocus($$("message"));
</script>

</body>
</html>

Bem, vamos analisar quais etapas foram concluídas. Carregamos a biblioteca Webix na página e criamos uma lista de registros de bate-papo e dois controles abaixo dela para adicionar novos registros. Depois de criar a lista, adicionamos um manipulador de teclas de atalho à caixa de mensagem e movemos o foco para esta entrada. Você pode abrir a página em um navegador, digitar algum texto e pressionar a tecla Enter. Assim, uma nova mensagem será adicionada à visualização de lista. Não usamos nenhum código específico de web socket até agora, ou seja, os dados no aplicativo não vão a lugar nenhum fora do navegador.

Para habilitar web sockets, o código acima requer alguns ajustes:

devemos adicionar mais uma tag de script à seção head para carregar a parte do lado do cliente da biblioteca Faye:
<script type = “text / javascript” src = “// localhost: 3000 / faye / client.js”> </script>
devemos iniciar o protocolo de transporte de soquete da web adicionando o próximo bloco de código a ele antes da criação da IU:
// init Faye
webix.proxy.faye.client = new Faye.Client (‘// localhost: 3000 / faye /’);
// definir id de cliente exclusivo
webix.proxy.faye.clientId = webix.uid ();
na configuração da lista Webix devemos definir as urls para carregamento e salvamento de dados. Como estamos usando web sockets, esses não serão urls reais, mas canais de mensagens:
```
{ view:"list", url:"faye-&gt;/data", save: "faye-&gt;/data"
```

É isso. Se você abrir a página em um navegador, não verá nenhuma alteração. No entanto, agora você pode abrir esta página em diferentes navegadores. Todas as mensagens que você está escrevendo em uma janela do navegador serão visíveis na outra janela e vice-versa. Pode parecer não muito impressionante, mas o código que criamos funcionará para qualquer número de navegadores e usuários em qualquer lugar do mundo. Para uso no mundo real, você precisará alterar o “host local” no código para o nome do host real.

<b> Pensamentos posteriores </b>

Como você pode ver, não é muito difícil habilitar a comunicação bidirecional rápida em um navegador. Para sincronizar os dados do componente Webix entre vários usuários, você precisa de apenas algumas linhas de código. A criação de um chat na web é apenas um exemplo, enquanto a mesma técnica pode ser usada para coisas mais úteis, como monitoramento de dados em tempo real ou colaboração multiusuário.

Related Posts