Um aspecto importante no desenvolvimento de um site comercial é a organização opinião com seu público. E, claro, a comunicação direta com os visitantes do site é muito preferível à correspondência por e-mail ou ao preenchimento de formulários de contato. É para esses fins que muitos aplicativos foram desenvolvidos para que os usuários se comuniquem por meio de mensagens de texto, áudio ou vídeo.

Os scripts para organização de chats, que queremos apresentar-lhe, podem ser facilmente integrados no seu site, o que elevará o nível de comunicação entre os visitantes do site e com um consultor online de um site corporativo ou loja online a um novo patamar. Vamos fazer uma reserva agora mesmo - todos os scripts coletados aqui pertencem à classe premium, ou seja, não é grátis. No entanto, o seu custo está dentro de limites bastante razoáveis ​​​​e não terá um impacto perceptível no seu orçamento. Em breve publicaremos uma seleção de scripts gratuitos para criação de chat. Siga-nos em redes sociais ou no RSS para não perder nenhuma postagem.

PHP Flat Visual Chat Este chat exclusivo para organização de uma consultoria online, além de sua finalidade principal, pode servir como uma espécie de guia para seu site. Durante a comunicação, você pode destacar visualmente um ou outro elemento da página do site e mostrá-lo ao usuário. Este produto autônomo possui seu próprio painel independente para gerenciamento de contas de operadoras.
Custo: $ 16

ShoutCloudShouldCloud é um chat PHP/AJAX flexível e rico em recursos que é extremamente fácil de integrar ao seu site em poucos minutos. Não requer um banco de dados MySQL e cria automaticamente os arquivos necessários para o trabalho. GUI automaticamente ao tamanho do contêiner em que o chat está localizado.
Custo: $ 8

Chat Plus ProChat Plus PRO é um poderoso script de bate-papo PHP/AJAX com uma interface adaptável. Com este maravilhoso produto, seus visitantes passarão mais de uma noite sem dormir em conversas descontraídas. É permitido o uso de imagens, links para vídeos do YouTube ou outros sites nas mensagens. São suportados perfis de usuário, nos quais podem colocar diversas informações pessoais. É possível criar “salas” separadas com base em interesses e publicá-las em sites diferentes.
Custo: $ 24

Social Meet ScriptO Social Meet Script é feito no chamado estilo Tinder - um aplicativo para encontrar namoro e comunicação. Ao abrir o chat, você pode selecionar o usuário de sua preferência e, caso ele retribua seus sentimentos, começar a se comunicar. O Social Meet Script possui bate-papo integrado, sistema de geolocalização e associação VIP.
Custo: $ 23

PHP Chat com WebClientEngage Visitor Chat é um script de consultoria online altamente personalizável. Interface de administração simples e conveniente. Uma característica notável deste chat é a presença de um cliente Windows - você poderá ver mensagens recebidas na área de notificação do Desktop e comunique-se com os clientes diretamente do Windows, sem sequer ir ao painel administrativo do site.
Custo: $ 32

Quick PHP ChatQuick PHP Chat é um script fácil de usar para organizar bate-papos em seu site. Possui 10 esquemas de cores integrados para personalização aparência conforme esquema de cores Seu site. As funções administrativas permitem gerir contas de utilizadores, nomeadamente, “banir” utilizadores individuais, bem como informá-los do motivo do “ban”.
Custo: $ 7

PHP Support Center e Live ChatPHP Support Center é um sistema de gerenciamento de suporte técnico em estilo minimalista. Focado na organização de um serviço de suporte técnico, permite atribuir operadores e administradores a empresas, clientes, departamentos e utilizadores individuais. É possível usar o editor mailchip para dar uma aparência única às suas listas de e-mail.
Custo: $ 32

Chat de suporte ao vivo PHPChat ao vivo do PHP - aplicativo independente consultor online, que pode ser integrado em qualquer site. Ao contrário dos serviços que fornecem serviços de chat, você tem total liberdade para usá-lo. Sem taxas mensais - pague uma vez e use o quanto quiser!
Custo: $ 19

Boom ChatBoomchat tem uma interface de usuário amigável e uma série de recursos exclusivos. A interface completa garante facilidade de uso em qualquer dispositivo, seja computador, tablet ou smartphone.
Custo: $ 18

ReadyChat Um novo produto do desenvolvedor DesignSkate. Melhorou significativamente em comparação com o desenvolvimento anterior do “moChat”: mais otimizado e visualmente agradável tanto para o usuário quanto para o administrador.
Custo: $ 15

Simple Chat Script SimpleChat simples e leve pode ser integrado em qualquer página PHP. Tem HTML

Como sempre, o primeiro passo é sobre a marcação HTML. Nosso documento é construído em HTML5, o que nos permite usar uma sintaxe nova e mais curta DOCTYPE e omita o atributo tipo em tags roteiro.

index.html

Fazendo bate-papo na web AJAX com usando PHP, MySQL e jQuery | Demonstração de um site web Fazendo chat na web AJAX usando PHP e jQuery

