代码之家 › 专栏 › 技术社区 › Ali

如何使用Jquery/PHP实现聊天室?

ajax-polling ajax jquery javascript php

Ali · 技术社区 · 14 年前

我希望使用PHP/Javascript(Jquery)实现一个聊天室,它同时具有组聊天和私人聊天功能。

问题是如何以一种自然的方式不断更新界面,也可能是如何在私人聊天中显示“X正在键入…”消息。

最明显的方式似乎是,javascript每X秒/毫秒对服务器进行ping并在上一次ping和现在之间获取一个新消息列表。然而,如果聊天室突然被5条信息淹没,这会让界面看起来有点不自然。我希望每条消息都按原样显示。

javascript是否有办法保持与服务器的连续连接,服务器将任何新消息推送到该连接,javascript将它们添加到界面中,以便它们几乎在服务器接收到它们时同时出现?

我知道有些轮询选项需要您安装一些apache模块等,但我的系统管理员很差,因此我更希望在共享主机帐户上有一个非常容易安装的解决方案,或者只有php/mysql的解决方案。

10 回复 | 直到 14 年前

pbarney 7 年前

与PHP/AJAX/JSON聊天

我用这本书/教程编写了聊天应用程序:

AJAX and PHP: Building Responsive Web Applications: Chapter 5: AJAX chat and JSON .

它展示了如何从头开始编写完整的聊天脚本。

基于Comet的聊天

你也可以使用 Comet 具有 PHP .

发件人: zeitoun :

Comet允许web服务器向客户端发送数据,而不需要客户端请求数据。因此,这种技术将产生比经典AJAX更灵敏的应用程序。在经典AJAX应用程序中,web浏览器(客户端)无法实时通知服务器数据模型已更改。用户必须创建一个请求(例如,通过单击一个链接),或者必须定期执行AJAX请求,以便从服务器获取新数据。

我将向您展示用PHP实现Comet的两种方法。例如:

基于隐藏 <iframe> 使用服务器时间戳
基于典型的AJAX不返回请求

第一个在客户机上实时显示服务器日期,显示一个小聊天。

方法1:iframe+服务器时间戳

你需要:

处理持久http请求的后端PHP脚本 backend.php
加载Javascript代码的frondended HTML脚本 index.html
这个 prototype JS library ,但也可以使用jQuery

后端脚本( 后端.php )将执行无限循环,并在连接客户端时返回服务器时间。

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

前端脚本( index.html索引 )创建将后端脚本连接到时间容器标记的“comet”javascript对象。

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

方法2:AJAX不返回请求

您需要与方法1中的相同+用于数据交换的文件( data.txt )

现在,backend.php将做两件事:

发送新消息时写入“data.txt”
只要“data.txt”文件不变,就执行无限循环

<?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();
?>

前端脚本( index.html索引 )创建 <div id="content"></div> tags hat将包含从“data.txt”文件提交的聊天消息,最后它将创建一个“comet”javascript对象,该对象将调用后端脚本以监视新的聊天消息。

comet对象将在每次收到新消息和每次发布新消息时发送AJAX请求。持久连接仅用于监视新消息。timestamp url参数用于标识最后请求的消息,因此只有当“data.txt”时间戳比客户端时间戳更新时,服务器才会返回。

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

或者

您还可以查看其他聊天应用程序,了解它们是如何做到的:

http://hot-things.net/?q=blite -废话!Lite是一个基于AJAX的浏览器聊天系统,支持MySQL、SQLite和PostgreSQL数据库。
Gmail/Facebook Style jQuery Chat 这个jQuery聊天模块使您可以无缝地将Gmail /脸谱网风格的聊天集成到您现有的网站中。
Writing a JavaScript/PHP Chat Server -教程
CometChat -CometChat在标准共享服务器上运行。只需要PHP+mySQL。

Adam Smith 11 年前

投票不是个好主意。您需要一个使用长轮询或web套接字的解决方案。

http://hookbox.org 可能是你能用的最好的工具。

