それでは、一般的な「ライブブロードキャスト」とは何ですか？
「ライブ」は3行のテキストであり、書き込み可能な「場所」では、追加されたテキストが1行上にあったテキストをシフトします。 新しい行を追加すると、一番上の行は失われます。 なぜそうなのか-最初は行が1つで、サイトのヘッダーに任意のテキストを書き込むことを許可しただけで、その後、この行を通信に使用し始めたことに気付きました-その行を置き換えずに追加しました。 したがって、少し機会を拡大しました。 つまり 「ライブブロードキャスト」は、現在サイトにいる人々とチャットする機会であり、何かを伝える機会です（たとえば、House MDの新しいシリーズがリリースされたことなど）。
実装自体は、PHPで実装されたサーバー部分と、Prototypeを使用してJavaScriptで実装されたクライアント部分の2つの部分で構成されています。 両方の部分は要点まで単純です。
クライアント部
レイアウトの観点から見ると、「ライブブロードキャスト」は入力が配置される3つのdivを表します。 入力から境界線が削除され、「雲」のある画像が背景に配置されます。 ディーバの場合、テキストが「溶ける」または「消えていく」という印象を与えるために、テキストの異なる色が設定されます。
JavaScriptの観点から見ると、すべてが非常に単純です。 入力のために「keypress」イベントをリッスンし、return / enterを押すことを確認し、そうであれば、入力の内容をパラメーターとしてサーバーへのAJAXリクエストを実行します。 リクエストが正常に実行されると、サーバーから返されたデータが3つのdivの内容をテキストに置き換えます。 さらに、何も送信されない場合にテキストが更新されるように、PeriodicalExecuterを作成します。これは、15秒ごとにサーバーに要求を送信し、「ブロードキャスト」というテキストを受信します。
function update_live(t)
{
var r=eval('('+t.responseText+')');
$('message0').update(r.m0);
$('message1').update(r.m1);
$('message2').update(r.m2);
}
Event.observe($('message'), 'keypress', function(event) {
if (event.keyCode == Event.KEY_RETURN)
{
new Ajax.Request("/admin/message.php",{
method: 'post',
parameters: {msg: $('message').value},
onSuccess: update_live
});
$('message').value='';
}});
new PeriodicalExecuter(function()
{
new Ajax.Request("/admin/message.php",{
method: 'get',
parameters: {t: (new Date()).getTime()} ,
onSuccess: update_live
})
},15);
new Ajax.Request("/admin/message.php",{method: 'get',parameters: {t: (new Date()).getTime()} ,onSuccess: update_live});
サーバー側
また、シンプルで普通です。
$m=@file_get_contents(PATH_TO_FILE);
if( ($o=@unserialize($m))===FALSE )
$o=Array(' IT- ',' ',' ...');
if($_SERVER['REQUEST_METHOD']=='POST')
{
$_POST['msg']=trim($_POST['msg']);
if(empty($_POST['msg']))
exit();
array_shift($o);
array_push($o, htmlspecialchars(stripslashes($_POST['msg'])));
file_put_contents($_SERVER['DOCUMENT_ROOT'].'/message.txt',serialize($o));
}
echo('{');
for($i=0;$i<3;$i++)
echo('m'.$i.': "'.addcslashes($o[$i], '"').'", ');
echo('m: ""}');
データストレージにファイルを使用することにしました（迅速な解決策が必要でした。テーブルに別のファイルを作成したくありませんでした。つまり、普通の怠inessです）。 ファイルが存在しない場合、またはファイルから配列を復元できない場合（非シリアル化）、デフォルトのコンテンツ（コードの先頭で指定された配列）があると想定します。
ページがPOSTメソッドによって要求された場合、配列から最初の要素を削除し、配列の最後に特別なものを回した後、受け取ったものを追加します。 HTMLエンティティのHTML文字、必要なストリップスラッシュ 特定のサーバーでmagic_quotes_gpc（引用符のエスケープ）が有効になっていることがわかります。 シールドを削除します（このコードの移植性のために、これらの魔法の引用符が含まれているかどうかを確認する必要があります）。 次に、配列のシリアル化された表現をファイルに保存します。
ページのリクエスト方法に関係なく、「エーテル」の現在のコンテンツをJSON形式で出力します（JavaScriptからこれを使いやすくするため、文字通りevalを記述してオブジェクトを受け取る）。
これは非常に簡単です。 この記事が誰かがページにインタラクティブ機能を追加するのに役立つことを願っています。