Hey look it's an echo server.

NOTES

@@ -2,4 +2,10 @@ Random notes and stuff, likely to become feedback to Andrew:
 
 - static files is weird. how should it work in prod? WhiteNoise-ish would be
   ideal; integrate with Daphe?
-- channel backend - parse from URL?
+- channel backend - parse from URL?
+- "routing" in websockets is weird - there's a path, but realy only a single
+  consumer. some sort of url-ish routing perhaps?
+
+        websocket.connect -> path dispatch -> websocket.connect.{path} channel
+
+- debugging errors in websocket consumers SUCKS

TODO

@@ -3,4 +3,7 @@
     might make a good flow for the article, start with old-style and then add WSS
 - 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
+- rename Message.username to Message.handle?
+- reorganize code - ideally the chat app should be semi-reusable

channels_example/routing.py

@@ -1,8 +1,12 @@
 from channels.staticfiles import StaticFilesConsumer
+from chat.consumers import ws_connect, ws_receive
 
 channel_routing = {
     # This makes Django serve static files from settings.STATIC_URL, similar
     # to django.views.static.serve. This isn't ideal (not exactly production
     # quality) but it works for a minimal example.
-    'http.request': StaticFilesConsumer()
+    'http.request': StaticFilesConsumer(),
+
+    'websocket.connect': ws_connect,
+    'websocket.receive': ws_receive,
 }

channels_example/settings.py

@@ -120,10 +120,6 @@
     os.path.join(BASE_DIR, 'static'),
 ]
 
-# Simplified static file serving.
-# https://warehouse.python.org/project/whitenoise/
-STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'
-
 # Channels
 # FIXME: read from env
 CHANNEL_LAYERS = {
@@ -134,4 +130,26 @@
         },
         "ROUTING": "channels_example.routing.channel_routing",
     },
+}
+
+LOGGING = {
+    'version': 1,
+    'disable_existing_loggers': False,
+    'handlers': {
+        'console': {
+            'class': 'logging.StreamHandler',
+        },
+    },
+    'loggers': {
+        'django': {
+            'handlers': ['console'],
+            'propagate': True,
+            'level': 'DEBUG'
+        },
+        'chat': {
+            'handlers': ['console'],
+            'propagate': False,
+            'level': 'DEBUG',
+        },
+    },
 }

chat/consumers.py

@@ -0,0 +1,10 @@
+import logging
+
+log = logging.getLogger(__name__)
+
+def ws_connect(message):
+    log.debug('ws_connect path={path}'.format(**message.content))
+
+def ws_receive(message):
+    log.debug('ws_receive text={text}'.format(**message.content))
+    message.reply_channel.send({'text': message['text']})

static/chat.js

@@ -0,0 +1,13 @@
+$(function() {
+    // When we're using HTTPS, use WSS too.
+    var ws_scheme = window.location.protocol == "https:" ? "wss://" : "ws://";
+
+    var chatsock = new ReconnectingWebSocket(ws_scheme + location.host + "/chat");
+    chatsock.onmessage = function(message) {
+        alert(message.data);
+    };
+
+    $("#go").on("click", function(event) {
+        chatsock.send($("#message")[0].value);
+    });
+});

static/humans.txt

@@ -1 +0,0 @@
-hi

templates/base.html

@@ -1 +1,3 @@
-{% block content %}{% endblock content %}
+{% block content %}{% endblock content %}
+
+{% block afterbody %}{% endblock afterbody %}

templates/room.html

@@ -1,21 +1,28 @@
 {% extends "base.html" %}
 
 {% block content %}
-    <h1>{{ room.label }}</h1>
-    <table>
-    {% for message in messages %}
-      <tr>
-        <td>{{ message.timestamp }}</td>
-        <td>{{ message.username }}</td>
-        <td>{{ message.message }}</td>
-      </tr> 
-    {% endfor %}
+  {% load staticfiles %}
+  <h1>{{ room.label }}</h1>
+  <table>
+  {% for message in messages %}
     <tr>
-      <td>Say something:</td>
-      <td><input id="username" type="text" placeholder="your name"></td>
-      <td>
-        <input id="message" type="text" placeholder="message">
-        <button id="go">Say it</button>
-      </td>
-    </table>
-{% endblock content %}
+      <td>{{ message.timestamp }}</td>
+      <td>{{ message.username }}</td>
+      <td>{{ message.message }}</td>
+    </tr> 
+  {% endfor %}
+  <tr>
+    <td>Say something:</td>
+    <td><input id="username" type="text" placeholder="your name"></td>
+    <td>
+      <input id="message" type="text" placeholder="message">
+      <button id="go">Say it</button>
+    </td>
+  </table>
+{% endblock content %}
+
+{% block afterbody %}
+  <script type="text/javascript" src='{% static "jquery-1.12.1.min.js" %}'></script>
+  <script type="text/javascript" src='{% static "reconnecting-websocket.min.js" %}'></script>
+  <script type="text/javascript" src='{% static "chat.js" %}'></script>
+{% endblock afterbody %}