para - ¿Cómo implementar una sala de chat usando Jquery/PHP?

javascript chat

Question

Estoy buscando implementar una sala de chat usando PHP / Javascript (Jquery) con funciones de chat grupal y chat privado.

El problema es cómo actualizar continuamente la interfaz de una manera natural y posiblemente también cómo mostrar mensajes de "X está escribiendo ..." en el chat privado.

La forma obvia parece ser que cada X segundos / milisegundos el javascript hace ping al servidor y obtiene una lista de mensajes nuevos entre el último ping y ahora. Sin embargo, esto puede hacer que la interfaz parezca un poco antinatural, si de repente la sala de chat se inunda con 5 mensajes. Prefiero que cada mensaje aparezca a medida que se escribe.

¿Hay alguna manera de que javascript mantenga una conexión continua con el servidor, el servidor envía mensajes nuevos a esta conexión y javascript los agrega a la interfaz para que aparezcan simultáneamente, casi tan pronto como el servidor los reciba?

Sé que hay algunas opciones de sondeo que requieren la instalación de algunos módulos de apache, etc., pero soy bastante malo con un administrador de sistemas, por lo tanto, preferiría que hubiera una solución muy fácil de instalar en una cuenta de hosting compartido, o un php. / mysql única solución.

Answer 1

No lo he hecho antes con PHP, pero lo mejor es que sea una especie de conexión de socket. Aquí está el manual de PHP para enchufes.

No recuerdo quién era el tutorial, pero hice una sala de chat como la que desea utilizando Flash para el cliente y Java para el servidor. Creo que este enlace podría ser donde estaba el tutorial y puede ayudarte.

Answer 2

¿Has visto PHPDaemon , que está escrito con el uso activo de libevent y pnctl? Tiene muchas funciones e incluso una simple aplicación de demostración de chat . Incluso tiene algunas implementaciones de producción.

Answer 3

Te sugiero que pruebes Socket.IO junto con NodeJS . Socket.IO le ofrece una API agradable y muy fácil para el cliente, funciona en la mayoría de los navegadores modernos y utiliza el transporte adecuado cuando es posible (Websocket, larga encuesta, etc.). NodeJS es un daemon del lado del servidor, que tiene conexiones HTTP. El sitio oficial de Socket.IO contiene información sobre cómo usarlos juntos. Espero que te ayude.

Answer 4

este podría ser un buen punto de partida

http://css-tricks.com/jquery-php-chat/

Answer 5

Sugiero implementarlo con HTML5 WebSockets, con largas encuestas o cometas como una alternativa para los navegadores más antiguos. WebSockets abre una conexión persistente al navegador. Hay una implementación de código abierto php de un servidor websocket .

Answer 6

Sé que esto es muy tarde, pero aquí

EDITAR: Enlace actualizado

Answer 7

El sondeo no es una buena idea. Necesita una solución que use sondeos largos o conectores web.

http://hookbox.org es probablemente la mejor herramienta que puedes usar.

Es una caja que vive entre el servidor y los navegadores y maneja abstracciones llamadas canales (piense en un canal de IRC). Es de código abierto en github: https://github.com/hookbox/hookbox El cuadro está escrito en Python, pero se puede utilizar fácilmente con un servidor escrito en cualquier idioma. También viene con una biblioteca Javascript que se basa en jsio (usa websockets, long-polling o la mejor tecnología disponible en el navegador) que garantiza que utiliza la mejor tecnología disponible en los navegadores. En una demostración, vi un chat en tiempo real implementado con pocas líneas de código.

El propósito de Hookbox es facilitar el desarrollo de aplicaciones web en tiempo real, con énfasis en la estrecha integración con la tecnología web existente. En pocas palabras, Hookbox es una cola de mensajes habilitada para la web. Los navegadores pueden conectarse directamente a Hookbox, suscribirse a canales con nombre y publicar y recibir mensajes en esos canales en tiempo real. Una aplicación externa (generalmente la aplicación web en sí misma) también puede publicar mensajes en canales mediante la interfaz REST de Hookbox. Toda autenticación y autorización es realizada por una aplicación web externa a través de devoluciones de llamadas designadas "webhook".

