Criando um chat utilizando jQuery e PHP

Serão três vídeo aulas ensinando a como criar um chat utilizando jQuery e PHP. Com isso veremos com criar um singleton, utilizar a classe PDO, usar setInterval do javascript entre outras coisas. Espero que goste, e boa aula.

Obs.: Na video-aula coloquei de maneira errônea o $.trim no jQuery, mas a opção do projeto completo consertei esse erro. Se você já tinha feito o download, faça novamente.

Obs2. : O chat desenvolvido é para estudo, existem vários outras implementações para colocá-lo em produção.

Aula 1

Aula 2

Aula 3

45 thoughts on “Criando um chat utilizando jQuery e PHP

  1. Cara, muito bacana tuas video aulas, me diga uma coisa, para inserir um lista de pessoas conectadas e ainda mensagens privadas, requer muitas modificações?
    Ou será que você tem uma aula que possa me guiar nesse sentido?

    Parabens novamente pelas aulas.
    Abraço!

  2. Olá parabens pela vídeo aula ! O que colocar no ” Chat.class” para que as mensagem sejam deletada em 5min ? Seria muito complicado para que as novas pessoas que entrasse no chat só visualizacem as mensagem a parti de quando ela entrou ?

  3. Como criar no Servidor um Banco de Dados com uma tabela com o nome “CHAT” e com os campos “Id, nome, mensagemdatahora” no phpMyAdim.

    1. Olá Sammy, começou mal, já errando meu nome, rs.

      Vc pode utilizar o evento which para pegar o valor da tecla. O enter o valor 13. Exemplo:

      HTML

      <textarea name="mensagem" id="mensagem" cols="30" rows="10"></textarea>​
      

      Javascript

      $(function(){
      
          $("#mensagem").keypress(function(e){
              if(e.which == 13){
                   alert('Apertou a tecla enter');
              }
          
          });
      });​
      

      Exemplo

  4. Pode me ajudar a traduzir isso ja modifiquei tudo e não encontrei o erro Obrigado!
    Fatal error: Uncaught exception ‘PDOException’ with message ‘invalid data source name’ in C:\Program Files\EasyPHP 2.0b1\www\chat\classes\BD.class.php:12 Stack trace: #0 C:\Program Files\EasyPHP 2.0b1\www\chat\classes\BD.class.php(12): PDO->__construct(‘$DSN’, ‘$USER’, ‘$PASS’) #1 C:\Program Files\EasyPHP 2.0b1\www\chat\classes\Chat.class.php(33): BD::getConn() #2 C:\Program Files\EasyPHP 2.0b1\www\chat\index.php(10): Chat->existeNome() #3 {main} thrown in C:\Program Files\EasyPHP 2.0b1\www\chat\classes\BD.class.php on line 12

  5. Fatal error: Uncaught exception ‘PDOException’ with message ‘SQLSTATE[28000] [1045] Access denied for user ‘root’@’localhost’ (using password: NO)’ in /home/eusou105/public_html/classes/BD.class.php:9 Stack trace: #0 /home/eusou105/public_html/classes/BD.class.php(9): PDO->__construct(‘mysql:host=loca…’, ‘root’, ”) #1 /home/eusou105/public_html/classes/Chat.class.php(44): BD::getConn() #2 /home/eusou105/public_html/chat.php(15): Chat->listar() #3 {main} thrown in /home/eusou105/public_html/classes/BD.class.php on line 9

    Gostaria de saber a onde e como consertar esses erros?
    Aguardo, parabéns.

  6. Boa noite, David!

    Consegui resolver o problema.
    Mas, quando vou entrar continua aparecendo sem ter entrado antes. “caso queira entrar com o mesmo nome clique aqui”

    Outra coisa consigo entrar. coloco o nome entra no chat
    quando quando digito e envio aparece um erro tanto no chat.php quando no chat-index.php
    está dando este conflito com este arquivo
    foreach($chat->listar() as $v){

  7. Oi David.

    Cara eu fiz igualzinho a vc, coloco no localhost funciona tranquilo, mas quando eu coloco on line, não funciona, será que vc saber porque???

  8. David, existe alguma forma de minimizar as consultas feitas no banco de dados?

    Por que se for uma rede social por exemplo, e muitos usuários estiverem conectados simultaneamente requisitando uma consulta a cada 5 segundos ou menos até, vai ter que ter um servidor muito bom.

    Tem alguma idéia?

    Abs! Muito bom mesmo suas aulas!

  9. Ola Amigo! Meus Parabéns pela vídeo aula do chat
    Eu estou fazendo um trabalho na escola sobre chat, e precisava de colocar um formulário, também login e senha.
    Pois meu trabalho fala sobre segurança e privacidade na internet, teria como você me ajudar?
    obrigado amigo

    1. PSO, nesse caso teria q refazer esse chat, desmembrando a tabela, pra tabela de usuários e uma tabela pra mensagens, exemplo:

      TABELA usuario
      id INT
      nome VARCHAR(50)
      email VARCHAR(80)
      senha VARCHAR (60)

      TABELA mensagem
      id
      usuario_id
      content TEXT
      criado DATETIME

  10. Obrigado David por responder minha pergunta
    Eu fiz como você falou a tela de cadastro eu consigo cadastrar tudo certo no banco de dado. Mas na tela inicial não consigo implantar o código para ele reconhecer a senha da erro >.< .
    Ele esta entrando direto somente com nome, eu precisava que você mostra-se como ficaria esse código de nome e senha.

    Obrigado

  11. Olá, parabéns !!!

    Realmente o chat está muito bom, melhor ainda a técnica. Ajudou muito o meu entendimento pois estou começando na programação web.

  12. Gostei do script mas estou com um problema,entro uma vez e quando vou entrar de novo com um outro nome de usuário retorna com um erro que é esse

    Warning: Cannot modify header information – headers already sent by (output started at /home/…./public_html/Batepapoonline/index.php:1) in /home/…/public_html/Batepapoonline/index.php on line 13

    Warning: Cannot modify header information – headers already sent by (output started at /home/…/public_html/Batepapoonline/index.php:1) in /home/…/public_html/Batepapoonline/index.php on line 1

    você pode me ajudar?

  13. ola amigo teria como eu clicar no nome da pessoa e teclar com ela..pois nesse metodo fica confuso saber pra quem esta indo a pergunta quando tem mais de um usuario…

  14. Nao tive o privilegio de ver as video aulas.. queria saber se e possivel mandarem em meu email codigos de como fazer um sistema chat em um site….

    Valeu!!!!

  15. obrigado amigão, eu realmente aprendi muito e devo dizer que fiquei seu fã, quando você postará novas aulas?
    eu gostaria de saber também se tem como colocar webcam neste chat?

    1. Vai depender do q vc gostaria de fazer. O que poderia ter era uma tabela de usuário e outra de mensagem.

      TABELA user
      id
      name
      email
      password
      level

      TABELA message
      id
      to_user
      form_user
      content
      created

      to_user => pra quem envia
      form_user => quem está enviando

  16. Olá, ao entrar com um nome para o Chat apareceu esse erro ==>
    Erro fatal : Uncaught exceção ‘PDOException’ com a mensagem “SQLSTATE [28000] [1045] Acesso negado para o usuário ‘root’@’10.2.1.42’ (usando a senha: NO) ‘em / home / u155585563 / public_html / classes / BD. class.php: trace 9 Stack: # 0 /home/u155585563/public_html/classes/BD.class.php(9): DOP -> __ construct ( ‘mysql: host = loca …’, ‘root’, ” ) # 1 /home/u155585563/public_html/classes/Chat.class.php(33): BD :: getConn () # 2 /home/u155585563/public_html/index.php(10): Chat-> existeNome () # 3 {principal} jogado na /home/u155585563/public_html/classes/BD.class.php na linha 9

    Para eu retira-lo e seguir normalmente eu teria que modificar o PHP da pasta Classes e Config por que ambas são praticamente uma só !??

  17. Fatal error: Uncaught exception ‘PDOException’ with message ‘invalid data source name’ in C:\Program Files (x86)\EasyPHP-DevServer-14.1VC9\data\localweb\ChatChc\classes\BD.class.php:9 Stack trace: #0 C:\Program Files (x86)\EasyPHP-DevServer-14.1VC9\data\localweb\ChatChc\classes\BD.class.php(9): PDO->__construct(‘DSN’, ‘USER’, ‘PASS’) #1 C:\Program Files (x86)\EasyPHP-DevServer-14.1VC9\data\localweb\ChatChc\classes\Chat.class.php(33): BD::getConn() #2 C:\Program Files (x86)\EasyPHP-DevServer-14.1VC9\data\localweb\ChatChc\index.php(10): Chat->existeNome() #3 {main} thrown in C:\Program Files (x86)\EasyPHP-DevServer-14.1VC9\data\localweb\ChatChc\classes\BD.class.php on line 9

    queria implementar este chat neste site q estou desenvolvendo, mas ao testar deu este erro, mesmo configurando tudo certo

  18. Ótima video aula, me ajudou bastante, através dela adaptei um outro projeto. Minha dúvida é. Como inverter a ordem das conversas as ultimas aparecem sempre em baixo e a barra de rolagem sempre ficar em baixo. Tudo isso eu fiz no order by e função javaScript para a barra ficar em baixo, mas tem um problema, toda vez que atualiza de 5 em 5 segundos a barra fica em baixo e com isso se eu precisar subir a barra pra ver algo em cima depois de 5 segundos ela desce.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *