barebones unauthenticated websocket

reactive-python · rmorshea · Jul 21, 2021 · May 17, 2021 · May 18, 2021 · May 18, 2021
commit 923276e7d43121708f7762ef8ac810f4e03d9400
diff --git a/dj_idom/asgi.py b/dj_idom/asgi.py
@@ -17,19 +17,13 @@
 # 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
-from channels.security.websocket import AllowedHostsOriginValidator
 
 from .consumers import CommandConsumer
 
 application = ProtocolTypeRouter(
  {
- # ASGI app has concurrency problems, see
- # See https://github.com/django/channels/issues/1587
  "http": http_asgi_app,
- "websocket": AllowedHostsOriginValidator(
- AuthMiddlewareStack(URLRouter([url("", CommandConsumer().as_asgi())]))
- ),
+ "websocket": URLRouter([url("", CommandConsumer().as_asgi())]),
  }
 )
diff --git a/dj_idom/settings.py b/dj_idom/settings.py
@@ -37,6 +37,7 @@
  "django.contrib.sessions",
  "django.contrib.messages",
  "django.contrib.staticfiles",
+ "channels", # Websocket library
 ]
 
 MIDDLEWARE = [
@@ -123,3 +124,8 @@
 # https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
+
+# Static Files (CSS, JavaScript, Images)
+STATICFILES_DIRS = [
+ os.path.join(BASE_DIR, "dj_idom", "static"),
+]
diff --git a/dj_idom/static/scripts.js b/dj_idom/static/scripts.js
@@ -0,0 +1,40 @@
+// Set up a websocket at the base endpoint
+let LOCATION = window.location;
+let WS_PROTOCOL = "";
+if (LOCATION.protocol == "https:") {
+WS_PROTOCOL = "wss://";
+} else {
+WS_PROTOCOL = "ws://";
+}
+let WS_ENDPOINT_URL = WS_PROTOCOL + LOCATION.host;
+let COMMAND_SOCKET = new WebSocket(WS_ENDPOINT_URL);
+
+// Receivable commands
+COMMAND_SOCKET.onmessage = function (response) {
+// Websocket message received, parse for JSON
+console.info(response);
+json_response = JSON.parse(response.data);
+
+// Check for valid commands
+console.info("Websocket has recieved a message", json_response);
+};
+
+// Websocket open event
+COMMAND_SOCKET.onopen = function () {
+console.info("Websocket has opened.");
+};
+
+// Websocket close event
+COMMAND_SOCKET.onclose = function () {
+console.info("Websocket has closed.");
+};
+
+// Websocket error event
+COMMAND_SOCKET.onerror = function (error) {
+console.error(
+"Websocket encountered a crtical error: ",
+error.message,
+"Closing socket..."
+);
+COMMAND_SOCKET.close();
+};
diff --git a/dj_idom/templates/base.html b/dj_idom/templates/base.html
@@ -1,10 +1,12 @@
+{% load static %}
 <!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">
+ <script src="{% static 'scripts.js' %}" crossorigin="anonymous"></script>
  <title>IDOM</title>
 </head>
 

@@ -1,4 +1,4 @@
-django<4.0.0
-daphne<4.0.0
-channels<4.0.0
-idom<1.0.0
+django<4.0.0 # Django Library
+daphne<4.0.0 # Production ASGI webserver
+channels<4.0.0 # Django websocket features
+idom<1.0.0 # Python React