Cada vez que un usuario se conecta o opera en un canal, (suscribirse, publicar, cancelar suscripción), Hookbox realiza una solicitud http a la aplicación web para obtener autorización para la acción. Una vez suscrito a un canal, el navegador del usuario recibirá eventos en tiempo real que se originan en otro navegador a través de la API javascript, o desde la aplicación web a través de la API REST.

La idea clave es que todo el desarrollo de aplicaciones con hookbox se realiza en javascript o en el idioma nativo de la aplicación web (por ejemplo, PHP).

Necesita un servidor que pueda ejecutar Python PERO NO es necesario que conozca Python.

Si, por el contrario, desea utilizar solo websockets y PHP, este es un buen punto de partida: http://blancer.com/tutorials/69066/start-using-html5-websockets-today/

Answer 8

¡Esto parece prometedor! Incluso podría ser muy fácil resty :)

http://www.php-development.ru/javascripts/ajax-chat.php

Script de Ajax Chat en Javascript / PHP

Descripción

Ajax Chat es un software de chat web personalizable y liviano implementado en JavaScript y PHP. La secuencia de comandos no requiere Java, Flash ni ningún otro complemento.

Caracteristicas

• Chat público y privado.
• Inicie sesión como usuario registrado o como invitado.
• Estado ausente, colores personalizados, emoticonos, iconos de género / estado del usuario.
• Ajax Chat se puede integrar con un sistema de membresía de terceros implementando la rutina de autenticación de usuario. Opciones de integración avanzadas: si el usuario está conectado al sitio web, puede iniciar sesión automáticamente en el chat.

* Tenga en cuenta que esto es una copia / pega desde el sitio original .

Answer 9

Chatear con PHP / AJAX / JSON

Utilicé este libro / tutorial para escribir mi aplicación de chat:

AJAX y PHP: creación de aplicaciones web receptivas: Capítulo 5: chat AJAX y JSON .

Muestra cómo escribir un chatscript completo desde cero.

Chat basado en Comet

También puedes usar Comet con PHP .

De: zeitoun :

Comet permite a los servidores web enviar datos al cliente sin necesidad de que el cliente lo solicite. Por lo tanto, esta técnica producirá aplicaciones más receptivas que AJAX clásico. En las aplicaciones AJAX clásicas, el navegador web (cliente) no puede ser notificado en tiempo real de que el modelo de datos del servidor ha cambiado. El usuario debe crear una solicitud (por ejemplo, haciendo clic en un enlace) o debe recibir una solicitud AJAX periódica para obtener nuevos datos del servidor.

Te mostraré dos formas de implementar Comet con PHP. Por ejemplo:

1. basado en <iframe> oculto usando la marca de tiempo del servidor
2. basado en una clásica solicitud de no devolución de AJAX

El primero muestra la fecha del servidor en tiempo real en los clientes, muestra un mini-chat.

Método 1: iframe + sello de tiempo del servidor

Necesitas:

• una secuencia de comandos backend PHP para manejar la solicitud HTTP persistente backend.php
• una secuencia de comandos HTML frondend carga el código JavaScript index.html
• el prototipo de la biblioteca JS , pero también puedes usar jQuery

La secuencia de comandos de back-end ( backend.php ) hará un ciclo infinito y devolverá el tiempo del servidor mientras el cliente esté conectado.

<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sun, 5 Mar 2012 05:00:00 GMT");
flush();
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Comet php backend</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<script type="text/javascript">
// KHTML browser don''t share javascripts between iframes
var is_khtml = navigator.appName.match("Konqueror") || navigator.appVersion.match("KHTML");
if (is_khtml)
{
  var prototypejs = document.createElement(''script'');
  prototypejs.setAttribute(''type'',''text/javascript'');
  prototypejs.setAttribute(''src'',''prototype.js'');
  var head = document.getElementsByTagName(''head'');
  head[0].appendChild(prototypejs);
}
// load the comet object
var comet = window.parent.comet;
</script>

