Comment mettre en œuvre un salon de discussion en utilisant Jquery/PHP?

je cherche à mettre en œuvre un salon de discussion en utilisant PHP/Javascript (Jquery) avec des fonctionnalités de discussion de groupe et privée.

le problème est de savoir comment continuellement mettre à jour l'interface d'une manière naturelle et peut-être aussi comment montrer 'X tape.. les messages dans le chat privé..

la manière évidente semble être que toutes les X secondes/millisecondes le javascript sonne le serveur et récupère une liste de nouveaux messages entre le dernier ping et maintenant. Cependant, cela peut rendre l'interface un peu anormale, si soudainement le salon de chat est inondé de 5 messages. Je préférerais que chaque message apparaisse tel qu'il est tapé.

existe-t-il un moyen pour javascript de maintenir une connexion continue au serveur, le serveur pousse tout nouveau message vers cette connexion, et javascript les ajoute à l'interface de sorte qu'ils apparaissent simultanément, presque dès que le serveur les reçoit?

je sais qu'il y a des sondages options qui vous demandent d'installer certains modules apache, etc., mais je suis assez mauvais d'un sysadmin, donc je préférerais s'il y avait une solution très facile à installer sur un compte d'hébergement partagé, ou une solution php/mysql seulement.

26
demandé sur Click Upvote 2010-11-13 23:26:48

10 réponses

Chat avec PHP / AJAX /JSON

j'ai utilisé ce livre / tutoriel pour écrire mon application de chat:

AJAX et le PHP: Bâtiment Responsive Web Applications: Chapitre 5: AJAX chat et JSON .

il montre comment écrire un script de chat complet à partir de zéro.

Comète en fonction de chat

Vous pouvez également utiliser Comète avec PHP .

de: zeitoun :

Comet permet aux serveurs web d'envoyer des données au client sans avoir besoin que le client le demande. Par conséquent, cette technique produira des applications plus sensibles que L'AJAX classique. Dans les applications AJAX classiques, le navigateur web (client) ne peut pas être notifié en temps réel que le modèle de données du serveur a modifié. L'utilisateur doit créer une requête (par exemple en cliquant sur un lien) ou une requête AJAX périodique doit se produire afin d'obtenir de nouvelles données du serveur.

je vais vous montrer deux façons d'implémenter Comet avec PHP. Par exemple:

  1. basé sur hidden <iframe> à l'aide du serveur d'horodatage
  2. , basé sur le classique AJAX non-demande de retour

la première montre la date du serveur dans temps réel sur les clients, l'affichage d'un mini-chat.

Méthode 1: iframe + timestamp serveur

Vous avez besoin de:

  • un script PHP d'arrière-plan pour gérer la requête http persistante backend.php
  • un frondend HTML script de chargement de code Javascript index.html
  • le prototype bibliothèque JS , mais vous pouvez également utiliser jQuery

le script d'arrière-plan ( backend.php ) fera une boucle infinie et retournera le temps du serveur tant que le client est connecté. 

<?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>

le script frontend ( index.html ) crée un objet javascript" comet " qui connecte le script d'arrière-plan à l'étiquette de conteneur de temps. 

<!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éthode 2: AJAX non-demande de retour

vous avez besoin du même que dans la méthode 1 + un fichier pour dataexchange ( data.txt )

maintenant, backend.php va faire 2 choses:

  1. Écrire "des données.txt" lorsque de nouveaux messages sont envoyés
  2. faire une boucle infinie aussi longtemps que " données.txt "fichier inchangé 
<?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($filename);
while ($currentmodif <= $lastmodif) // check if the data file has been modified
{
    usleep(10000); // sleep 10ms to unload the CPU
    clearstatcache();
    $currentmodif = filemtime($filename);
}

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

le script frontend ( index.html ) crée le <div id="content"></div> tags hat contiendra les messages de chat comming de" data.txt" un fichier, et enfin il créez un objet javascript" comet " qui appellera le script d'arrière-plan afin de surveiller les nouveaux messages de chat.

l'objet comet enverra des requêtes AJAX chaque fois qu'un nouveau message a été reçu et chaque fois qu'un nouveau message est affiché. La connexion persistante n'est utilisée que pour surveiller les nouveaux messages. Un paramètre url timestamp est utilisé pour identifier le dernier message demandé, de sorte que le serveur ne retournera que lorsque les "données".txt" timestamp est plus récent que le client timestamp. 

<!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>

alternativement

vous pouvez également jeter un oeil à d'autres applications de chat pour voir comment ils l'ont fait:

45
répondu Wouter Dorgelo 2018-02-08 21:31:50

le sondage N'est pas une bonne idée. Vous avez besoin d'une solution qui utilise de longs sondages ou des sockets web.

http://hookbox.org est probablement le meilleur outil que vous pouvez utiliser.

c'est une boîte qui vit entre le serveur et les navigateurs et gère des abstractions appelées canaux (pensez à un canal IRC). C'est open source sur github: https://github.com/hookbox/hookbox la boîte est écrite en Python mais il peut facilement être utilisé avec un serveur dans n'importe quelle langue. Il est également livré avec une bibliothèque Javascript qui est construit sur jsio (utilise websockets, long-polling, ou quelle que soit la meilleure technologie disponible sur le navigateur) qui garantit qu'il utilise la meilleure technologie disponible dans les navigateurs.Dans une démo, j'ai vu un chat en temps réel mis en œuvre avec peu de ligne de code.

