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