web-dev-qa-db-ja.com

Jquery / PHPを使用してチャットルームを実装する方法

グループチャットとプライベートチャットの両方の機能を備えたPHP/Javascript（Jquery）を使用してチャットルームを実装したいと考えています。

問題は、インターフェイスを自然な方法で継続的に更新する方法と、プライベートチャットで「X isTyping ..」メッセージを表示する方法です。

明白な方法は、X秒/ミリ秒ごとにJavaScriptがサーバーにpingを送信し、最後のpingから現在までの間に新しいメッセージのリストを取得することです。ただし、チャットルームが突然5つのメッセージでいっぱいになった場合、これはインターフェイスを少し不自然に見せることがあります。入力したとおりに各メッセージを表示したい。

Javascriptがサーバーへの継続的な接続を維持する方法はありますか？サーバーはこの接続に新しいメッセージをプッシュし、javascriptはそれらをインターフェイスに追加して、サーバーがメッセージを受信するとすぐに同時に表示されるようにしますか？

私はいくつかのApacheモジュールなどをインストールする必要があるいくつかのポーリングオプションがあることを知っていますが、私はシステム管理者にかなり悪いので、共有ホスティングアカウントまたはphpに非常に簡単にインストールできるソリューションがあったらいいと思います/ mysqlのみのソリューション。

phpjavascriptjqueryajaxajax-polling
25
Click Upvote

PHP/AJAX/JSONとチャット

私はこの本/チュートリアルを使ってチャットアプリケーションを作成しました。

AJAXとPHP：レスポンシブWebアプリケーションの構築：第5章：AJAXチャットとJSON 。

最初から完全なチャットスクリプトを作成する方法を示します。

コメットベースのチャット

Comet と [〜＃〜] php [〜＃〜] 。を併用することもできます

差出人： zeitoun ：

Cometを使用すると、クライアントがデータを要求する必要なく、Webサーバーがクライアントにデータを送信できます。そのため、この手法は、従来のAJAXよりも応答性の高いアプリケーションを生成します。従来のAJAX=アプリケーションでは、Webブラウザー（クライアント）はサーバーデータモデルが変更されたことをリアルタイムで通知できません。ユーザーは（リンクをクリックするなどして）リクエストを作成する必要があります）または定期的にAJAXサーバーから新しいデータを取得するには、リクエストが発生する必要があります。

PHPでCometを実装する2つの方法を紹介します。例えば：

  1. 非表示<iframe>に基づき、サーバーのタイムスタンプを使用
  2. 古典的なAJAX返されないリクエストに基づく

1つ目はクライアントのサーバーの日付をリアルタイムで表示し、はミニチャットを表示します。

方法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）は、バックエンドスクリプトを時間コンテナタグに接続する「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は2つのことを行います。

  1. 新しいメッセージが送信されたら「data.txt」に書き込みます
  2. 「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」ファイルからのチャットメッセージがハットに含まれます。最後に、バックエンドスクリプトを呼び出す「comet」javascriptオブジェクトが作成されます。新しいチャットメッセージを監視するために注文します。

コメットオブジェクトは、新しいメッセージが受信されるたび、および新しいメッセージが投稿されるたびに、AJAX=リクエストを送信します。永続的な接続は、新しいメッセージを監視するためにのみ使用されます。タイムスタンプ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>

あるいは

他のチャットアプリケーションを見て、彼らがどのように行ったかを確認することもできます。

46
Wouter Dorgelo

ポーリングは良い考えではありません。ロングポーリングまたはWebソケットを使用するソリューションが必要です。

http://hookbox.org はおそらくあなたが使える最高のツールです。

これはサーバーとブラウザの間に存在し、チャネルと呼ばれる抽象化を管理するボックスです（IRCチャネルについて考えてください）。これはgithubのオープンソースです： https：// github .com/hookbox/hookbox ボックスはPythonで記述されていますが、任意の言語で記述されたサーバーで簡単に使用できます。jsio上に構築されたJavaScriptライブラリも付属しています（Webソケット、ロングポーリング、またはブラウザーで利用できる最高のテクノロジーを使用）ブラウザーで利用できる最高のテクノロジーを使用することを保証します。デモでリアルタイムチャット数行のコードで実装されています。

