Jak grać!prace nad kometą?

Play zawiera przykładową aplikację do czatu, która pokazuje, jak korzystać z Comet. Przykład nie wyjaśnia jednak, co się dzieje, więc oto, co odkryłem.

Model

Aby inni mogli znaleźć nowe aktualizacje, które wysyłasz, muszą być gdzieś przechowywane. Możliwe, że może to być w pamięci podręcznej lub nawet w samym kontrolerze, ale baza danych będzie najbezpieczniejszym zakładem, więc będziesz chciał modelu. Będą również potrzebować sposobu, aby określić które aktualizacje są dla nich nowe, co oznacza, że prawdopodobnie będziesz potrzebował pola daty(zobacz także: last update timestamp with JPA ). Przykład czatu używa prostego modelu:

@Entity
public class Message extends Model {     
    public String user;
    public Date date;
    public String text;

    public Message(String user, String text) {
        this.user = user;
        this.text = text;
        this.date = new Date();
    }       
}

Controller

public static void postMessage(String message) {
    new Message(session.get("nick"), message).save();
}

I jeden do pobierania aktualizacji:

public static void newMessages() {
    List<Message> messages = Message.find("date > ?", request.date).fetch();
    if (messages.isEmpty()) {
        suspend("1s");
    }
    renderJSON(messages);
}

Kluczowym bitem jest suspend("1s"), który utrzymuje otwarte żądanie HTTP, sprawdzając nowe dane raz na drugi.

Widok

Widok ma trzy obowiązki-wysyłanie nowych danych, pobieranie aktualizacji i renderowanie tych aktualizacji.

Wysyłanie, podobnie jak odpowiednia akcja kontrolera, nie robi nic specjalnego:

$('#send').click(function(e) {
    var message = $('#message').val();
    $('#message').val('');
    $.post('@{postMessage()}', {message: message}); 
});

Pobieranie aktualizacji jest magicznym bitem:

// Retrieve new messages
var getMessages = function() {
    $.ajax({
        url: '@{newMessages()}',
        success: function(messages) {
            $(messages).each(function() {
                display(this);
            });
        },
        complete: function() {
            getMessages();
        },
        dataType: 'json'
    });
}
getMessages();

getMessages() jest wywoływany raz, aby rozpocząć, a następnie wywołuje się rekurencyjnie po każdym pomyślnym żądaniu. Otrzymuje akcję newMessages(), która szuka nowych wiadomości, a jeśli nie ma żadnych, które przechowuje żądanie otwarte, dopóki nie ma czegoś do zgłoszenia. Po znalezieniu nowych wiadomości dane JSON są przekazywane do funkcji display:

var display = function(message) {
    $('#thread').append(tmpl('message_tmpl', {message: message}));
}

Funkcja display stosuje mikro-szablon JavaScript do danych JSON w celu renderowania nowych wiadomości. Korzystanie z mikro szablonów nie jest konieczne, ale działa całkiem dobrze. Są one zawarte w szablonie strony, która będzie z nich korzystać:

<script type="text/html" id="message_tmpl">
    <div class="message <%= message.user == '${session.nick}' ? 'you' : '' %> <%= message.user == 'notice' ? 'notice' : '' %>">
        <h2><%= message.user %></h2>
        <p><%= message.text.replace('\n', '<br/>') %></p>
    </div>
</script>

type="text/html" powoduje, że przeglądarki, wyszukiwarki i czytniki ekranu do ignorowania całego bloku script. Wynik jest znacznie łatwiejszy do odczytania i utrzymania niż używanie jQuery do budowania węzłów lub łączenia łańcuchów. Ogólnie rzecz biorąc, jest to dość proste, gdy wiesz, które bity są istotne.