Crear un Chat con Comet y PHP

En este tutorial veremos cómo crear un chat con Comet y PHP.

Comet es una librería la cual nos permitirá comunicarnos con un servidor web utilizando pedidos HTTP que no terminan de enviar una respuesta y así nos permiten mantener una comunicación fluida con el navegador web.

El diagrama a continuación indica el flujo de la data con el uso de Comet

imagen1

El navegador abre la página indicada.
Luego de que la página es cargada, JavaScript establece una conexión persistente con el servidor Comet.
Mientras la página siga abierta, nuestro servidor puede enviar cualquier mensaje al navegador. Para realizar esto, utiliza un API de envío de mensajes el servidor Comet.
El servidor Comet utiliza la conexión abierta con len navegador y envía el mensaje.
El API JavaScript recibe el mensaje y llama al callback indicado.

Para nuestro servidor Comet, estaremos utilizando el servidor gratuito:

1
comet-server.ru

El flujo en el código que veremos a continuación funcionará de la siguiente forma:
El usuario visita la página e inmediatamente se suscribe a un API JS para obtener mensajes instantáneos de un canal de chat.
Para enviar un mensaje un pedido en AJAX es utilizado el cual envía un mensaje de texto a un servidor PHP
PHP procesa el mensaje recibido y lo guarda en una base de datos
Luego PHP se conecta al servidor Comet y le envía un pedido para enviar el mensaje al canal
El servidor Comet recibe el mensaje de PHP y envía a todos los suscritos al canal.

El código HTML, JS y AJAX para lograr el flujo es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE HTML>
<html>
<head>
<script src="//comet-server.ru/CometServerApi.js"></script>
<script src="//comet-server.ru/doc/CometQL/simplePhpChat/jquery.min.js">
</script>
</head>
<body>
 
<div
   id="textHolder"
   style="margin-top:10px;border:1px solid #000;padding:10px;"
></div>
<hr>
<input type="text" id="msgText" placeholder="Message text">
<input type="button" value="Send"  onclick="sendMsg();">
 
<script type="text/javascript">
$(document).ready(function(){
 
    CometServer().subscription("ChatPHPSimple", function(event){
        console.log(
            Recibimos el mensaje.",
            event.data,
            event
        );
        $("#textHolder").html( $("#textHolder").html() +"<hr>"+event.data);
    })
 
    /** 
     * Connecting to a server comets. To be able to receive commands.
     * dev_id your public identity of the developer.
     */
    CometServer().start({dev_id:15 })
})
 
function sendMsg(){
 
 var text = $("#msgText").val();
 
    jQuery.ajax({
        url: "//comet-server.ru/doc/CometQL/simplePhpChat/sendMsgToChat.php",
        type: "GET",
        data:"text="+encodeURIComponent(text),
        success: function(){
            $("#msgText").val('');
        }
    });
}
</script>
</body>
</html>

Él código PHP necesario es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Nos conectamos a comet-server.ru con nuestro user y pass. Puede obtenerlo al registrarse en aquella página
$link = mysqli_connect(
            "app.comet-server.ru", "15", 
            "lPXBFPqNg3f661JcegBY0N0dPXqUBdHXqj2cHf04PZgLHxT6z55e20ozojvMRvB8",
            "CometQL_v1"
        );
 
//enviamos el mensaje al canal
mysqli_query(
    $link,
    "INSERT INTO
        pipes_messages
        (name, event, message)
    VALUES
        ('ChatPHPSimple',
         '',
         '".mysqli_real_escape_string($link,htmlspecialchars($_GET['text']))."'
        );"
);

Esta es una manera muy sencilla de implementar un servidor de chat basado en Comet.

Header Ads Widget

Crear un Chat con Comet y PHP

Publicar un comentario

0 Comentarios

Random Posts

Información relevante

Colaboraciones

Menu Footer Widget