This commit is contained in:
Andros Fenollosa 2021-03-13 11:07:46 +01:00
parent 42ffd59ad6
commit 7800581731
5 changed files with 8 additions and 87 deletions

View File

@ -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
```

View File

@ -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"]

View File

@ -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);

View File

@ -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

View File

@ -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