Pregunta:
Fecha: 04-07-2015 06:28:19
(En Español)
chat.php :
send.php :
mensajes.php : // disculpen la fea forma en que puse el html xD, la w3c me mata si lo pongo analizar n.n luego lo arreglo
menjs.js : // pude poner tambien $(document).on("ready", function(e) { pero me gusta mas asi como lo puse no se costumbre :P
bueno ignorando que me equivoque en poner aqui la correcta forma de poner las urls yo no lo hice, ahora el chat funciona casi perfectamente incluso envia el mensaje a la base de datos y lo devuelve lo que no hace 77 es actualizarse aqui si lo hace pero se recarga la pagina :/ eso no uqiero ya lo habia hecho asi:
y en e documento chat solo le pondrias un div con el id resultado y si funciona este me trae los datos aunque todo el chat discupen mi ignorancia pero soy muy malo en malo en ajax como veran :/ aunque por mas que intento no encuentro un tutorial que me ayude aprenderlo mejor aun a comprenderlo aunque si ser es que donde esta data en documento menjs.js es lo que va a traer pues si se jquery es por eso que logo entenderlo poco aunque por mas que movi no loghre lo que queria que el chat en tiempo real 77 sin recargar la pagina bueno si pero en ajax ahora tal vez me estoy equivocando muy gachamente como veran en menjs en la url pongo a send cuando lo que realmente deberia que poner es el iframe la url del iframe que es el que trae los mensajes, no se la verdad no logro entender alguien me puede ayuadar :/, se los agradeceria.
Saludos :) Votos: 1 - Respuestas: 3 - Vistas: 21 Compartir en: Google Facebook Twitter LinkedIn Link
Ayuda Con Mi Chat (Ajax)[Resuelta]
Bueno lo quiero ser es algo facil en pero que no mas no entiendo u.u, tengo un chat y funciona correctamenet solo una cosa no enviar los mensajes en tiempo real, antes de seguir explicando aqui les dejo el codigo:chat.php :
<?php
session_start();
require_once("conexion.php");
if(isset($_SESSION['user']))
{
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>You Anime Chat: Global</title>
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".config_chat").toggle(function(i) {
$(".sd_opts_lik").css({'cursor':'pointer'}).show();
i.preventDefault();
},
function() {
$(".sd_opts_lik").hide();
});
});
</script>
<script src="jquery-2.1.3.min.js" type="text/javascript"></script>
<script async src="global/menjs.js" type="text/javascript"></script>
<style type="text/css">
div.wind_ifram_user_status {
border: solid 1px rgb(0,0,0);
background: rgb(255,255,255);
position: absolute;
left: 1055px;
top: 11px;
width: 205px;
height: 580px;
max-width: 100%;
}
textarea {
width: 1040px;
height: 50px;
resize: none;
}
iframe {
border-left: solid 1px rgb(0,0,0);
border-top: solid 1px rgb(0,0,0);
border-right: solid 1px rgb(0,0,0);
border-bottom: solid 1px rgb(0,0,0);
}
.config_chat {
position: absolute;
left: 1150px;
top: 20px;
z-index: 999;
}
.config_chat {
cursor: pointer;
z-index: 999;
}
.sd_opts_lik {
position: absolute;
border: solid 1px rgb(0,0,0);
backgound: rgba(0,0,0,.8);
left: 1120px;
top: 40px;
}
.chat_name {
position: absolute;
top: 190px;
left: 1090px;
top: 15px;
}
button {
border: rgba(0,0,0,1);
background: rgba(0,0,0,1);
color: rgb(255,255,255);
}
button:hover {
cursor: pointer;
}
.wind_ifram_user_more {
border: 1px solid rgb(0,0,0);
width: 210px;
height: 48px;
position: absolute;
left: 1050px;
top: 597px;
z-index: 999;
}
a {
position: relative;
left: 400px;
}
a.bl2 {
position: relative;
left: 400px;
}
a:hover {
color: rgb(0,255,0);
}
#user_class-alert-connect {
position: absolute;
left: 1060px;
top: 20px;
background: rgb(0,0,0);
width: 10px;
height: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<div name="iframe" class="wind_ifram_user_status"></div>
<div id="user_class-alert-connect"></div>
<table width="500" height="580">
<form action="" method="post" name="menj">
<tr>
<td> <iframe src="users/mensajes.php" id="iframe" name="iframe" width="1040" height="580"></iframe> </td>
</tr>
<tr>
<td> <textarea name="mensaje"></textarea> <input type="hidden" name="fechaandtime" /><button type="submit" name="enviar">Enviar</button> </td>
</tr>
<tr>
<img src="../imagenes/topcoat-settings.svg" class="config_chat" /><td class="chat_name"><strong><?=$_SESSION['user']?></strong></td> <a class="sd_opts_lik" onclick="window.location.replace('../users/logout.php')" style="display: none;">Cerrar Sesion</a>
</tr>
</form>
<div id="resultado"></div>
</table>
<div class="wind_ifram_user_more">
</div>
<img src="" alt="Emoticons"/>
<a href="http://tuweb.com" target="_blank">Copyright 2015 For © El Sitio Web</a>
<a class="bl2" href="termsandconditions/globalchat.php" target="_blank">Terminos & Condiciones</a>
</body>
</html>
<?php
} else {
?>
<html>
<head>
<title>You Anime Oficial Chat: Global</title>
<meta http-equiv="pragma" content="no-cache" />
<style type="text/css">
html {
background: url("/imagenes/angel_anime51_chocolaloveless_mini.jpg");
}
.page_all {
color: #fff;
border: solid 1px rgb(0,0,0);
background: rgb(0,0,0);
border-radius: 5px;
position: absolute;
top: 200px;
left: 450px;
width: 345px;
height: 100px;
}
.center {
text-align: center;
}
input[type="submit"] {
border: none;
}
input[type="submit"]:hover {
color: rgb(0,0,0);
cursor: pointer;
background: rgb(0,255,0);
text-shadow: 1px 1px 1px #000;
opacity: 0.9;
filter: alpha(opacity=10);
}
.letter {
font-size: 13px;
}
a:hover {
color: #00FF00;
text-decoration: none;
}
</style>
</head>
<body>
<b class="page_all center">Debes Iniciar Sesion Para Poder Utilizar El Chat <br/> <input type="submit" onclick="window.location='../users/login.php'" value="Iniciar Sesion" /> <br /> <p class="letter center"><a href="">Ver Reglas Del Chat</a></p>
<p class="letter center">Copyright 2015 By: © <a href="http://miweb.com/">You Anime Oficial</a></p> </b>
</body>
</html>
<?php
}
?>
send.php :
<?php
date_default_timezone_set("America/Mexico_City");
session_start();
include_once("emoticons.php");
include_once("bb_config.php");
require_once("conexion.php");
if(isset($_POST['enviar']) || $mensaje = htmlspecialchars($_POST['mensaje'])) {
$user = $_SESSION['user'];
$rango = $_SESSION['rango'];
$mensaje = htmlspecialchars($_POST['mensaje']);
$fechaandtime = date("d-m-Y H:i");
$mensaje = expresiones($mensaje);
$mensaje = code_and_more($mensaje);
$insert = "INSERT INTO chat (user,mensaje,fechaandtime)";
$insert.= "VALUES ('{$user}','{$mensaje}','{$fechaandtime}')";
mysqli_query($imart,$insert);
header("Location: chat.php");
} else {
}
?>
mensajes.php : // disculpen la fea forma en que puse el html xD, la w3c me mata si lo pongo analizar n.n luego lo arreglo
<?php
session_start();
require_once("conexion.php");
if(isset($_SESSION['user'])) {
$select = "SELECT * FROM chat ORDER BY id DESC";
$query = mysqli_query($imart,$select);
$rows = mysqli_num_rows($query);
if($rows>0)
{
while ($row = mysqli_fetch_array($query))
{
?>
<?
if(isset($_SESSION['user']) && $_SESSION['rango'] == 2)
{
?>
<a href="../../erase.php?id=<?=$row['id']?>"><img src="../../imagenes/delete.gif"></a>
<?
} else {
?>
<?
}
?>
<html>
<head>
<style type="text/css">
pre {
color: rgb(255,0,0);
}
</style>
</head>
<body>
<div id="mensaj">
<?=$row['rank']?> <strong><?=$row['user']?></strong>: <?=$row['mensaje']?> <?=$row['fechaandtime'];?> <br />
</div>
</body>
</html>
<?
}
} else {
?>
<?
}
}
?>
menjs.js : // pude poner tambien $(document).on("ready", function(e) { pero me gusta mas asi como lo puse no se costumbre :P
$(document).ready(function(){
var mens;
$("form").submit(function(e) {
e.preventDefault();
//hace la búsqueda
$("iframe").delay(1000).queue(function(e) {
$("iframe").html('<img src="../imagenes/working.gif" />').fadeOut(1000);
$.ajax({
beforeSend: function() {
mens = document.menj.mensaje.value;
},
type: "POST",
url: "send.php",
data: $("form").serialize(),
dataType: "html",
error: function(){
alert("error petición de ajax, intente de nuevo");
},
success: function(data){
$("iframe").load("users/mensajes.php");
$("#iframe").fadeIn(1000).html(data);
e();
},
});
});
});
});
bueno ignorando que me equivoque en poner aqui la correcta forma de poner las urls yo no lo hice, ahora el chat funciona casi perfectamente incluso envia el mensaje a la base de datos y lo devuelve lo que no hace 77 es actualizarse aqui si lo hace pero se recarga la pagina :/ eso no uqiero ya lo habia hecho asi:
$(document).ready(function(){
var mens;
$("form").submit(function(e) {
e.preventDefault();
$("#resultado").delay(1000).queue(function(e) {
$("#resultado").html('<img src="../imagenes/working.gif" />').fadeOut(1000);
$.ajax({
beforeSend: function() {
mens = document.menj.mensaje.value;
},
type: "POST",
url: "send.php",
data: $("form").serialize(),
dataType: "html",
error: function(){
alert("error petición de ajax, intente de nuevo");
},
success: function(data) {
$("#resultado").fadeIn(1000).html(data);
e();
},
});
});
});
});
y en e documento chat solo le pondrias un div con el id resultado y si funciona este me trae los datos aunque todo el chat discupen mi ignorancia pero soy muy malo en malo en ajax como veran :/ aunque por mas que intento no encuentro un tutorial que me ayude aprenderlo mejor aun a comprenderlo aunque si ser es que donde esta data en documento menjs.js es lo que va a traer pues si se jquery es por eso que logo entenderlo poco aunque por mas que movi no loghre lo que queria que el chat en tiempo real 77 sin recargar la pagina bueno si pero en ajax ahora tal vez me estoy equivocando muy gachamente como veran en menjs en la url pongo a send cuando lo que realmente deberia que poner es el iframe la url del iframe que es el que trae los mensajes, no se la verdad no logro entender alguien me puede ayuadar :/, se los agradeceria.
Saludos :) Votos: 1 - Respuestas: 3 - Vistas: 21 Compartir en: Google Facebook Twitter LinkedIn Link
Respuestas:
-
Fecha: 14-07-2015 18:03:23 Chrismart, me cuesta mucho entenderte, deberías releer lo que escribiste y corregir tu dicción, si bien deduzco gran parte, llega un punto en que mi cerebro se apaga y no quiere seguir...., me quita las ganas de dar una respuesta...
Recuerda que para obtener buenas respuesta debes hacer buenas preguntas...
Saludos, Votos: 2 - Link respuesta -
Fecha: 31-07-2015 12:52:12 De lo que entendí, un par de cosas:
Ajax no te va a servir para hacer un chat en tiempo real. Lo que hace ajax es mandar y recibir datos sin recargar la página, pero eres tú quien debe mandar a cargar esos datos cada cierto tiempo.
Por ejemplo, podrías poner un intervalo de 3 segundos para verificar si existen nuevos mensajes y cargarlos.
Para manejar "tiempo real" puedes usar websockets. Te dejo un enlace algo explicativo (inglés):
http://www.sanwebe.com/2013/05/chat-using-websocket-php-socket
Hay varios ejemplos también en internet.
Y por favor intenta escribir mejor, Fernando tiene mucha razón. Votos: 2 - Link respuesta -
Fecha: 07-03-2018 18:21:22 Hola,
Ese ha sido un pequeño problema para los que manejan JavaScript, ya que este no deja enviar cosas en tiempo real, yo tengo un chat, pero me toca hacer peticiones al servidor cada cierto tiempo mirando si hay algún nuevo mensaje, pero esto no es optimo para el servidor.
Puedes ver como te indica el compañero Joel Paredes el lo que sería web sockets en php
Aunque lo mejor para esto es usar NodeJS para estas peticiones pero este ya tiene que ser en un servidor especializado (VPS), puedes ver este video.
link
Y puede resultar algo fácil, aunque no lo he probado.
Saludos.
Equipo de Diseño y Desarrollo www.quecodigo.com Votos: 0 - Link respuesta
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
