Compare commits

..

No commits in common. "d490208ffa7a6cd00da8d52709eaa47be897a6a8" and "27e75c4497b378358ab1738a7c8765cea5a783ac" have entirely different histories.

9 changed files with 32 additions and 107 deletions

View File

@ -1,36 +0,0 @@
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
}))

View File

@ -1,6 +0,0 @@
from django.urls import re_path
from . import consumers
websocket_urlpatterns = [
re_path(r'ws/socket-server/', consumers.ChatConsumer.as_asgi())
]

View File

@ -1,9 +1,37 @@
body { body {
margin: 10; --nav-width: 200px;
margin: 0 0 0 var(--nav-width);
font-family: 'Quicksand', sans-serif; font-family: 'Quicksand', sans-serif;
font-size: 18px; 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 { a {
color: #009579; color: #009579;
} }

View File

@ -3,7 +3,6 @@ import Dashboard from "./views/Dashboard.js";
import Posts from "./views/Posts.js"; import Posts from "./views/Posts.js";
import PostView from "./views/PostView.js"; import PostView from "./views/PostView.js";
import Settings from "./views/Settings.js"; import Settings from "./views/Settings.js";
import Chat from "./views/Chat.js";
import { Client } from "./api/client.js"; import { Client } from "./api/client.js";
import RegisterView from "./views/accounts/RegisterView.js"; import RegisterView from "./views/accounts/RegisterView.js";
@ -34,7 +33,6 @@ const router = async () => {
{ path: "/settings", view: Settings }, { path: "/settings", view: Settings },
{ path: "/login", view: LoginView }, { path: "/login", view: LoginView },
{ path: "/register", view: RegisterView }, { path: "/register", view: RegisterView },
{ path: "/chat", view: Chat },
]; ];
// Test each route for potential match // Test each route for potential match
@ -57,8 +55,6 @@ const router = async () => {
const view = new match.route.view(getParams(match)); const view = new match.route.view(getParams(match));
document.querySelector("#app").innerHTML = await view.getHtml(); document.querySelector("#app").innerHTML = await view.getHtml();
await view.postInit();
}; };
window.addEventListener("popstate", router); window.addEventListener("popstate", router);
@ -74,4 +70,4 @@ document.addEventListener("DOMContentLoaded", () => {
router(); router();
}); });
export { client } export { client }

View File

@ -3,9 +3,6 @@ export default class {
this.params = params; this.params = params;
} }
async postInit() {
}
setTitle(title) { setTitle(title) {
document.title = title; document.title = title;
} }
@ -13,4 +10,4 @@ export default class {
async getHtml() { async getHtml() {
return ""; return "";
} }
} }

View File

@ -1,51 +0,0 @@
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)
if (data.type === 'chat') {
let messages = document.getElementById('messages')
messages.insertAdjacentHTML('beforeend', `
<div><p>${data.message}</p></div>
`)
}
}
}
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 `
<h1>Chat</h1>
<form id="form">
<input type="text" name="message" />
</form>
<div id="messages">
</div>
`;
}
}

View File

@ -13,7 +13,6 @@
<a href="/posts" class="nav__link" data-link>Posts</a> <a href="/posts" class="nav__link" data-link>Posts</a>
<a href="/settings" class="nav__link" data-link>Settings</a> <a href="/settings" class="nav__link" data-link>Settings</a>
<a href="/login" class="nav__link" data-link>Login</a> <a href="/login" class="nav__link" data-link>Login</a>
<a href="/chat" class="nav__link" data-link>Chat</a>
</nav> </nav>
<div id="app"></div> <div id="app"></div>
<script type="module" src="{% static 'js/index.js' %}"></script> <script type="module" src="{% static 'js/index.js' %}"></script>

View File

@ -2,6 +2,5 @@ from django.shortcuts import render
# Create your views here. # Create your views here.
def index_view(req): def index_view(req):
return render(req, 'index.html'); return render(req, 'index.html');

View File

@ -6,4 +6,3 @@ djangorestframework==3.14.0
install==1.3.5 install==1.3.5
pytz==2023.3.post1 pytz==2023.3.post1
sqlparse==0.4.4 sqlparse==0.4.4
channels==3.0.5