它是一个位于服务器和浏览器之间的框,管理称为通道(考虑IRC通道)的抽象。它是github上的开源: https://github.com/hookbox/hookbox 这个盒子是用Python编写的,但是它可以很容易地与用任何语言编写的服务器一起使用。它还附带了一个基于jsio的Javascript库(使用websockets、long polling或任何浏览器上可用的最佳技术),保证它使用浏览器中可用的最佳技术 实时聊天 用几行代码实现。

Hookbox的目的是简化实时Web应用程序的开发,重点是与现有Web技术紧密结合。简单地说,Hookbox是一个支持web的消息队列。浏览者可以直接连接到Hookbox,订阅命名频道,并在这些频道上实时发布和接收消息。外部应用程序(通常是web应用程序本身)也可以通过Hookbox REST接口将消息发布到频道。所有身份验证和授权都由外部web应用程序通过指定的“webhook”回调执行。

alt text

每当用户连接或操作频道时,(订阅、发布、取消订阅)Hookbox向web应用程序发出http请求,请求对该操作进行授权。一旦订阅了一个频道,用户的浏览器将通过javascript api接收来自另一个浏览器的实时事件,或者通过restapi接收来自web应用程序的实时事件。

他们的关键见解是,使用hookbox进行的所有应用程序开发都是以javascript或web应用程序本身的本地语言(例如PHP)进行的

您需要一个可以运行Python的服务器,但不必知道Python。

如果您只想使用websockets和PHP,这是一个很好的起点: http://blancer.com/tutorials/69066/start-using-html5-websockets-today/

nefo_x 14 年前

你看过吗 PHPDaemon ,它是用libevent和pnctl的活动用法编写的? It 有很多功能,甚至很简单 chat 演示应用程序。甚至它也有一些生产实现。

fcalderan fcalderan 14 年前

这可能是一个很好的起点

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

Gipsy King 14 年前

我建议用HTML5 WebSockets实现它,用长轮询或comet作为旧浏览器的后备。WebSockets打开到浏览器的持久连接。有一个开源的 php implementation of a websocket server .

Community CDub 7 年前

我相信您所看到的问题需要使用comet web编程。你可以在维基百科上找到更多的细节,通过搜索彗星编程,以及在Ajax上(我仍然是这个网站的新手,我不能在响应中发布超过1个链接)。

问题是,在服务器端使用php很难做到这一点。更多细节: using comet with php

另外,如果你在google上搜索“php comet”,你会找到一个教程来达到你想要的效果。

以后编辑

Ape project

使用此引擎实现了一个项目。太棒了。

Comet with php

希望能帮上忙, 加布里埃尔

user1565598 user1565598 12 年前

我知道已经很晚了,但是 here

编辑:更新的链接

Qwerty 10 年前

这看起来很有前途!甚至可以非常容易地重新设计风格:)

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

Javascript/PHP中的Ajax聊天脚本

说明

Ajax Chat是一个用JavaScript和PHP实现的轻量级可定制的web聊天软件。该脚本不需要Java、Flash或任何其他插件。

特征

公共和私人聊天。
以注册用户或来宾身份登录。
客场状态,自定义颜色,笑脸,用户性别/状态图标。
通过实现用户身份验证例程,Ajax聊天可以与第三方成员系统集成。高级集成选项:如果用户登录到网站,则可以自动登录聊天室。

Ajax lightweight chat script

*请注意,这是从 the original site .

Aaron Hathaway 14 年前

我以前没用过PHP,但你最好是用某种socket连接。这是 PHP manual 用于插座。

我不记得是谁的教程,但我做了一个聊天室,就像你想要的那样,用Flash作为客户端,用Java作为服务器。我想 this link 可能是教程所在的地方,它可能会帮助你。

galymzhan 14 年前

我建议你试试 Socket.IO 一起 NodeJS 。IO为您提供了一个非常简单的客户端API,可以在大多数现代浏览器上工作,并尽可能使用适当的传输(Websocket、长轮询等)。NodeJS是一个服务器端守护进程,它保存HTTP连接。Socket.IO的官方站点包含如何将它们一起使用的信息。希望对你有帮助。