le but de Hookbox est de faciliter le développement d'applications web en temps réel, avec un l'accent est mis sur une intégration étroite avec la technologie web existante. En termes simples, Hookbox est une file d'attente de messages web-enabled. Les Browers peuvent se connecter directement à Hookbox, s'abonner à des canaux nommés, et publier et recevoir des messages sur ces canaux en temps réel. Une application externe (généralement l'application web elle-même) peut également publier des messages vers des canaux au moyen de L'interface Hookbox REST. Toute authentification et autorisation est effectuée par une application Web externe via un "webhook" désigné ." rappel.

alt text

chaque fois qu'un utilisateur se connecte ou opère sur un canal, ( s'abonner, publier, désabonner) Hookbox fait une demande http à l'application web pour l'autorisation de l'action. Une fois abonné à un canal, le navigateur de l'Utilisateur recevra des événements en temps réel qui proviennent soit d'un autre navigateur via l'api javascript, soit de l'application web via l'api REST.

insight est que tout développement d'application avec hookbox se produit soit en javascript, soit dans le langage natif de l'application web elle-même (par exemple PHP.)

vous avez besoin d'un serveur qui peut exécuter Python mais vous n'avez pas besoin de connaître Python.

si à la place vous voulez utiliser juste websockets et PHP c'est un bon point de départ: http://blancer.com/tutorials/69066/start-using-html5-websockets-today /

6
répondu Chris Cinelli 2014-03-24 19:34:59

avez-vous regardé PHPDaemon , qui est écrit avec l'usage actif de libevent et pnctl? It a beaucoup de fonctionnalités et même simple chat application de démonstration. Même elle a quelques implémentations de production.

2
répondu nefo_x 2010-11-14 00:18:05

ce pourrait être un bon point de départ

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

2
répondu 2010-11-16 16:23:26

je suggère de l'implémenter avec des WebSockets HTML5, avec de longs sondages ou comet comme repli pour les navigateurs plus anciens. Les WebSockets ouvrent une connexion persistante au navigateur. Il y a un open source php mise en œuvre d'un serveur websocket .

2
répondu Gipsy King 2010-11-17 16:08:32

je crois que le problème que vous regardez nécessite l'utilisation de la programmation web comète. Vous pouvez trouver plus de détails sur wikipedia, en cherchant la programmation Comet, et sur Ajaxian (je suis encore nouveau sur ce site et je ne peux pas poster plus d'un lien dans la réponse).

Le problème est que cela ne peut pas facilement être réalisé avec php côté serveur. Plus de détails: utilisant comet avec php

également, si vous recherchez sur google pour 'php comète", vous trouverez un tutoriel pour obtenir l'effet désiré.

MODIFIER PLUS TARD

projet Ape

a mis en œuvre un projet en utilisant ce moteur. Est grand.

Comet avec php

Espérons que cette aide, Gabriel

1
répondu Gabriel Croitoru 2017-05-23 11:45:58

je sais que c'est très tard, mais ici

modifier: lien mis à jour

1
répondu Aditya Goturu 2013-01-11 11:34:53

Je ne L'ai jamais fait avec PHP avant, mais vous êtes le meilleur pari serait probablement une sorte de connexion socket. Voici le manuel PHP pour les sockets.

Je ne me souviens pas de qui était le tutoriel, mais j'ai fait un salon de chat comme ce que vous voulez en utilisant Flash pour le client et Java pour le serveur. Je pense que ce lien pourrait être où le tutoriel était et il peut vous aider.

0
répondu Aaron Hathaway 2010-11-13 20:39:22

je vous suggère d'essayer Socket.IO avec NodeJS . Socket.IO vous donne une API client agréable et très facile, fonctionne sur la plupart des navigateurs modernes et utilise le transport approprié lorsque possible (Websocket, long polling, etc). NodeJS est un démon côté serveur, qui détient les connexions HTTP. Site officiel de la Socket.IO contient des informations sur la façon de les utiliser ensemble. Espérons qu'il saura vous aider.

0
répondu galymzhan 2010-11-16 05:17:59

cela semble prometteur! Peut-être même super facile à relooker :)

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

script de Chat Ajax en Javascript / PHP

Description

Ajax Chat est un léger logiciel de chat web personnalisable mis en œuvre en JavaScript et PHP. Le script ne nécessite pas Java, Flash, ou tous les autres plugins.

Caractéristiques

  • Public et le chat privé..
  • Connexion en tant qu'utilisateur inscrit ou en tant qu'invité.
  • statut D'absence, couleurs personnalisées, smileys, icônes de genre/statut d'utilisateur.
  • Ajax Chat peut être intégré à un système d'adhésion tiers en mettant en œuvre la routine d'authentification de l'utilisateur. Options d'intégration avancées: si l'utilisateur est connecté site web, il peut être connecté au chat automatiquement.

Ajax lightweight chat script

*s'il vous Plaît noter que ceci est un copier/coller de le site d'origine .

0
répondu Qwerty 2015-01-02 22:34:05