<?php
while(1) {
    echo ''<script type="text/javascript">'';
    echo ''comet.printServerTime(''.time().'');'';
    echo ''</script>'';
    flush(); // used to send the echoed data to the client
    sleep(1); // a little break to unload the server CPU
}
?>
</body>
</html>

La secuencia de comandos frontend ( index.html ) crea un objeto javascript "cometa" que conectará la secuencia de comandos de back-end a la etiqueta de contenedor de tiempo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Comet demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="prototype.js"></script>

</head>
<body>
  <div id="content">The server time will be shown here</div>

<script type="text/javascript">
var comet = {
connection   : false,
iframediv    : false,

initialize: function() {
  if (navigator.appVersion.indexOf("MSIE") != -1) {

    // For IE browsers
    comet.connection = new ActiveXObject("htmlfile");
    comet.connection.open();
    comet.connection.write("<html>");
    comet.connection.write("<script>document.domain = ''"+document.domain+"''");
    comet.connection.write("</html>");
    comet.connection.close();
    comet.iframediv = comet.connection.createElement("div");
    comet.connection.appendChild(comet.iframediv);
    comet.connection.parentWindow.comet = comet;
    comet.iframediv.innerHTML = "<iframe id=''comet_iframe'' src=''./backend.php''></iframe>";

  } else if (navigator.appVersion.indexOf("KHTML") != -1) {

    // for KHTML browsers
    comet.connection = document.createElement(''iframe'');
    comet.connection.setAttribute(''id'',     ''comet_iframe'');
    comet.connection.setAttribute(''src'',    ''./backend.php'');
    with (comet.connection.style) {
      position   = "absolute";
      left       = top   = "-100px";
      height     = width = "1px";
      visibility = "hidden";
    }
    document.body.appendChild(comet.connection);

  } else {

    // For other browser (Firefox...)
    comet.connection = document.createElement(''iframe'');
    comet.connection.setAttribute(''id'',     ''comet_iframe'');
    with (comet.connection.style) {
      left       = top   = "-100px";
      height     = width = "1px";
      visibility = "hidden";
      display    = ''none'';
    }
    comet.iframediv = document.createElement(''iframe'');
    comet.iframediv.setAttribute(''src'', ''./backend.php'');
    comet.connection.appendChild(comet.iframediv);
    document.body.appendChild(comet.connection);

  }
},

// this function will be called from backend.php  
printServerTime: function (time) {
  $(''content'').innerHTML = time;
},

onUnload: function() {
  if (comet.connection) {
    comet.connection = false; // release the iframe to prevent problems with IE when reloading the page
  }
}
}
Event.observe(window, "load",   comet.initialize);
Event.observe(window, "unload", comet.onUnload);

</script>

</body>
</html>

Método 2: solicitud de no devolución de AJAX

Necesita lo mismo que en el método 1 + un archivo para intercambio de datos ( data.txt )

Ahora, backend.php hará 2 cosas:

1. Escribir en "data.txt" cuando se envían nuevos mensajes
2. Haz un ciclo infinito siempre que el archivo "data.txt" no haya cambiado

<?php
$filename  = dirname(__FILE__).''/data.txt'';

// store new message in the file
$msg = isset($_GET[''msg'']) ? $_GET[''msg''] : '''';
if ($msg != '''')
{
    file_put_contents($filename,$msg);
    die();
}

// infinite loop until the data file is not modified
$lastmodif    = isset($_GET[''timestamp'']) ?

$ _GET [''timestamp'']: 0; $ currentmodif = filemtime ($ nombre de archivo); while ($ currentmodif <= $ lastmodif) // verifica si el archivo de datos ha sido modificado {usleep (10000); // duerme 10 ms para descargar la CPU clearstatcache (); $ currentmodif = filemtime ($ nombre de archivo); }

