Tweaking display a bit, so it looks ok-ish.

TODO

@@ -1,6 +1,8 @@
 - channels backend shouild use config var (URL-ish?)
 - test deploy to heroku
-- give rooms a name 
-    - and let people change them -- would demonstrate different kinds of messages
+√ give rooms a name 
+    - and let people change them
+- persist handles, let change them
+- work on ui/ux a bit
 - include old-school django POST view?
     might make a good flow for the article, start with old-style and then add WSS

chat/views.py

@@ -25,14 +25,17 @@ def chat_room(request, label):
     """
     Room view - show the room, with latest messages.
 
-    If the room with the given label doesn't exist, automatically create it
-    (a la etherpad).
-
     The template for this view has the WebSocket business to send and stream
     messages, so see the template for where the magic happens.
     """
+    # If the room with the given label doesn't exist, automatically create it (a
+    # la etherpad).
     room, created = Room.objects.get_or_create(label=label)
+
+    # We want to show the last 50 messages, but ordered most-recent-last
+    messages = reversed(room.messages.order_by('-timestamp')[:50])
+
     return render(request, "chat/room.html", {
         'room': room,
-        'messages': room.messages.order_by('-timestamp')[:100]
+        'messages': messages,
     })

static/chat.js

@@ -12,11 +12,13 @@ $(function() {
         + '</tr>');
     };
 
-    $("#go").on("click", function(event) {
+    $("#chatform").on("submit", function(event) {
         var message = {
             handle: $('#handle').val(),
             message: $('#message').val(),
         }
         chatsock.send(JSON.stringify(message));
+        $("#message").val('').focus();
+        return false;
     });
 });

templates/chat/room.html

@@ -3,26 +3,31 @@
 {% block content %}
   {% load staticfiles %}
   <h1>{{ room.label }}</h1>
-  <table id="chat">
-    <tbody>
-      {% for message in messages %}
-        <tr>
-          <td>{{ message.timestamp }}</td>
-          <td>{{ message.handle }}</td>
-          <td>{{ message.message }}</td>
-        </tr> 
-      {% endfor %}
-    </tbody>
-    <tfoot>
-    <tr>
-      <td>Say something:</td>
-      <td><input id="handle" type="text" placeholder="your name"></td>
-      <td>
-        <input id="message" type="text" placeholder="message">
-        <button id="go">Say it</button>
-      </td>
-    </tfoot>
-  </table>
+  <p>
+    <label for="handle">Your name:</label>
+    <input id="handle" type="text" placeholder="handle">
+  </p>
+  <form id="chatform">
+    <table id="chat">
+      <tbody>
+        {% for message in messages %}
+          <tr>
+            <td>{{ message.formatted_timestamp }}</td>
+            <td>{{ message.handle }}</td>
+            <td>{{ message.message }}</td>
+          </tr> 
+        {% endfor %}
+      </tbody>
+      <tfoot>
+      <tr>
+        <td>Say something:</td>
+        <td colspan=2>
+          <input id="message" type="text" placeholder="message">
+          <button type="submit" id="go">Say it</button>
+        </td>
+      </tfoot>
+    </table>
+  </form>
 {% endblock content %}
 
 {% block afterbody %}