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]))
+        ),
     }
 )