Hookboxの目的は、既存のWebテクノロジーとの緊密な統合に重点を置いて、リアルタイムWebアプリケーションの開発を容易にすることです。簡単に言うと、フックボックスはWeb対応のメッセージキューです。ブラウザーは、フックボックスに直接接続し、名前付きチャネルをサブスクライブし、それらのチャネルでリアルタイムにメッセージを公開および受信できます。外部アプリケーション（通常はWebアプリケーション自体）も、フックボックスRESTインターフェースを使用してチャネルにメッセージを発行します。すべての認証と承認は、指定された「webhook」コールバックを介して外部Webアプリケーションによって実行されます。

alt text

ユーザーがチャネルに接続または操作するときはいつでも（サブスクライブ、パブリッシュ、サブスクライブ解除）、フックボックスはアクションの承認のためにWebアプリケーションにhttpリクエストを発行します。チャネルをサブスクライブすると、ユーザーのブラウザは、JavaScript APIを介して別のブラウザから、またはREST APIを介してWebアプリケーションから発生したリアルタイムイベントを受け取ります。

彼らの重要な洞察は、フックボックスを使用したすべてのアプリケーション開発が、JavaScriptまたはWebアプリケーション自体のネイティブ言語（PHPなど）で発生することです。

Pythonを実行できるサーバーが必要ですが、Pythonを知っている必要はありません。

代わりにwebsocketとPHP=を使用したい場合、これは良い出発点です： http://blancer.com/tutorials/69066/start-using-html5-websockets-today /

5
Chris Cinelli

これは良い出発点になるかもしれません

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

2
fcalderan

HTML5 WebSocketsで実装することをお勧めします。長いポーリングまたは彗星は、古いブラウザーのフォールバックとして使用します。 WebSocketはブラウザへの永続的な接続を開きます。オープンソースがあります websocketサーバーのphp実装 。

2
Gipsy King

Libeventとpnctlのアクティブな使用法で書かれた PHPDaemon を見たことはありますか？ It には多くの機能があり、さらにシンプルな chat デモアプリケーションさえあります。それでもいくつかの本番実装があります。

2
nefo_x

これは有望に見えます！簡単にスタイルを変更することもできます:)

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

JavaScript/PHPのAjaxチャットスクリプト

説明文

Ajax Chatは、JavaScriptとPHPで実装された、軽量でカスタマイズ可能なWebチャットソフトウェアです。スクリプトには、Java、Flash、またはその他のプラグインは必要ありません。

特徴

  • パブリックおよびプライベートチャット。
  • 登録ユーザーまたはゲストとしてログインします。
  • 退席中ステータス、カスタムカラー、スマイリー、ユーザーの性別/ステータスアイコン。
  • Ajax Chatは、ユーザー認証ルーチンを実装することにより、サードパーティのメンバーシップシステムと統合できます。高度な統合オプション：ユーザーがWebサイトにログインしている場合、自動的にチャットにログインできます。

Ajax lightweight chat script

*これは 元のサイト からのコピー/貼り付けであることに注意してください。

1
Qwerty

あなたが見ている問題は、彗星のWebプログラミングを使用する必要があると思います。ウィキペディア、Cometプログラミングの検索、およびAjaxianで詳細を確認できます（私はまだこのサイトを初めて使用していて、応答に複数のリンクを投稿することはできません）。

問題は、これをサーバー側のPHPでは簡単に実現できないことです。詳細： phpで彗星を使用

また、Googleで「php comet」を検索すると、目的の効果を実現するためのチュートリアルが見つかります。

後で編集

類人猿プロジェクト

このエンジンを使用してプロジェクトを実装しました。素晴らしいです。

phpに対応

これが役に立てば幸い、ガブリエル

1
Gabriel Croitoru

私はこれが非常に遅いことを知っていますが、 ここ

編集：リンクを更新

1
user1565598

Socket.IO を NodeJS と組み合わせて試すことをお勧めします。 Socket.IOは素敵で非常に簡単なクライアントAPIを提供し、最新のほとんどのブラウザーで動作し、可能な場合は適切なトランスポート（WebSocket、ロングポーリングなど）を使用します。 NodeJSは、HTTP接続を保持するサーバー側デーモンです。 Socket.IOの公式サイトには、それらを一緒に使用する方法に関する情報が含まれています。それがあなたを助けることを願っています。

0
galymzhan

私は以前にPHPでそれをやったことはありませんが、おそらくソケット接続の一種であると思われます。ソケットの PHPマニュアル をご覧ください。

チュートリアルが誰だったのか覚えていませんが、クライアントにFlashを使用し、サーバーにJava=と思います。 this link チュートリアルがあった場所かもしれませんし、あなたを助けるかもしれません。

0
Aaron Hathaway