Add demo

README.md

@@ -2,18 +2,20 @@
 
 Demonstration of how to build a real time application using HTML over WebSockets in Django 
 
+![demo](demo.gif)
+
 ## Article that inspired
 
 https://alistapart.com/article/the-future-of-web-software-is-html-over-websockets/
 
 ## Run demo
 
-``` bash
-docker-compose -f docker-compose.pro.yaml up -d
-```
-
-## Develpment
-
 ``` bash
 docker-compose -f docker-compose.dev.yaml up -d
 ```
+
+Open
+
+``` bash
+my-demo.localhost
+```

apps/back/consumers.py

@@ -6,15 +6,12 @@ from apps.back.models import Post, Comment
 class BlogConsumer(WebsocketConsumer):
 
     def connect(self):
-        ''' Cliente se conecta '''
         self.accept()
 
     def disconnect(self, close_code):
-        ''' Cliente se desconecta '''
         pass
 
     def receive(self, text_data):
-        ''' Cliente envía información y nosotros la recibimos '''
         text_data_json = json.loads(text_data)
         selector = text_data_json["selector"]
         template = text_data_json["template"]

apps/front/templates/layouts/main.html

@@ -32,16 +32,13 @@
         <script>
             document.$CHAT_SOCKET = new WebSocket('ws://my-demo.localhost/ws/blog/{{ CHANNEL}}/');
 
-              // Conectado
              document.$CHAT_SOCKET.addEventListener('open', () => {
                  console.log('Connect');
              });
-             // Desconectado
              document.$CHAT_SOCKET.addEventListener('close', () => {
                   console.log('Disconnect');
               });
 
-             // Recibir mensaje y dibujar
              document.$CHAT_SOCKET.addEventListener('message', (event) => {
                 const NEW_DATA = JSON.parse(event.data);
                 const rangeHTML = document.createRange().createContextualFragment(NEW_DATA.html);

docker-compose.dev.yaml

@@ -21,15 +21,6 @@ services:
       REDIS_URL: redis
     expose:
       - 8000
-    depends_on:
-      - redis
-
-  redis:
-    image: redis:alpine
-    restart: always
-    expose:
-      - 6379
-
 
   caddy:
     image: caddy:alpine

docker-compose.pro.yaml

@@ -1,66 +0,0 @@
-version: '3.1'
-
-services:
-
-  db:
-    image: postgres
-    restart: always
-    volumes:
-      - ./../postgres_data:/var/lib/postgresql/data
-    environment:
-      POSTGRES_DB: guitarlions
-      POSTGRES_PASSWORD: postgres
-    expose:
-      - 5432
-
-  django:
-    build: .
-    restart: always
-    entrypoint: /django-launcher.pro.sh
-    volumes:
-      - .:/usr/src/app/
-    environment:
-      DEBUG: "False"
-      ALLOWED_HOSTS: ""
-      SECRET_KEY: "secret"
-      DB_HOST: db
-      DB_NAME: "guitarlions"
-      DB_USER: "postgres"
-      DB_PASSWORD: "postgres"
-      DB_PORT: "5432"
-      DOMAIN: ""
-      DOMAIN_URL: "https://"
-      STATIC_URL: "/static/"
-      MEDIA_URL: "/media/"
-      EMAIL_USE_TLS: True
-      EMAIL_HOST: ""
-      EMAIL_USE_TLS: "True"
-      EMAIL_PORT: "2525"
-      EMAIL_USER: ""
-      EMAIL_PASSWORD: ""
-    expose:
-      - 8000
-    depends_on:
-      - db
-
-  redis:
-    image: redis:alpine
-    restart: always
-    expose:
-      - 6379
-    depends_on:
-      - django
-
-  caddy:
-    image: caddy:alpine
-    restart: always
-    ports:
-        - 80:80
-        - 443:443
-    volumes:
-        - .:/usr/src/app/
-        - ./Caddyfile:/etc/caddy/Caddyfile
-        - ./../caddy_data:/data
-    depends_on:
-      - django
-