2

自社のブログをゼロから作成しており、PHPとjQueryのcometを使用して、新しいブログ投稿を更新できるようにしました。

しかし、その後、ページの途中にある自分のブログ投稿をユーザーが編集または削除した場合はどうなるでしょうか。それをどのように更新しますか？

更新：おっと、Twitterはブログ投稿が削除された場合、すぐには削除されないことに気づきました。しかし、それでも、そのような機能があると便利です。

4

1 に答える 1

3

Cometソリューションを使用しているので、おそらく何らかのパブリッシュ/サブスクライブパターンに従っています。

そこから、探しているものを達成するためのいくつかの方法があります。1つの解決策は、ページに表示されるブログ投稿ごとにサブスクリプションを設定することです。ブログのバックエンドは、ブログの投稿に変更が加えられたかどうか、およびサブスクライブされたリスナーのいずれかに情報が公開されたかどうかを監視できます。リスナーは公開された情報を受け取り、それに応じてブログ投稿を更新または削除できます。

使用しているCometソリューションがわからないため、 Pusherを使用してこれを行った場合は、おそらく次のようにします（アイデアを独自のソリューションに変換できることを願っています）。

HTML

サブスクライブするチャネルを識別した各ブログ投稿エントリのHTMLマークアップに一意の識別子を設定します。

<article data-entry-id="blog-post-1">
   Some blog post content
</article>
<!-- more blog posts -->

JavaScript

jQueryを使用しているので、ページ上のすべてのブログ投稿を見つけることができます。

var blogPosts = jQuery( 'article[data-entry-id]' );

サーバー（この場合はプッシャー）に接続します。

var pusher = new Pusher( 'app_key' );

次に、各ブログエントリのチャネルをサブスクライブします。

var channels = {}; // lookup if required later
var channel;
blogPosts.each( function( i, el ) {
  el = jQuery( el );
  var blogId = el.attr( 'data-entry-id' );
  channel = pusher.subscribe( blogId );
  channel.bind( 'blog_entry_updated', handleUpdate );
  channel.bind( 'blog_entry_deleted', handleDelete );
  channels[ blogId ] = channel;
} );

ブログ投稿ごとにチャネルがサブスクライブされたので、それらのチャネルで発生するイベント（データ更新）を処理するコードを記述する必要があります。

  • handleUpdateブログ投稿が更新されたときに呼び出されます
  • handleDeleteブログ投稿が削除されたときに呼び出されます

blog_entry_updated送信するデータは次の形式であると想定します。

{
  blogEntryId: 'an_id', // an ID that matches the data-entry-id attribute value
  html: '<!-- some HTML -->` // the HTML for the updated blog post
}

このhandleUpdate関数は次のようなことを行うことができます。

function handleUpdate( data ) {
  var blogId = data.blogEntryId;
  var el = jQuery( 'article[data-entry-id=' + blogId + ']' );
  el.html( data.html );
}

ブログ投稿が更新されたことを示すために、何らかの効果を追加することもできます。

注：回避できる場合は、HTMLの非常に大きなチャンクを送信することはお勧めしません。デルタ（ブログ投稿の変更された部分を示す）を介して送信できる場合は、より良い可能性があります。

はhandleDelete似たようなことをします：

function handleDelete( data ) {
  var blogId = data.blogEntryId;
  var el = jQuery( 'article[data-entry-id=' + blogId + ']' );
  el.slideUp( function() {
    el.remove(); // slide out of view then remove the element
  } );
}

PHP

サーバーでは、変更を公開する必要があります。

それが更新の場合（Pusher PHPライブラリを使用して）、次のようにします。

require( '../lib/Pusher.php' );
require( 'config.php' ); // general config. In this case it includes the Pusher config

// some code that handles the update, updates the DB etc.
// The result of which means we have a $blogEntryId value
// and $html for the updated content

// this data structure is converted to JSON to be consumed on the client
$data = array( 'blogEntryId' => $blogEntryId, 'html' => $html );

$pusher = new Pusher( APP_KEY, APP_SECRET, APP_ID );

// trigger the event on the appropriate channel, using the update event
$pusher->trigger( $blogEntryId, 'blog_entry_updated', $data );

これにより$data、クライアントに配信され、handleUpdate関数が呼び出されます。

削除された機能は、送信するHTMLがないことを除いて、非常によく似ています。

$data = array( 'blogEntryId' => $blogEntryId );

$pusher = new Pusher( APP_KEY, APP_SECRET, APP_ID );

$pusher->trigger( $blogEntryId, 'blog_entry_deleted', $data );

上で述べたように、うまくいけば、このソリューションに似たものを自分のComet実装に適用できます。

于 2013-02-20T10:10:03.857 に答える