Added ASGI server for websocket using the sample chat application as starting point

booker/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

booker/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class BookerConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'booker'

booker/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

booker/mqtt_collector.py

@@ -0,0 +1,48 @@
+from channels.generic.websocket import AsyncWebsocketConsumer
+import json
+
+'''
+class ScannerCollector(WebsocketConsumer):
+    def connect(self):
+        self.accept()
+
+    def disconnect(self, close_code):
+        pass
+
+    def receive(self, text_data):
+        text_data_json = json.loads(text_data)
+        message = text_data_json['message']
+
+        self.send(text_data=json.dumps({
+            'message': message
+        }))
+'''
+
+class ScannerCollector(AsyncWebsocketConsumer):
+
+    async def connect(self):
+        self.group_name = 'scanner'
+        # join to group
+        await self.channel_layer.group_add(self.group_name, self.channel_name)
+        await self.accept()
+
+    async def disconnect(self):
+        # leave group
+        await self.channel_layer.group_discard(self.group_name, self.channel_name)
+
+    async def receive(self, text_data):
+        print('>>>', text_data)
+        msg = '{"message":"pong!"}' if text_data == '{"message":"ping"}' else text_data
+        print('<<<', msg)
+        await self.channel_layer.group_send(
+            self.group_name,
+            {
+                'type': 'distribute',
+                'text': msg
+            }
+        )
+
+    async def distribute(self, event):
+        valother = event['text']
+        await self.send(text_data=valother)
+

booker/templates/booker/index.html

@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}Scanner Index{% endblock %}
+
+{% block content %}
+    What chat room would you like to enter?<br>
+    <input id="room-name-input" type="text" size="100"><br>
+    <input id="room-name-submit" type="button" value="Enter">
+
+    <script>
+        document.querySelector('#room-name-input').focus();
+        document.querySelector('#room-name-input').onkeyup = function(e) {
+            if (e.keyCode === 13) {  // enter, return
+                document.querySelector('#room-name-submit').click();
+            }
+        };
+
+        document.querySelector('#room-name-submit').onclick = function(e) {
+            var roomName = document.querySelector('#room-name-input').value;
+            window.location.pathname = '/booker/' + roomName + '/';
+        };
+    </script>
+{% endblock %}

booker/templates/booker/scanner.html

@@ -0,0 +1,47 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}Scanner: {{ scanner_id }}{% endblock %}
+
+{% block content %}
+    <textarea id="chat-log" cols="100" rows="20"></textarea><br>
+    <input id="chat-message-input" type="text" size="100"><br>
+    <input id="chat-message-submit" type="button" value="Send">
+    {{ scanner_id|json_script:"room-name" }}
+    <script>
+        const roomName = JSON.parse(document.getElementById('room-name').textContent);
+
+        const chatSocket = new WebSocket(
+            'ws://'
+            + window.location.host
+            + '/ws/scannerdata/'
+            + roomName
+            + '/'
+        );
+
+        chatSocket.onmessage = function(e) {
+            const data = JSON.parse(e.data);
+            document.querySelector('#chat-log').value += (data.message + '\n');
+        };
+
+        chatSocket.onclose = function(e) {
+            console.error('Chat socket closed unexpectedly');
+        };
+
+        document.querySelector('#chat-message-input').focus();
+        document.querySelector('#chat-message-input').onkeyup = function(e) {
+            if (e.keyCode === 13) {  // enter, return
+                document.querySelector('#chat-message-submit').click();
+            }
+        };
+
+        document.querySelector('#chat-message-submit').onclick = function(e) {
+            const messageInputDom = document.querySelector('#chat-message-input');
+            const message = messageInputDom.value;
+            chatSocket.send(JSON.stringify({
+                'message': message
+            }));
+            messageInputDom.value = '';
+        };
+    </script>
+{% endblock %}

booker/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

booker/urls.py

@@ -0,0 +1,9 @@
+from django.urls import path
+from . import views
+
+app_name = 'booker'
+
+urlpatterns = [
+    path('', views.index, name='index'),
+    path('<str:scanner_id>/', views.scanner, name='scanner')
+]

booker/views.py

@@ -0,0 +1,10 @@
+from django.shortcuts import render
+
+
+def index(request):
+    return render(request, 'booker/index.html')
+
+def scanner(request, scanner_id):
+    return render(request, 'booker/scanner.html', {
+        'scanner_id': scanner_id
+    })