From b95bed88946a267f4a6b7bcfe33c7b6ae8ee4bad Mon Sep 17 00:00:00 2001 From: Xamora Date: Mon, 27 Nov 2023 13:23:54 +0100 Subject: [PATCH 1/4] =?UTF-8?q?Alors=20ce=20commit=20sert=20=C3=A0=20CRAMP?= =?UTF-8?q?T=C3=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- requirements.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/requirements.txt b/requirements.txt index 2dc4dc9..f301200 100644 --- a/requirements.txt +++ b/requirements.txt @@ -6,3 +6,4 @@ djangorestframework==3.14.0 install==1.3.5 pytz==2023.3.post1 sqlparse==0.4.4 +channels==3.0.5 From 8202a8b88d305cc7999e5775dd7120cdde59594a Mon Sep 17 00:00:00 2001 From: Xamora Date: Mon, 27 Nov 2023 14:31:47 +0100 Subject: [PATCH 2/4] Add PostInit in index.js/AbstractViews.js --- frontend/static/js/index.js | 8 ++++++-- frontend/static/js/views/AbstractView.js | 5 ++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/frontend/static/js/index.js b/frontend/static/js/index.js index f63c27c..5172ded 100644 --- a/frontend/static/js/index.js +++ b/frontend/static/js/index.js @@ -2,6 +2,7 @@ import Dashboard from "./views/Dashboard.js"; import Posts from "./views/Posts.js"; import PostView from "./views/PostView.js"; import Settings from "./views/Settings.js"; +import Chat from "./views/Chat.js"; const pathToRegex = path => new RegExp("^" + path.replace(/\//g, "\\/").replace(/:\w+/g, "(.+)") + "$"); @@ -24,7 +25,8 @@ const router = async () => { { path: "/", view: Dashboard }, { path: "/posts", view: Posts }, { path: "/posts/:id", view: PostView }, - { path: "/settings", view: Settings } + { path: "/settings", view: Settings }, + { path: "/chat", view: Chat }, ]; // Test each route for potential match @@ -47,6 +49,8 @@ const router = async () => { const view = new match.route.view(getParams(match)); document.querySelector("#app").innerHTML = await view.getHtml(); + + await view.postInit(); }; window.addEventListener("popstate", router); @@ -60,4 +64,4 @@ document.addEventListener("DOMContentLoaded", () => { }); router(); -}); \ No newline at end of file +}); diff --git a/frontend/static/js/views/AbstractView.js b/frontend/static/js/views/AbstractView.js index 18bf83f..f9f699b 100644 --- a/frontend/static/js/views/AbstractView.js +++ b/frontend/static/js/views/AbstractView.js @@ -3,6 +3,9 @@ export default class { this.params = params; } + async postInit() { + } + setTitle(title) { document.title = title; } @@ -10,4 +13,4 @@ export default class { async getHtml() { return ""; } -} \ No newline at end of file +} From 56b6f0e1388765cbd00a9a3dbd335e086018d785 Mon Sep 17 00:00:00 2001 From: Xamora Date: Mon, 27 Nov 2023 14:35:11 +0100 Subject: [PATCH 3/4] Pussy --- frontend/static/js/views/Chat.js | 43 ++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 frontend/static/js/views/Chat.js diff --git a/frontend/static/js/views/Chat.js b/frontend/static/js/views/Chat.js new file mode 100644 index 0000000..ae74315 --- /dev/null +++ b/frontend/static/js/views/Chat.js @@ -0,0 +1,43 @@ +import AbstractView from "./AbstractView.js"; + +export default class extends AbstractView { + constructor(params) { + super(params); + this.setTitle("Chat"); + + let url = `ws://${window.location.host}/ws/socket-server/` + + this.chatSocket = new WebSocket(url) + this.chatSocket.onmessage = function(e){ + let data = JSON.parse(e.data) + console.log('Data:', data) + } + } + + async postInit() { + let form = document.getElementById('form') + form.addEventListener('submit', (e)=> { + e.preventDefault() + let message = e.target.message.value + this.chatSocket.send(JSON.stringify({ + 'message':message + })) + form.reset() + }) + } + + async getHtml() { + return ` +

Chat

+ +
+ +
+ +
+ +
+ + `; + } +} From c16d281892300d453c908e8abeea4cdad116258a Mon Sep 17 00:00:00 2001 From: Xamora Date: Mon, 27 Nov 2023 15:10:06 +0100 Subject: [PATCH 4/4] 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');