Para otimizar o carregamento, os estilos são incluídos nas seções cabeça, e os arquivos JavaScript são incluídos na parte inferior do documento, antes da tag de fechamento corpo.

Para organizar uma área rolável com linhas de chat, usamos o plugin jScrollPane. Este plugin possui estilos próprios, que estão incluídos nas seções cabeça.

A marcação de bate-papo consiste em quatro elementos principais divisão- painel superior, contêiner de bate-papo, contêiner de usuário e painel inferior. Durar divisão contém formulários para cadastro de usuários e envio de mensagens. O formulário de envio de mensagens fica oculto por padrão e só é exibido se o usuário tiver efetuado login com sucesso no sistema de chat.

Em seguida, incluímos os arquivos JavaScript: a biblioteca jQuery, o plugin mousewheel (usado no jScrollPane), o plugin jScrollPane e nosso arquivo script.js.

Esquema de banco de dados

Antes de passar para a parte do PHP, precisamos primeiro dar uma olhada em como os dados do chat são organizados em um banco de dados MySQL.

Para nosso script usamos duas tabelas. Na mesa webchat_users informações sobre os participantes do bate-papo são armazenadas. A tabela possui campos eu ia , nome, gravatar E última_atividade. Campo nome definido como único, evitando assim que nomes duplicados sejam usados ​​no chat.

Outra propriedade útil de um campo com índice únicoé que a solicitação de inserção falhará com um erro e a propriedade linhas_inseridas O objeto MySQLi será definido como 0 se você tentar inserir linhas duplicadas. Em uma aula PHP Bater papo esta propriedade será usado ativamente.

Campo última_atividade contém o valor do tempo. O valor é atualizado a cada 15 segundos para cada usuário. O campo também é definido como um índice, que permite remover rapidamente usuários inativos (o valor no campo última_atividade mais de 15 significa que o usuário não está mais visualizando a janela de bate-papo).

Mesa webchat_lines contém entradas de bate-papo. Observe que também armazenamos o nome do autor e o gravatar aqui. Esta duplicação permite-nos evitar a utilização de uma directiva dispendiosa juntar ao solicitar as entradas mais recentes - as usadas com mais frequência em nosso aplicativo.

As definições de tabela estão disponíveis no arquivo Tables.sql nas fontes. Você pode usar texto de consulta para criar tabelas. Além disso, ao instalar o chat em seu host, você precisa alterar as configurações em ajax.php para seus dados para conexão com o banco de dados MySQL.

PHP

Agora que temos o banco de dados, vamos discutir o script PHP que controla o chat.

O primeiro arquivo que veremos é ajax.php. Ele processa solicitações AJAX do lado do cliente do jQuery e gera dados no formato JSON.

ajax.php

/* Configuração do banco de dados. Adicione seus dados */ $dbOptions = array("db_host" => "", "db_user" => "", "db_pass" => "", "db_name" => ""); /* Fim da seção de configuração do banco de dados */ error_reporting(E_ALL ^ ​​​​E_NOTICE); requer "classes/DB.class.php"; requer "classes/Chat.class.php"; requer "classes/ChatBase.class.php"; requer "classes/ChatLine.class.php"; requer "classes/ChatUser.class.php"; nome_sessão("webchat"); sessão_start(); if(get_magic_quotes_gpc())( // Remover barras extras array_walk_recursive($_GET,create_function("&$v,$k","$v = stripslashes($v);")); array_walk_recursive($_POST,create_function(" &$v,$k","$v = stripslashes($v);")); ) try( // Conecta-se ao banco de dados DB::init($dbOptions); $response = array(); // Processando ações suportadas: switch($_GET["action"])( case "login": $response = Chat::login($_POST["name"],$_POST["email"]); break; case "checkLogged" : $response = Chat::checkLogged(); break case "logout": $response = Chat::logout(); case "submitChat": $response = Chat::submitChat($_POST["chatText"] ); break; case "getUsers": $response = Chat::getUsers(); case "getChats": $response = Chat::getChats($_GET["lastID"]); ) echo json_encode($response) catch(Exception $e)( die(json_encode(array("error" => $e->getMessage())));

Por conveniência, o operador é usado trocar para definir as ações que o script manipula. Ele implementa subsistemas de chat, funcionalidade de login/logout e ações para consultar uma lista de réplicas e usuários online.

A saída está na forma de mensagens JSON (que podem ser convenientemente processadas com usando jQuery), os erros geram exceções. Operador trocar distribui todas as solicitações para os métodos estáticos correspondentes da classe Bater papo, que será discutido posteriormente nesta seção.

DB.class.php

Classe DB ( private static $instance; private $MySQLi; private function __construct(array $dbOptions)( $this->MySQLi = @ new mysqli($dbOptions["db_host"], $dbOptions["db_user"], $dbOptions[ "db_pass"], $dbOptions["db_name"]); if (mysqli_connect_errno()) ( throw new Exception("Erro no banco de dados."); ) $this->MySQLi->set_charset("utf8" ) função estática pública init (array $dbOptions)( if(self::$instance instanceof self)( return false; ) self::$instance = new self($dbOptions); ) public static function getMySQLiObject())( return self::$ instance- >MySQLi; ) função estática pública consulta($q)( return self::$instance->MySQLi->query($q); ) função estática pública esc($str)( return self::$instance-> MySQLi- >real_escape_string(htmlspecialchars($str) )

A classe DB é um gerenciador de banco de dados. O construtor é declarado como privado portanto, o objeto não pode ser criado fora da classe e a inicialização só é possível a partir do método init() estático. Ele pega uma matriz de parâmetros de conexão MySQL e cria uma instância da classe, que está contida na variável estática self::$instance . Isso garante que haja apenas uma conexão com o banco de dados por vez.

O restante da classe implementa a comunicação com o banco de dados, que é baseada no método estático query().

ChatBase.class.php

/* Classe base que é usada pelas classes ChatLine e ChatUser */ class ChatBase( // Este construtor é usado por todas as classes de chat: public function __construct(array $options)( foreach($options as $k=>$v) ( if(isset ($isto->$k))( $isto->$k = $v; ) ) ) )

Esta é uma classe base simples. Seu principal objetivo é definir um construtor que receba um array de parâmetros, mas armazene apenas aqueles definidos na classe.

ChatLine.class.php

/* Linha de bate-papo */ class ChatLine estende ChatBase( protected $text = "", $author = "", $gravatar = ""; public function save())( DB::query(" INSERT INTO webchat_lines (author, gravatar , texto) VALORES ("".DB::esc($this->author)."", "".DB::esc($this->gravatar)."", "".DB::esc($ this ->text)."")"); // Retorna um objeto MySQLi da classe DB return DB::getMySQLiObject(); ) )

Aula Linha de bate-papoé uma classe derivada de Base de bate-papo. Um objeto desta classe pode ser facilmente criado passando um array para o construtor com texto, nome do autor e elemento gravatar. Propriedade de classe gravatar contém o hash md5 do endereço de e-mail. É necessário obter um avatar de usuário correspondente a um endereço de e-mail do site gravatar.com.

Esta classe também define um método salvar, que armazena o objeto no banco de dados. Como o método retorna um objeto MySQLi contido na classe DB, você pode verificar se a operação foi concluída com êxito usando a propriedade impact_rows.

ChatUser.class.php

Classe ChatUser estende ChatBase( protected $name = "", $gravatar = ""; public function save())( DB::query(" INSERT INTO webchat_users (name, gravatar) VALUES ("".DB::esc($ this ->nome)."", "".DB::esc($this->gravatar)."")"); return DB::getMySQLiObject(); ) public function update())( DB::query (" INSERT INTO webchat_users (nome, gravatar) VALUES ("".DB::esc($this->name)."", "".DB::esc($this->gravatar)."") ON DUPLICATE ATUALIZAÇÃO DE CHAVE last_activity = AGORA()"); ) )

Uma classe tem propriedades nome E gravatar(observe o modificador de acesso protegido- as propriedades estão disponíveis na classe ChatBase, e podemos definir seus valores no construtor).

A classe define um método update() que atualiza o campo última_atividade o valor da hora atual. Isso mostra que o usuário mantém a janela de chat aberta e deve ser contabilizado como autor online.

Chat.class.php - Parte 1

/* A classe Chat contém métodos estáticos públicos que são usados ​​em ajax.php */ class Chat( public static function login($name,$email)( if(!$name || !$email)( throw new Exception(" Preencha todos os campos obrigatórios."); ) if(!filter_input(INPUT_POST,"email",FILTER_VALIDATE_EMAIL))( throw new Exception("Endereço de e-mail inválido."); ) // Preparando cache do gravatar: $gravatar = md5(strtolower (trim ($email))); $user = new ChatUser(array("name" => $name, "gravatar" => $gravatar)); // O método save retorna um objeto MySQLi if($user-> save()- >affected_rows != 1)( throw new Exception("O nome fornecido está em uso."); ) $_SESSION["user"] = array("name" => $name, "gravatar" => $gravatar); "status" => 1, "name" => $name, "gravatar" => Chat::gravatarFromHash($gravatar) ) função estática pública checkLogged())( $response = array("logged" = > falso) ; if($_SESSION["usuário"]["nome"])( $response["logged"] = true; $response["loggedAs"] = array("nome" => $_SESSION["usuário "][ "nome"], "gravatar" => Chat::gravatarFromHash($_SESSION["user"]["gravatar"]));

) retornar $ resposta; trocar) função estática pública logout())( DB::query("DELETE FROM webchat_users WHERE name = "".DB::esc($_SESSION["user"]["name"])."""); $_SESSION = array(); unset($_SESSION); return array("status" => 1);

Este código faz todo o trabalho. Na operadora gravatar no arquivo ajax.php foram selecionadas ações que correspondiam aos métodos desta classe. Cada um desses métodos retorna um array, que é então convertido em um objeto JSON usando a função json_encode() (isso acontece na parte inferior do arquivo ajax.php). Quando um usuário faz login, seu nome e armazenados como elementos de array

$_SESSION

Função estática pública submitChat($chatText)( if(!$_SESSION["user"])( throw new Exception("Você saiu do chat"); ) if(!$chatText)( throw new Exception("Você não digitou uma mensagem ."); ) $chat = new ChatLine(array("author" => $_SESSION["user"]["nome"], "gravatar" => $_SESSION["user"]["gravatar" ], " text" => $chatText)); // O método save retorna um objeto MySQLi $insertID = $chat->save()->insert_id; $insertID); ) função estática pública getUsers())( if($_SESSION["usuário"]["nome"])( $usuário = new ChatUser(array("nome" => $_SESSION["usuário"][ "name"])) ; $user->update() ) // Exclui entradas de chat com mais de 5 minutos e usuários inativos por 30 segundos DB::query("DELETE FROM webchat_lines WHERE ts< SUBTIME(NOW(),"0:5:0")"); DB::query("DELETE FROM webchat_users WHERE last_activity < SUBTIME(NOW(),"0:0:30")"); $result = DB::query("SELECT * FROM webchat_users ORDER BY name ASC LIMIT 18"); $users = array(); while($user = $result->fetch_object())( $user->gravatar = Chat::gravatarFromHash($user->gravatar,30); $users = $user; ) return array("users" => $users, "total" => DB: :query("SELECT COUNT(*) as cnt FROM webchat_users")->fetch_object()->cnt);

) função estática pública getChats($lastID)( $lastID = (int)$lastID; $result = DB::query("SELECT * FROM webchat_lines WHERE id > ".$lastID." ORDER BY id ASC"); $chats = array(); while($chat = $result->fetch_object())( // Retorna o horário de criação da mensagem no formato GMT (UTC): $chat->time = array("hours" => gmdate("H " ,strtotime($chat->ts)), "minutos" => gmdate("i",strtotime($chat->ts))); $chat->gravatar = Chat::gravatarFromHash($chat->gravatar ) ; $chats = $chat; ) return array("chats" => $chats); função estática pública gravatarFromHash($hash, $size=23)( return "http://www.gravatar.com/avatar/ " .$hash."?size=".$size."&default=".urlencode("http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?size=".$size) ) jQuery envia solicitações getUsuários() a cada 15 segundos. Usamos esse fato para remover réplicas com mais de 5 minutos e usuários inativos do banco de dados. Seria potencialmente possível excluir dados de registro em obterChats

, mas essa solicitação ocorre a cada segundo e a carga adicional pode afetar o desempenho do aplicativo. O método getChats() usa a função gmdate para exibir a hora no formato GMT. Do lado do cliente usamos as horas e minutos para definir o Objeto JavaScript

e, como resultado, a hora é exibida de acordo com o fuso horário do usuário.

A comunicação ao vivo no site não deixará o visitante indiferente, pois você sempre pode escrever para o chat, e eles vão te responder algo, algo que você raramente vê nos sites esta função, os desenvolvedores começaram a esquecê-lo, referindo-se mais a fóruns e comentários. Mas se for possível instalar um chat no site, então não há necessidade de perder esta oportunidade, os usuários ficarão apenas gratos. Nesta lição veremos como criar um chat muito interessante para um site, utilizando serviços de avatar, o que dará uma forma mais agradável à comunicação. Para criar esse chat AJAX usaremos PHP, MySQL e jQuery. Primeiro, veremos a marcação HTML, que é construída de acordo com HTML5, que permite que a nova sintaxe DOCTYPE mais curta seja usada e o atributo type seja omitido das tags de script.
index.html

Como criar um chat para um site com usando PHP| Demonstração para o site RUDEBOX

Para organizar uma área rolável com linhas de chat, usamos o plugin jScrollPane. Este plugin possui estilos próprios, que estão incluídos nas seções principais.
O layout do chat consiste em quatro divs principais: a barra superior, o contêiner de bate-papo, o contêiner de usuários e a barra inferior. A última div contém formulários para cadastro de usuários e envio de mensagens. O formulário de envio de mensagens fica oculto por padrão e só é exibido se o usuário tiver efetuado login com sucesso no sistema de chat.
Observação! As definições de tabela estão disponíveis no arquivo Tables.sql nas fontes. Você pode usar texto de consulta para criar tabelas. Além disso, ao instalar o chat em seu host, você precisa alterar as configurações em ajax.php para seus dados para conexão com o banco de dados MySQL.
Depois de criar a tabela e fazer tudo o que está dito na nota, vamos discutir o script PHP que controla o chat. O primeiro arquivo que veremos é ajax.php. Ele processa solicitações AJAX do lado do cliente do jQuery e gera dados no formato JSON.
ajax.php

/* Configuração do banco de dados. Adicione seus dados */ $dbOptions = array("db_host" => "", "db_user" => "", "db_pass" => "", "db_name" => ""); /* Fim da seção de configuração do banco de dados */ error_reporting(E_ALL ^ ​​​​E_NOTICE); requer "classes/DB.class.php"; requer "classes/Chat.class.php"; requer "classes/ChatBase.class.php"; requer "classes/ChatLine.class.php"; requer "classes/ChatUser.class.php"; nome_sessão("webchat"); sessão_start(); if(get_magic_quotes_gpc())( // Remover barras extras array_walk_recursive($_GET,create_function("&$v,$k","$v = stripslashes($v);")); array_walk_recursive($_POST,create_function(" &$v,$k","$v = stripslashes($v);")); ) try( // Conecta-se ao banco de dados DB::init($dbOptions); $response = array(); // Processando ações suportadas: switch($_GET["action"])( case "login": $response = Chat::login($_POST["name"],$_POST["email"]); break; case "checkLogged" : $response = Chat::checkLogged(); break case "logout": $response = Chat::logout(); case "submitChat": $response = Chat::submitChat($_POST["chatText"] ); break; case "getUsers": $response = Chat::getUsers(); case "getChats": $response = Chat::getChats($_GET["lastID"]); ) echo json_encode($response) catch(Exception $e)( die(json_encode(array("error" => $e->getMessage())));

Por conveniência, uma instrução switch é usada para definir as ações que o script processa. Ele implementa subsistemas de chat, funcionalidade de login/logout e ações para consultar uma lista de réplicas e usuários online.
A saída está na forma de mensagens JSON (que podem ser facilmente processadas usando jQuery), erros geram exceções. A instrução switch distribui todas as solicitações aos métodos estáticos correspondentes da classe Chat, que serão discutidos posteriormente nesta seção.
DB.class.php

Banco de dados ( private static $instance; private $MySQLi; private function __construct(array $dbOptions)( $this->MySQLi = @ new mysqli($dbOptions["db_host"], $dbOptions["db_user"], $dbOptions[" db_pass"], $dbOptions["db_name"]); if (mysqli_connect_errno()) ( throw new Exception("Erro no banco de dados."); ) $this->MySQLi->set_charset("utf8"); ) função estática pública init(array $dbOptions)( if(self::$instance instanceof self)( return false; ) self::$instance = new self($dbOptions); ) public static function getMySQLiObject())( return self::$instance ->MySQLi; ) função estática pública consulta($q)( return self::$instance->MySQLi->query($q); ) função estática pública esc($str)( return self::$instance->MySQLi ->real_escape_string(htmlspecialchars($str));

A classe DB é um gerenciador de banco de dados. O construtor é declarado privado, portanto o objeto não pode ser criado fora da classe e a inicialização só é possível a partir do método init() estático. Ele pega uma matriz de parâmetros de conexão MySQL e cria uma instância da classe, que está contida na variável estática self::$instance. Isso garante que haja apenas uma conexão com o banco de dados por vez.
O restante da classe implementa a comunicação com o banco de dados, que é baseada no método estático query().
ChatBase.class.php

/* Classe base que é usada pelas classes ChatLine e ChatUser */ class ChatBase( // Este construtor é usado por todas as classes de chat: public function __construct(array $options)( foreach($options as $k=>$v) ( if(isset ($isto->$k))( $isto->$k = $v; ) ) ) )

Esta é uma classe base simples. Seu principal objetivo é definir um construtor que receba um array de parâmetros, mas armazene apenas aqueles definidos na classe.
ChatLine.class.php

/* Linha de bate-papo */ class ChatLine estende ChatBase( protected $text = "", $author = "", $gravatar = ""; public function save())( DB::query(" INSERT INTO webchat_lines (author, gravatar , texto) VALORES ("".DB::esc($this->author)."", "".DB::esc($this->gravatar)."", "".DB::esc($ this ->text)."")"); // Retorna um objeto MySQLi da classe DB return DB::getMySQLiObject(); ) )

A classe ChatLine é uma classe derivada de ChatBase. Um objeto desta classe pode ser facilmente criado passando um array de texto, o nome do autor e um elemento gravatar para o construtor. A propriedade da classe gravatar contém o hash md5 do endereço de e-mail. É necessário obter um avatar de usuário correspondente a um endereço de e-mail do site gravatar.com.
Esta classe também define um método save que salva o objeto no banco de dados. Como o método retorna um objeto MySQLi contido na classe DB, você pode verificar se a operação foi concluída com sucesso usando a propriedade impact_rows.
ChatUser.class.php

Classe ChatUser estende ChatBase( protected $name = "", $gravatar = ""; public function save())( DB::query(" INSERT INTO webchat_users (name, gravatar) VALUES ("".DB::esc($ this ->nome)."", "".DB::esc($this->gravatar)."")"); return DB::getMySQLiObject(); ) public function update())( DB::query (" INSERT INTO webchat_users (nome, gravatar) VALUES ("".DB::esc($this->name)."", "".DB::esc($this->gravatar)."") ON DUPLICATE ATUALIZAÇÃO DE CHAVE last_activity = AGORA()"); ) )

A classe possui propriedades nome e gravatar (observe o modificador de acesso protegido - as propriedades estão disponíveis na classe ChatBase e podemos definir seus valores no construtor).
A classe define um método update() que atualiza o campo last_activity com o valor da hora atual. Isso mostra que o usuário mantém a janela de chat aberta e deve ser contabilizado como autor online.
Bate-papo.class.php

/* A classe Chat contém métodos estáticos públicos que são usados ​​em ajax.php */ class Chat( public static function login($name,$email)( if(!$name || !$email)( throw new Exception(" Preencha todos os campos obrigatórios."); ) if(!filter_input(INPUT_POST,"email",FILTER_VALIDATE_EMAIL))( throw new Exception("Endereço de e-mail inválido."); ) // Preparando cache do gravatar: $gravatar = md5(strtolower (trim ($email))); $user = new ChatUser(array("name" => $name, "gravatar" => $gravatar)); // O método save retorna um objeto MySQLi if($user-> save()- >affected_rows != 1)( throw new Exception("O nome fornecido está em uso."); ) $_SESSION["user"] = array("name" => $name, "gravatar" => $gravatar); "status" => 1, "name" => $name, "gravatar" => Chat::gravatarFromHash($gravatar) ) função estática pública checkLogged())( $response = array("logged" = > falso) ; if($_SESSION["usuário"]["nome"])( $response["logged"] = true; $response["loggedAs"] = array("nome" => $_SESSION["usuário "][ "nome"], "gravatar" => Chat::gravatarFromHash($_SESSION["user"]["gravatar"]));

Este código faz todo o trabalho. A instrução switch no arquivo ajax.php selecionou ações que correspondiam aos métodos desta classe. Cada um desses métodos retorna um array, que é então convertido em um objeto JSON usando a função json_encode() (isso acontece na parte inferior do arquivo ajax.php).
Quando um usuário faz login, seu nome e gravatar são armazenados como elementos do array $_SESSION e ficam disponíveis em solicitações subsequentes.
Bate-papo.class.php

Função estática pública submitChat($chatText)( if(!$_SESSION["user"])( throw new Exception("Você saiu do chat"); ) if(!$chatText)( throw new Exception("Você não digitou uma mensagem ."); ) $chat = new ChatLine(array("author" => $_SESSION["user"]["nome"], "gravatar" => $_SESSION["user"]["gravatar" ], " text" => $chatText)); // O método save retorna um objeto MySQLi $insertID = $chat->save()->insert_id; $insertID); ) função estática pública getUsers())( if($_SESSION["usuário"]["nome"])( $usuário = new ChatUser(array("nome" => $_SESSION["usuário"][ "name"])) ; $user->update() ) // Exclui entradas de chat com mais de 5 minutos e usuários inativos por 30 segundos DB::query("DELETE FROM webchat_lines WHERE ts< SUBTIME(NOW(),"0:5:0")"); DB::query("DELETE FROM webchat_users WHERE last_activity < SUBTIME(NOW(),"0:0:30")"); $result = DB::query("SELECT * FROM webchat_users ORDER BY name ASC LIMIT 18"); $users = array(); while($user = $result->fetch_object())( $user->gravatar = Chat::gravatarFromHash($user->gravatar,30); $users = $user; ) return array("users" => $users, "total" => DB: :query("SELECT COUNT(*) as cnt FROM webchat_users")->fetch_object()->cnt);

O método getChats() usa a função gmdate para exibir a hora no formato GMT. Do lado do cliente, utilizamos os valores de hora e minuto para definir em um objeto JavaScript e, como resultado, a hora é exibida de acordo com o fuso horário do usuário.
Os estilos de bate-papo estão contidos no arquivo chat.css. Os estilos são independentes do resto da página e podem ser facilmente integrados a um site existente. Você só precisa incluir marcação HTML, estilos e arquivos JavaScript.
chat.css

/* Contêiner principal do chat */ #chatContainer( width:510px; margin:100px auto; position:relative; ) /* Barra superior */ #chatTopBar( height:40px; background:url("../img/solid_gray.jpg ") repetir-x #d0d0d0; borda:1px sólido #fff; margem inferior:15px; posição:relativa; cor:#777; sombra de texto:1px 1px 0 #FFFFFF; ) #chatTopBar .name( posição:absolute; topo:10px; esquerda:40px; ) #chatTopBar img( esquerda:9px; posição:absoluta; topo:8px; ) /* Bate-papo */ #chatLineHolder( altura:360px; largura:350px; margem-inferior:20px; ) . chat( background:url("../img/chat_line_bg.jpg") repetir-x #d5d5d5; altura mínima:24px; preenchimento:6px; borda:1px sólido #FFFFFF; preenchimento:8px 6px 4px 37px; posição:relativo ; margin:0 10px 10px 0 ) .chat:last-child( margin-bottom:0; ) .chat span( color:#777777; text-shadow:1px 1px 0 #FFFFFF; font-size:12px; ) . chat .text( color:#444444; display:inline-block; font-size:15px; overflow:hidden; vertical-align:top; width:190px; ) .chat .gravatar( background:url("http:// www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?size=23") sem repetição;

Tudo começa com a definição dos estilos da div #chatContainer. Ele é centralizado horizontalmente usando a propriedade margin:100px auto; . Esta div é dividida em barra superior, área de chat, área de usuários e barra inferior.
O painel superior exibe informações sobre o usuário registrado. Ele obtém posicionamento relativo para que o avatar, o nome e o botão de logout sejam posicionados de acordo.
Isto é seguido por uma div que contém todas as linhas de chat - #chatLineHolder. Esta div tem altura e largura fixas e, na parte jQuery deste tutorial, usamos o plugin jScrollPane para transformá-la em uma área de conteúdo rolável com um controle deslizante lateral.
chat.css

/* Área do usuário */ #chatUsers( background-color:#202020; border:1px solid #111111; height:360px; position:absolute; right:0; top:56px; width:150px; ) #chatUsers .user( background :url("http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?size=30") sem repetição 1px 1px #444444; borda:1px sólido #111111; :32px; ) #chatUsers .user img( border:1px solid #444444; display:block; visibilidade:hidden; ) /* Barra inferior */ #chatBottomBar( background:url("../img/solid_gray .jpg") repetir-x #d0d0d0; posição:relativo; preenchimento:10px; borda:10px sólido transparente; borda -cor inferior :#eeeeee; topo:-20px; esquerda:20px ) #chatContainer input( background:url("../img/input_bg.jpg") repetir-x #dcdcdc; altura:26px; fonte:13px /26px Calibri, Arial, sem serifa; borda:1px sólida; cor da borda:#c1c1c1 #eee #eee #c1c1c1;

preenchimento:0 5px;
margem direita: 5px; largura:185px; esboço: nenhum; ) #submitForm( display:none; )
chat.css

/* Alterar estilos padrão para jScrollPane */ .jspVerticalBar( background:none; width:20px; ) .jspTrack( background-color:#202020; border:1px solid #111111; width:3px; right:-10px; ) . ( background:url("../img/slider.png") no-repeat; width:20px; left:-9px; height:20px !important; margin-top:-5px; ) .jspDrag:hover( background - position:left bottom ) /* Estilos adicionais */ a.logoutButton( background-color:#bbb; border:1px solid #eee !important; color:#FFFFFF !important; font-size:12px; padding:5px 9px ; posição: absoluto; sombra de texto: 1px 1px 0 #888; -moz-box-shadow:0 0 7px #888 inserção; :1px 1px 0 #888; -moz-box-shadow:0 0 7px #666 inserção; -webkit-box-shadow: 0 0 7px #666 inserção; blueButton( background:url("../img/button_blue.png") no-repeat; border:none !important; color :#516D7F !important;

display: bloco embutido;
tamanho da fonte: 13px;

• altura:29px;
• alinhamento de texto:centro;
• sombra de texto:1px 1px 0 rgba(255, 255, 255, 0,4);
• Verificando novas entradas: uma solicitação GET é gerada a cada segundo. Esta operação pode levar a uma carga muito elevada no servidor web, por isso o script é otimizado e, dependendo da atividade do chat, o período de geração da solicitação pode ser aumentado para 15 segundos.

Definimos funções wrapper personalizadas para as funções jQuery AJAX $.get e $.post que ajudam a preencher parâmetros longos para gerar uma solicitação.
Além disso, todo o código do chat é organizado em um objeto de chat. Ele contém vários métodos convenientes.
script.js

$(document).ready(function())( // Execute o método init quando o documento estiver pronto: chat.init(); )); var chat = ( // os dados contêm variáveis ​​para uso em classes: data: ( lastID: 0, noActivity: 0 ), // Init vincula manipuladores de eventos e define temporizadores: init: function())( // Use o plugin jQuery defaultText ativado abaixo: $("#name").defaultText("Nickname"); $("#email").defaultText("Email (usado pelo Gravatar)"); // Converta o div #chatLineHolder para jScrollPane, // salva. a API do plugin em chat.data: chat.data.jspAPI = $("#chatLineHolder").jScrollPane(( verticalDragMinHeight: 12, verticalDragMaxHeight: 12 )).data("jsp"); // vários formulários de envio: var working = false; // Cadastra uma pessoa no chat: $("#loginForm").submit(function())( if(working) return false; working = true; // Use nosso Função tzPOST // (definida abaixo): $.tzPOST("login",$(this).serialize(),function(r)(working = false; if(r.error)( chat.displayError(r.error) ; ) else chat.login( r.nome,r.gravatar);

));
retornar falso;

// Envia os dados da nova linha de chat: $("#submitForm").submit(function())( var text = $("#chatText").val(); if(text.length == 0)( return false;) if(working) return false; working = true; // Gere um ID temporário para o chat: var tempID = "t"+Math.round(Math.random()*1000000), params = ( id: tempID , autor: chat .data.name, gravatar: chat.data.gravatar, text: text.replace(//g,">") ); // Use o método addChatLine para adicionar chat à tela // imediatamente, sem aguardando a conclusão da solicitação AJAX: chat.addChatLine($.extend((),params)); // Use o método tzPOST para enviar o chat // por meio de uma solicitação AJAX POST: $.tzPOST("submitChat",$ (this).serialize(),function( r)(working = false; $("#chatText").val(""); $("div.chat-"+tempID).remove(); params[" id"] = r.insertID; chat. addChatLine($.extend((),params)); return false;

// Desativa o usuário: $("a.logoutButton").live("click",function())( $("#chatTopBar > span").fadeOut(function())( $(this).remove( ); ) ); $("#submitForm").fadeOut(function())( $("#loginForm").fadeIn(); )); // Verifica o status da conexão do usuário (atualização do navegador) $.tzGET("checkLogged",function(r)( if(r.logged)( chat.login(r.loggedAs.name,r.loggedAs.gravatar); ) ) ) ;// Funções de tempo limite autoexecutáveis ​​(function getChatsTimeoutFunction())( chat.getChats(getChatsTimeoutFunction); ))();
(função getUsersTimeoutFunction())( chat.getUsers(getUsersTimeoutFunction); ))(); ),
retornar falso;

// O método de login oculta os dados de login do usuário // e exibe o formulário de entrada da mensagem login: function(name,gravatar)( chat.data.name = name; chat.data.gravatar = gravatar; $("#chatTopBar") .html( chat.render("loginTopBar",chat.data)); $("#loginForm").fadeOut(function())( $("#submitForm").fadeIn(); $("#chatText" ).focus() ), // O método render gera marcação HTML // que é necessária para outros métodos: render: function(template,params)( var arr = ; switch(template)( case "loginTopBar" : arr = [ " ", "",params.name, "Exit"]; break; case "chatLine": arr = [ " ","",params.author, ":",params.text,"",params.time,""]; break; case "usuário": arr = [ " " ]; break; ) // Um ​​único método de junção para um array é // mais rápido que várias mesclagens de strings return arr.join(""); ),

Nesta parte do código, o método render() requer atenção. Ele constrói um modelo dependendo do parâmetro do modelo. O método então cria e retorna o HTML solicitado, incorporando os valores do segundo parâmetro do objeto params.
retornar falso;

// O método addChatLine adiciona uma linha de chat à página addChatLine: function(params)( // Todas as leituras de tempo são exibidas no formato de fuso horário do usuário var d = new Date(); if(params.time) ( // PHP retorna a hora no formato UTC (GMT). Usamos isso para gerar um objeto de data // e então produzi-lo no formato de fuso horário do usuário // JavaScript o converte para nós.< 10 ? "0" : "") + d.getHours()+":"+ (d.getMinutes() < 10 ? "0":"") + d.getMinutes(); var markup = chat.render("chatLine",params), exists = $("#chatLineHolder .chat-"+params.id); if(exists.length){ exists.remove(); } if(!chat.data.lastID){ // Если это первая запись в чате, удаляем // параграф с сообщением о том, что еще ничего не написано: $("#chatLineHolder p").remove(); } // Если это не временная строка чата: if(params.id.toString().charAt(0) != "t"){ var previous = $("#chatLineHolder .chat-"+(+params.id - 1)); if(previous.length){ previous.after(markup); } else chat.data.jspAPI.getContentPane().append(markup); } else chat.data.jspAPI.getContentPane().append(markup); // Так как мы добавили новый контент, нужно // снова инициализировать плагин jScrollPane: chat.data.jspAPI.reinitialise(); chat.data.jspAPI.scrollToBottom(true); },

O método addChat() toma como parâmetro um objeto que contém a string do chat, o nome do autor e o gravatar, e insere a string do chat no local apropriado no div#chatContainer. Cada linha de chat (a menos que seja temporária) possui um ID exclusivo atribuído pelo MySQL. Este id é o nome da classe da linha de chat no formato chat-123.
Quando o método addChat() é executado, ele verifica a existência da linha anterior (para chat-123 verificará a presença de chat-122). Se existir, o método insere nova linha atrás dela. Caso contrário, simplesmente adiciona uma nova linha ao div. Esta técnica simples controla a inserção das linhas na ordem correta e a mantém durante todo o chat.
script.js

// Este método solicitações última entrada no chat // (começando com lastID) e adiciona-o à página. getChats: function(callback)( $.tzGET("getChats",(lastID: chat.data.lastID),function(r)( for(var i=0;i 3)( nextRequest = 2000; ) if(chat. data.noActivity > 10)( nextRequest = 5000; ) // 15 segundos if(chat.data.noActivity > 20)( nextRequest = 15000; ) setTimeout(callback,nextRequest )); getUsers: function(callback)( $.tzGET("getUsers",function(r)( var users = ; for(var i=0; i< r.users.length;i++){ if(r.users[i]){ users.push(chat.render("user",r.users[i])); } } var message = ""; if(r.total