你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!

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

我正在寻找使用PHP / Javascript（Jquery）实现聊天室，同时具有群聊和私聊功能。问题是如何以自然的方式不断更新界面，以及如何在私人聊天中显示“X正在输入...”消息。显而易见的方式似乎是每隔x秒/毫秒javascript ping服务器并在最后一次ping和现在之间获取新消息列表。然而，这可能会使界面看起来有点不自然，如果突然聊天室充斥着5条消息。我希望每条消息都会在输入时显示。有没有办法使javascript保持与服务器的连续连接，服务器将任何新消息推送到此连接，并且javascript将它们添加到接口，以便它们同时出现，几乎在服务器收到它们之后？我知道有一些轮询选项需要你安装一些apache模块等，但我很糟糕的系统管理员，因此我更喜欢在共享主机帐户或php上有一个非常容易安装的解决方案/ mysql唯一的解决方案。

已邀请:

10 个回复

宦哨抹存胳

与PHP / AJAX / JSON聊天我用这本书/教程写了我的聊天应用程序： AJAX和PHP：构建响应式Web应用程序：第5章：AJAX聊天和JSON。它展示了如何从头开始编写完整的聊天脚本。以Comet为基础的聊天你也可以使用Comet with PHP。来自：zeitoun： Comet使Web服务器能够将数据发送到客户端，而无需客户端请求它。因此，这种技术将产生比传统AJAX更具响应性的应用程序。在传统的AJAX应用程序中，无法实时通知Web浏览器（客户端）服务器数据模型已更改。用户必须创建请求（例如通过单击链接）或定期的AJAX请求必须发生才能从服务器获取新数据。我将向您展示使用PHP实现Comet的两种方法。例如：基于隐藏的<iframe>使用服务器时间戳基于经典的AJAX非返回请求第一个在客户端上实时显示服务器日期，显示迷你聊天。方法1：iframe +服务器时间戳你需要：一个后端PHP脚本来处理持久的http请求backend.php 一个frondend HTML脚本加载Javascript代码index.html 原型JS库，但你也可以使用jQuery 后端脚本（backend.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）创建一个“彗星”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>标签帽子将包含来自“data.txt”文件的聊天消息，最后它创建一个“彗星”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 - BlaB！ Lite是基于AJAX的，可以通过支持MySQL，SQLite和Linux的任何浏览器聊天系统获得最佳浏览效果。 PostgreSQL数据库。 Gmail / Facebook风格jQuery聊天 - 这个jQuery聊天模块使您可以将Gmail / Facebook风格的聊天无缝集成到现有网站中。编写JavaScript / PHP聊天服务器 - 教程 CometChat - CometChat在标准共享服务器上运行。只需要PHP + mySQL。

遣莫捅炭

轮询不是一个好主意。您需要一个使用长轮询或Web套接字的解决方案。 http://hookbox.org可能是您可以使用的最佳工具。它是一个存在于服务器和浏览器之间的盒子，管理称为通道的抽象（想想IRC通道）。它是github上的开源：https：//github.com/hookbox/hookbox该框是用Python编写的，但它可以很容易地与任何语言编写的服务器一起使用。它还带有一个基于jsio构建的Javascript库（使用websockets，长轮询或浏览器上可用的最佳技术），保证它使用浏览器中提供的最佳技术。在演示中我看到了用几行代码实现实时聊天。 Hookbox的目的是简化实时Web应用程序的开发，重点是与现有Web技术的紧密集成。简而言之，Hookbox是一个支持Web的消息队列。浏览器可以直接连接到Hookbox，订阅命名频道，以及在这些频道上实时发布和接收消息。外部应用程序（通常是Web应用程序本身）也可以通过Hookbox REST接口将消息发布到通道。所有身份验证和授权都由外部Web应用程序通过指定的“webhook”回调执行。每当用户在频道上连接或操作时，（订阅，发布，取消订阅）Hookbox都会向Web应用程序发出http请求以授权该操作。订阅频道后，用户的浏览器将通过javascript api接收来自另一个浏览器的实时事件，或者通过REST api从Web应用程序接收。他们的主要见解是，所有使用hookbox的应用程序开发都可以在javascript中运行，也可以在Web应用程序本身的本地语言中运行（例如PHP）。你需要一个可以运行Python的服务器，但你不必了解Python。如果您只想使用websockets和PHP，这是一个很好的起点：http：//blancer.com/tutorials/69066/start-using-html5-websockets-today/

荒劫娇噬

你看过PHPDaemon，它是用libevent和pnctl的主动使用而写的吗？它有很多功能，甚至简单的聊天演示应用程序。即使它有一些生产实现。

芯伶句餐绕

这可能是一个很好的起点 http://css-tricks.com/jquery-php-chat/

拟僚疽刊剔

我建议使用HTML5 WebSockets实现它，使用长轮询或彗星作为旧浏览器的后备。 WebSockets打开与浏览器的持久连接。有一个websocket服务器的开源php实现。

讼乐

我相信您正在考虑的问题需要使用彗星网络编程。您可以通过搜索Comet编程和Ajaxian找到更多关于维基百科的详细信息（我还是这个网站的新手，我不能在响应中发布超过1个链接）。问题是，在服务器端使用php无法轻松实现这一点。更多细节：用彗星用PHP 此外，如果你在谷歌上搜索'php comet'，你会找到一个教程来达到预期的效果。稍后编辑猿项目使用此引擎实现了一个项目。是很棒的。彗星用PHP 希望这可以帮助，加布里埃尔

貉骂

我知道这已经很晚了，但在这里编辑：更新链接

净爽

这很有希望！甚至可能非常容易重新调整:) http://www.php-development.ru/javascripts/ajax-chat.php Javascript / PHP中的Ajax Chat脚本描述 Ajax Chat是一个轻量级的可定制的网络聊天软件，用JavaScript和PHP实现。该脚本不需要Java，Flash或任何其他插件。特征公共和私人聊天。以注册用户或访客身份登录。离开状态，自定义颜色，表情符号，用户性别/状态图标。通过实现用户身份验证例程，Ajax Chat可以与第三方成员系统集成。高级集成选项：如果用户登录到网站，他可以自动登录聊天。 *请注意，这是原始网站的复制/粘贴。

嘘崇蔡对

我之前没有使用PHP，但你最好的选择可能是某种套接字连接。这是套接字的PHP手册。我不记得是谁的教程，但我创建了一个聊天室，就像你想用客户端使用Flash和服务器使用Java一样。我认为这个链接可能是教程的所在，它可能会帮助你。

催备南菠亨

我建议你和NodeJS一起尝试Socket.IO。 Socket.IO为您提供了一个非常简单的客户端API，适用于大多数现代浏览器，并尽可能使用适当的传输（Websocket，长轮询等）。 NodeJS是服务器端守护程序，它保存HTTP连接。 Socket.IO的官方站点包含有关如何一起使用它们的信息。希望它会对你有所帮助。

要回复问题请先登录或注册

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

10 个回复

发起人

ajax_polling

问题状态

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

与内容相关的链接

10 个回复

发起人

ajax_polling

问题状态