Advanced Websocket Features (#17)

* propogate websocket down

* update tests

* add websocket login

* add admin view to test app

* fix styling error

* more styling

* last styling error i swear

* fix spelling error

* remove unneeded sys import check

* reconnecting WS (broken)

* prevent duplicate component registration fix #5

* allow any host to access this test app

* cache -> lru_cache

* py 3.7 compartibility

* memory efficient way of preventing reregistration

* Limit developer control the websocket

* fix readme filename (idom.py -> components,py)

* format readme

* simplify render example

* fix settings anchor link

* add IDOM_WS_RECONNECT to readme

* add session middleware

* change disconnect to close

* add view ID to WebSocketConnection

* change tab width to 2

* prettier format

* IDOM_WS_RECONNECT -> IDOM_WS_RECONNECT_TIMEOUT

* format base.html

* WebSocket -> Websocket

* Awaitable[None]

* add disconnect within websocketconnection

* bump idom version

* revert component registration check

* use django-idom version for svg

* add EOF newlines

* cleanup WebsocketConnection

* remove useless init from websocket consumer

* IDOM_WS_MAX_RECONNECT_DELAY

* self.view_id -> view_id

Author: Archmonger

README.md

@@ -5,7 +5,7 @@
     <img alt="Tests" src="https://github.com/idom-team/django-idom/workflows/Test/badge.svg?event=push" />
   </a>
   <a href="https://pypi.python.org/pypi/django-idom">
-    <img alt="Version Info" src="https://img.shields.io/pypi/v/idom.svg"/>
+    <img alt="Version Info" src="https://img.shields.io/pypi/v/django-idom.svg"/>
   </a>
   <a href="https://github.com/idom-team/django-idom/blob/main/LICENSE">
     <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-purple.svg">
@@ -20,14 +20,13 @@ interfaces in pure Python.
 <a
   target="_blank"
   href="https://mybinder.org/v2/gh/idom-team/idom-jupyter/main?filepath=notebooks%2Fintroduction.ipynb">
-  <img
+<img
     alt="Binder"
     valign="bottom"
     height="21px"
     src="https://mybinder.org/badge_logo.svg"/>
 </a>
 
-
 # Install Django IDOM
 
 ```bash
@@ -46,7 +45,7 @@ your_project/
 ├── urls.py
 └── example_app/
     ├── __init__.py
-    ├── idom.py
+    ├── components.py
     ├── templates/
     │   └── your-template.html
     └── urls.py
@@ -60,7 +59,7 @@ order to create ASGI websockets within Django. Then, we will add a path for IDOM
 websocket consumer using `IDOM_WEBSOCKET_PATH`.
 
 _Note: If you wish to change the route where this websocket is served from, see the
-available [settings](#settings.py)._
+available [settings](#settingspy)._
 
 ```python
 
@@ -75,14 +74,14 @@ os.environ.setdefault("DJANGO_SETTINGS_MODULE", "test_app.settings")
 # Fetch ASGI application before importing dependencies that require ORM models.
 http_asgi_app = get_asgi_application()
 
+from channels.auth import AuthMiddlewareStack
 from channels.routing import ProtocolTypeRouter, URLRouter
 
 application = ProtocolTypeRouter(
     {
         "http": http_asgi_app,
-        "websocket": URLRouter(
-          # add a path for IDOM's websocket
-          [IDOM_WEBSOCKET_PATH]
+        "websocket": SessionMiddlewareStack(
+            AuthMiddlewareStack(URLRouter([IDOM_WEBSOCKET_PATH]))
         ),
     }
 )
@@ -111,6 +110,10 @@ IDOM_BASE_URL: str = "_idom/"
 # Only applies when not using Django's caching framework (see below).
 IDOM_WEB_MODULE_LRU_CACHE_SIZE: int | None = None
 
+# Maximum seconds between two reconnection attempts that would cause the client give up.
+# 0 will disable reconnection.
+IDOM_WS_MAX_RECONNECT_DELAY: int = 604800
+
 # Configure a cache for loading JS files
 CACHES = {
   # Configure a cache for loading JS files for IDOM
@@ -147,8 +150,8 @@ ultimately be referenced by name in `your-template.html`. `your-template.html`.
 import idom
 
 @idom.component
-def Hello(greeting_recipient):  # component names are camelcase by convention
-    return Header(f"Hello {greeting_recipient}!")
+def Hello(websocket, greeting_recipient):  # component names are camelcase by convention
+    return idom.html.header(f"Hello {greeting_recipient}!")
 ```
 
 ## `example_app/templates/your-template.html`
@@ -165,8 +168,6 @@ idom_component module_name.ComponentName param_1="something" param_2="something-
 In context this will look a bit like the following...
 
 ```jinja
-<!-- don't forget your load statements -->
-{% load static %}
 {% load idom %}
 
 <!DOCTYPE html>
@@ -184,15 +185,11 @@ You can then serve `your-template.html` from a view just
 [like any other](https://docs.djangoproject.com/en/3.2/intro/tutorial03/#write-views-that-actually-do-something).
 
 ```python
-from django.http import HttpResponse
-from django.template import loader
-
+from django.shortcuts import render
 
 def your_view(request):
     context = {}
-    return HttpResponse(
-      loader.get_template("your-template.html").render(context, request)
-    )
+    return render(request, "your-template.html", context)
 ```
 
 ## `example_app/urls.py`

src/django_idom/config.py

@@ -10,6 +10,7 @@
 IDOM_BASE_URL = getattr(settings, "IDOM_BASE_URL", "_idom/")
 IDOM_WEBSOCKET_URL = IDOM_BASE_URL + "websocket/"
 IDOM_WEB_MODULES_URL = IDOM_BASE_URL + "web_module/"
+IDOM_WS_MAX_RECONNECT_DELAY = getattr(settings, "IDOM_WS_MAX_RECONNECT_DELAY", 604800)
 
 _CACHES = getattr(settings, "CACHES", {})
 if _CACHES:

src/django_idom/paths.py

@@ -2,13 +2,13 @@
 
 from . import views
 from .config import IDOM_WEB_MODULES_URL, IDOM_WEBSOCKET_URL
-from .websocket_consumer import IdomAsyncWebSocketConsumer
+from .websocket_consumer import IdomAsyncWebsocketConsumer
 
 
 IDOM_WEBSOCKET_PATH = path(
-    IDOM_WEBSOCKET_URL + "<view_id>/", IdomAsyncWebSocketConsumer.as_asgi()
+    IDOM_WEBSOCKET_URL + "<view_id>/", IdomAsyncWebsocketConsumer.as_asgi()
 )
-"""A URL resolver for :class:`IdomAsyncWebSocketConsumer`
+"""A URL resolver for :class:`IdomAsyncWebsocketConsumer`
 
 While this is relatively uncommon in most Django apps, because the URL of the
 websocket must be defined by the setting ``IDOM_WEBSOCKET_URL``. There's no need

src/django_idom/templates/idom/component.html

@@ -7,6 +7,7 @@
     mountPoint,
     "{{ idom_websocket_url }}",
     "{{ idom_web_modules_url }}",
+    "{{ idom_ws_max_reconnect_delay }}",
     "{{ idom_component_id }}",
     "{{ idom_component_params }}"
   );

src/django_idom/templatetags/idom.py

@@ -10,6 +10,7 @@
     IDOM_REGISTERED_COMPONENTS,
     IDOM_WEB_MODULES_URL,
     IDOM_WEBSOCKET_URL,
+    IDOM_WS_MAX_RECONNECT_DELAY,
 )
 
 
@@ -27,6 +28,7 @@ def idom_component(_component_id_, **kwargs):
         "class": class_,
         "idom_websocket_url": IDOM_WEBSOCKET_URL,
         "idom_web_modules_url": IDOM_WEB_MODULES_URL,
+        "idom_ws_max_reconnect_delay": IDOM_WS_MAX_RECONNECT_DELAY,
         "idom_mount_uuid": uuid4().hex,
         "idom_component_id": _component_id_,
         "idom_component_params": urlencode({"kwargs": json_kwargs}),

src/django_idom/websocket_consumer.py

@@ -2,9 +2,12 @@
 import asyncio
 import json
 import logging
-from typing import Any
+from dataclasses import dataclass
+from typing import Any, Awaitable, Callable, Optional
 from urllib.parse import parse_qsl
 
+from channels.auth import login
+from channels.db import database_sync_to_async as convert_to_async
 from channels.generic.websocket import AsyncJsonWebsocketConsumer
 from idom.core.dispatcher import dispatch_single_view
 from idom.core.layout import Layout, LayoutEvent
@@ -15,14 +18,30 @@
 _logger = logging.getLogger(__name__)
 
 
-class IdomAsyncWebSocketConsumer(AsyncJsonWebsocketConsumer):
-    """Communicates with the browser to perform actions on-demand."""
+@dataclass
+class WebsocketConnection:
+    scope: dict
+    close: Callable[[Optional[int]], Awaitable[None]]
+    disconnect: Callable[[int], Awaitable[None]]
+    view_id: str
+
 
-    def __init__(self, *args: Any, **kwargs: Any) -> None:
-        super().__init__(*args, **kwargs)
+class IdomAsyncWebsocketConsumer(AsyncJsonWebsocketConsumer):
+    """Communicates with the browser to perform actions on-demand."""
 
     async def connect(self) -> None:
         await super().connect()
+
+        user = self.scope.get("user")
+        if user and user.is_authenticated:
+            try:
+                await login(self.scope, user)
+                await convert_to_async(self.scope["session"].save)()
+            except Exception:
+                _logger.exception("IDOM websocket authentication has failed!")
+        elif user is None:
+            _logger.warning("IDOM websocket is missing AuthMiddlewareStack!")
+
         self._idom_dispatcher_future = asyncio.ensure_future(self._run_dispatch_loop())
 
     async def disconnect(self, code: int) -> None:
@@ -41,14 +60,17 @@ async def _run_dispatch_loop(self):
         try:
             component_constructor = IDOM_REGISTERED_COMPONENTS[view_id]
         except KeyError:
-            _logger.warning(f"Uknown IDOM view ID {view_id!r}")
+            _logger.warning(f"Unknown IDOM view ID {view_id!r}")
             return
 
         query_dict = dict(parse_qsl(self.scope["query_string"].decode()))
         component_kwargs = json.loads(query_dict.get("kwargs", "{}"))
 
+        # Provide developer access to parts of this websocket
+        socket = WebsocketConnection(self.scope, self.close, self.disconnect, view_id)
+
         try:
-            component_instance = component_constructor(**component_kwargs)
+            component_instance = component_constructor(socket, **component_kwargs)
         except Exception:
             _logger.exception(
                 f"Failed to construct component {component_constructor} "

src/js/package-lock.json

@@ -18,7 +18,7 @@
     "rollup-plugin-replace": "^2.2.0"
   },
   "dependencies": {
-    "idom-client-react": "^0.33.0",
+    "idom-client-react": "^0.33.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }

src/js/package.json

@@ -14,18 +14,24 @@ export function mountViewToElement(
   mountPoint,
   idomWebsocketUrl,
   idomWebModulesUrl,
+  maxReconnectTimeout,
   viewId,
   queryParams
 ) {
   const fullWebsocketUrl =
     WS_ENDPOINT_URL + idomWebsocketUrl + viewId + "/?" + queryParams;
 
-  const fullWebModulesUrl = LOCATION.origin + "/" + idomWebModulesUrl
+  const fullWebModulesUrl = LOCATION.origin + "/" + idomWebModulesUrl;
   const loadImportSource = (source, sourceType) => {
     return import(
       sourceType == "NAME" ? `${fullWebModulesUrl}${source}` : source
     );
   };
 
-  mountLayoutWithWebSocket(mountPoint, fullWebsocketUrl, loadImportSource);
+  mountLayoutWithWebSocket(
+    mountPoint,
+    fullWebsocketUrl,
+    loadImportSource,
+    maxReconnectTimeout
+  );
 }

src/js/src/index.js

@@ -19,12 +19,16 @@
 # Fetch ASGI application before importing dependencies that require ORM models.
 http_asgi_app = get_asgi_application()
 
+from channels.auth import AuthMiddlewareStack  # noqa: E402
 from channels.routing import ProtocolTypeRouter, URLRouter  # noqa: E402
+from channels.sessions import SessionMiddlewareStack  # noqa: E402
 
 
 application = ProtocolTypeRouter(
     {
         "http": http_asgi_app,
-        "websocket": URLRouter([IDOM_WEBSOCKET_PATH]),
+        "websocket": SessionMiddlewareStack(
+            AuthMiddlewareStack(URLRouter([IDOM_WEBSOCKET_PATH]))
+        ),
     }
 )

tests/test_app/asgi.py

@@ -2,12 +2,12 @@
 
 
 @idom.component
-def HelloWorld():
+def HelloWorld(websocket):
     return idom.html.h1({"id": "hello-world"}, "Hello World!")
 
 
 @idom.component
-def Button():
+def Button(websocket):
     count, set_count = idom.hooks.use_state(0)
     return idom.html.div(
         idom.html.button(
@@ -22,7 +22,7 @@ def Button():
 
 
 @idom.component
-def ParametrizedComponent(x, y):
+def ParametrizedComponent(websocket, x, y):
     total = x + y
     return idom.html.h1({"id": "parametrized-component", "data-value": total}, total)
 
@@ -32,5 +32,5 @@ def ParametrizedComponent(x, y):
 
 
 @idom.component
-def SimpleBarChart():
+def SimpleBarChart(websocket):
     return VictoryBar()

tests/test_app/components.py

@@ -26,7 +26,7 @@
 
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ["*"]
 
 # Application definition
 INSTALLED_APPS = [

tests/test_app/settings.py

@@ -1,23 +1,22 @@
 {% load static %} {% load idom %}
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      rel="shortcut icon"
-      type="image/png"
-      href="{% static 'favicon.ico' %}"
-    />
-    <title>IDOM</title>
-  </head>
 
-  <body>
-    <h1>IDOM Test Page</h1>
-    <div>{% idom_component "test_app.components.HelloWorld" class="hello-world" %}</div>
-    <div>{% idom_component "test_app.components.Button" class="button" %}</div>
-    <div>{% idom_component "test_app.components.ParametrizedComponent" class="parametarized-component" x=123 y=456 %}</div>
-    <div>{% idom_component "test_app.components.SimpleBarChart" class="simple-bar-chart" %}</div>
-  </body>
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
+  <title>IDOM</title>
+</head>
+
+<body>
+  <h1>IDOM Test Page</h1>
+  <div>{% idom_component "test_app.components.HelloWorld" class="hello-world" %}</div>
+  <div>{% idom_component "test_app.components.Button" class="button" %}</div>
+  <div>{% idom_component "test_app.components.ParametrizedComponent" class="parametarized-component" x=123 y=456 %}
+  </div>
+  <div>{% idom_component "test_app.components.SimpleBarChart" class="simple-bar-chart" %}</div>
+</body>
+
 </html>

tests/test_app/templates/base.html

@@ -17,11 +17,16 @@
     1. Import the include() function: from django.urls import include, path
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
+from django.contrib import admin
 from django.urls import path
 
 from django_idom import IDOM_WEB_MODULES_PATH
 
 from .views import base_template
 
 
-urlpatterns = [path("", base_template), IDOM_WEB_MODULES_PATH]
+urlpatterns = [
+    path("", base_template),
+    IDOM_WEB_MODULES_PATH,
+    path("admin/", admin.site.urls),
+]