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 {
margin: 10;
--nav-width: 200px;
margin: 0 0 0 var(--nav-width);
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;
}

View File

@ -3,7 +3,6 @@ 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";
import { Client } from "./api/client.js";
import RegisterView from "./views/accounts/RegisterView.js";
@ -34,7 +33,6 @@ const router = async () => {
{ path: "/settings", view: Settings },
{ path: "/login", view: LoginView },
{ path: "/register", view: RegisterView },
{ path: "/chat", view: Chat },
];
// Test each route for potential match
@ -57,8 +55,6 @@ 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);

View File

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

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="/settings" class="nav__link" data-link>Settings</a>
<a href="/login" class="nav__link" data-link>Login</a>
<a href="/chat" class="nav__link" data-link>Chat</a>
</nav>
<div id="app"></div>
<script type="module" src="{% static 'js/index.js' %}"></script>

View File

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

View File

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