Boa noite, estou tendo alguns problemas com um projeto que estou desenvolvendo que é um Chat que mostra as mensagens na tela em tempo real. O problema é que não está mostrando as mensagens, quem entender de JQuery ou queira me ajudar, quero saber onde é o problema. Muito Obrigado pela atenção.
Segue meus códigos abaixo:
Arquivo config.php
<?php
$dbusername = "root";
$dbpassword = "";
$dbhost = "localhost";
$dbname = "chat";
$var = 'mysql:host=' .$dbhost. ';dbname=' .$dbname;
$con = new PDO($var,$dbusername,$dbpassword);
?>
Arquivo enviar.php
<?php
include 'config.php';
date_default_timezone_set('America/Sao_Paulo');
if(isset($_COOKIE['nome'])){
$nome=strip_tags($_COOKIE['nome']);
$mensagem=htmlspecialchars($_POST['mensagem']);
$hora=date('H:i:s');
$ip=$_SERVER['REMOTE_ADDR'];
$sql=$con->prepare('insert into mensagens(nome,mensagem,hora,ip) values(:n, :m, :h, :i)');
$sql->bindValue(':n', $nome);
$sql->bindValue(':m', $mensagem);
$sql->bindValue(':h', $hora);
$sql->bindValue(':i', $ip);
$sql->execute();
}
?>
Arquivo estilo.css
#mensagens{
width: 500px;
height: 300px;
max-height: 300px;
overflow: auto;
overflow-x: hidden;
border: 1px solid #ccc;
border-radius: 3px;
padding: 8px;
margin: 4px;
}
input[type='text']{
display: block;
width: 500px;
font-size: 14px;
padding: 6px;
border: 1px solid #ddd;
border-radius: 3px;
outline: 0;
color: red;
}
p{
color: lightblue;
text-align: left;
word-wrap: break-all;
}
b{
cursor: pointer;
}
Arquivo index.php
<?php setcookie('nome','js');?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Chat</title>
<style>
body{
background:url("./img/bg.jpg");
background-size:100%;
background-repeat:no-repeat;
}
#mensagens{
width: 950px;
height: 400px;
max-height: 400px;
overflow: auto;
overflow-x: hidden;
border: 7px solid #aaa;
border-radius: 5px;
padding: 8px;
margin: 4px;
color: white;
background-color: lightblue;
}
input[type='text']{
display: block;
width: 850px;
font-size: 14px;
padding: 6px;
border: 7px solid #aaa;
border-radius: 5px;
outline: 0;
color: red;
}
p{
color: lightblue;
text-align: left;
word-wrap: break-all;
}
b{
cursor: pointer;
}
.enviar{
transform: translateX(385px) translateY(-62.5px);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="js/bootstrap.js"></script>
<?php require_once("header.php")?>
<br>
<br>
<br>
<center>
<img src="./img/logo.png" width="250px">
<script type="text/javascript" src="js.js"></script>
<div id="mensagens"></div>
<br>
<form method="post" onsubmit="enviar();return false">
<input type="text" name="mensagem" id="mensagem" placeholder="Digite uma mensagem..." maxlength="54" autocomplete="off"/>
<br>
</form>
</center>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Arquivo js.js
$(document).ready(function(){
$('#mensagens').load('ver.php');
var RefreshId = setInterval(function(){
$('#mensagens').load('ver.php');
}, 500);
$.ajaxSetup({cache:false});
});
function ver() {
var url;
url = 'ver.php';
jQuery.get(url, function(data){
$('#mensagens').empty().append(data);
});
}
function enviar(){
var url;
var mensagem;
var enviando;
url = 'enviar.php';
mensagem = $('#mensagem').val();
$('#mensagem').on(keyup, function(e){
if(e.which == 13){
var m = this.val();
m = mensagem.trim();
if(m.lenght >= 1){
$(this).val('');
enviando = $.post(url,{mensagem:mensagem});
enviando.done(function(){
mensagem = '';
ver();
});
}
}
});
}
Arquivo ver.php
<?php
include 'config.php';
if(isset($COOKIE['nome'])){
$nomec=$_COOKIE['nome'];
$buscar=$con->prepare('select * from mensagens');
$buscar->execute();
$size=$buscar->rowCount();
if($size>0){
while ($linha=$buscar->fetch(PDO::FETCH_ASSOC)) {
$nome=$linha['nome'];
$mensagem=$linha['mensagem'];
$hora=$linha['hora'];
$ip=$linha['ip'];
echo "<p>Seja bem-vindo ".$nomec.", use o chat com moderação</p><br>";
echo "<p><b tittle='".$hora."'>".$nome."</b>: ".$mensagem. "</p>";
}
}else{
echo "<p>Seja bem-vindo ".$nomec.", use o chat com moderação</p><br>";
echo "<p>Sem mensagens até o momento...</p>";
}
}
?>
Sobre os arquivos JavaScript não sei esses comandos, caso queiram mais explicações ficarei feliz em responder. Muito Obrigado