From c16d281892300d453c908e8abeea4cdad116258a Mon Sep 17 00:00:00 2001 From: Xamora Date: Mon, 27 Nov 2023 15:10:06 +0100 Subject: [PATCH] Global Chat --- frontend/consumers.py | 36 ++++++++++++++++++++++++++++++++ frontend/routing.py | 6 ++++++ frontend/static/css/index.css | 32 ++-------------------------- frontend/static/js/views/Chat.js | 8 +++++++ frontend/templates/chat.html | 24 +++++++++++++++++++++ frontend/templates/index.html | 1 + frontend/views.py | 1 + 7 files changed, 78 insertions(+), 30 deletions(-) create mode 100644 frontend/consumers.py create mode 100644 frontend/routing.py create mode 100644 frontend/templates/chat.html diff --git a/frontend/consumers.py b/frontend/consumers.py new file mode 100644 index 0000000..f3e4e6e --- /dev/null +++ b/frontend/consumers.py @@ -0,0 +1,36 @@ +import json +from channels.generic.websocket import WebsocketConsumer +from asgiref.sync import async_to_sync + +class ChatConsumer(WebsocketConsumer): + def connect(self): + self.room_group_name = 'test' + + async_to_sync(self.channel_layer.group_add)( + self.room_group_name, + self.channel_name + ) + + self.accept() + + + def receive(self, text_data): + text_data_json = json.loads(text_data) + message = text_data_json['message'] + + async_to_sync(self.channel_layer.group_send)( + self.room_group_name, + { + 'type':'chat_message', + 'message':message + } + ) + + def chat_message(self, event): + message = event['message'] + + self.send(text_data=json.dumps({ + 'type':'chat', + 'message':message + })) + diff --git a/frontend/routing.py b/frontend/routing.py new file mode 100644 index 0000000..5df8609 --- /dev/null +++ b/frontend/routing.py @@ -0,0 +1,6 @@ +from django.urls import re_path +from . import consumers + +websocket_urlpatterns = [ + re_path(r'ws/socket-server/', consumers.ChatConsumer.as_asgi()) +] diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css index 9416823..db15e14 100644 --- a/frontend/static/css/index.css +++ b/frontend/static/css/index.css @@ -1,37 +1,9 @@ body { - --nav-width: 200px; - margin: 0 0 0 var(--nav-width); + margin: 10; font-family: 'Quicksand', sans-serif; font-size: 18px; } -.nav { - position: fixed; - top: 0; - left: 0; - width: var(--nav-width); - height: 100vh; - background: #222222; -} - -.nav__link { - display: block; - padding: 12px 18px; - text-decoration: none; - color: #eeeeee; - font-weight: 500; -} - -.nav__link:hover { - background: rgba(255, 255, 255, 0.05); -} - -#app { - margin: 2em; - line-height: 1.5; - font-weight: 500; -} - a { color: #009579; -} \ No newline at end of file +} diff --git a/frontend/static/js/views/Chat.js b/frontend/static/js/views/Chat.js index ae74315..cbde8e7 100644 --- a/frontend/static/js/views/Chat.js +++ b/frontend/static/js/views/Chat.js @@ -11,6 +11,14 @@ export default class extends AbstractView { this.chatSocket.onmessage = function(e){ let data = JSON.parse(e.data) console.log('Data:', data) + if (data.type === 'chat') { + let messages = document.getElementById('messages') + + messages.insertAdjacentHTML('beforeend', ` +

${data.message}

+ `) + } + } } diff --git a/frontend/templates/chat.html b/frontend/templates/chat.html new file mode 100644 index 0000000..39b695c --- /dev/null +++ b/frontend/templates/chat.html @@ -0,0 +1,24 @@ + + + + + Chat + + +

Chat

+ +
+ +
+ + + Dashboard Posts Settings + Chat
diff --git a/frontend/views.py b/frontend/views.py index 2d888d5..696d288 100644 --- a/frontend/views.py +++ b/frontend/views.py @@ -2,5 +2,6 @@ from django.shortcuts import render # Create your views here. + def index_view(req): return render(req, 'index.html');