// return a json array
$response = array();
$response[''msg'']       = file_get_contents($filename);
$response[''timestamp''] = $currentmodif;
echo json_encode($response);
flush();
?>

El script frontend ( index.html ) crea las <div id="content"></div> que contienen los mensajes de chat que provienen del archivo "data.txt", y finalmente crean un objeto javascript "cometa" que llame al script backend para ver si hay nuevos mensajes de chat.

El objeto cometa enviará solicitudes AJAX cada vez que se reciba un nuevo mensaje y cada vez que se publique un nuevo mensaje. La conexión persistente solo se usa para mirar mensajes nuevos. Un parámetro url de marca de tiempo se utiliza para identificar el último mensaje solicitado, de modo que el servidor solo regrese cuando la marca de tiempo "data.txt" sea más nueva que la marca de tiempo del cliente.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Comet demo</title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="prototype.js"></script>
</head>
<body>

<div id="content">
</div>

<p>
<form action="" method="get" onsubmit="comet.doRequest($(''word'').value);$(''word'').value='''';return false;">
  <input type="text" name="word" id="word" value="" />
  <input type="submit" name="submit" value="Send" />
</form>
</p>

<script type="text/javascript">
var Comet = Class.create();
Comet.prototype = {

timestamp: 0,
url: ''./backend.php'',
noerror: true,

initialize: function() { },

connect: function()
{
  this.ajax = new Ajax.Request(this.url, {
    method: ''get'',
    parameters: { ''timestamp'' : this.timestamp },
    onSuccess: function(transport) {
      // handle the server response
      var response = transport.responseText.evalJSON();
      this.comet.timestamp = response[''timestamp''];
      this.comet.handleResponse(response);
      this.comet.noerror = true;
    },
    onComplete: function(transport) {
      // send a new ajax request when this request is finished
      if (!this.comet.noerror)
        // if a connection problem occurs, try to reconnect each 5 seconds
        setTimeout(function(){ comet.connect() }, 5000); 
      else
        this.comet.connect();
      this.comet.noerror = false;
    }
  });
  this.ajax.comet = this;
},

disconnect: function()
{
},

handleResponse: function(response)
{
  $(''content'').innerHTML += ''<div>'' + response[''msg''] + ''</div>'';
},

doRequest: function(request)
{
  new Ajax.Request(this.url, {
    method: ''get'',
    parameters: { ''msg'' : request 
  });
}
}
var comet = new Comet();
comet.connect();
</script>

</body>
</html>

Alternativamente

También puede echar un vistazo a otras aplicaciones de chat para ver cómo lo hicieron:

• http://hot-things.net/?q=blite - BlaB! Lite está basado en AJAX y se ve mejor con cualquier sistema de chat de navegador que admita bases de datos MySQL, SQLite y PostgreSQL.

• Estilo de Gmail / Facebook jQuery Chat - Este módulo de chat jQuery le permite integrar a la perfección el chat de estilo Gmail / Facebook en su sitio web existente.

• Escribir un servidor de chat JavaScript / PHP - Un tutorial

• CometChat : CometChat se ejecuta en servidores compartidos estándar. Solo se requiere PHP + mySQL.

Answer 10

Creo que el problema que está buscando requiere el uso de la programación web del cometa. Puede encontrar más detalles en wikipedia, buscando la programación de Comet y en Ajaxian (todavía soy nuevo en este sitio y no puedo publicar más de un enlace en la respuesta).

El problema es que esto no se puede lograr fácilmente con php en el lado del servidor. Más detalles: usar cometa con php

Además, si busca en google ''php comet'', encontrará un tutorial para lograr el efecto deseado.

EDITAR MÁS TARDE

Proyecto Ape

Implementé un proyecto usando este motor. Es genial.

Cometa con php

Espero que esto ayude, Gabriel