Compare commits
No commits in common. "d490208ffa7a6cd00da8d52709eaa47be897a6a8" and "27e75c4497b378358ab1738a7c8765cea5a783ac" have entirely different histories.
d490208ffa
...
27e75c4497
@ -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
|
|
||||||
}))
|
|
||||||
|
|
@ -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())
|
|
||||||
]
|
|
@ -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;
|
||||||
}
|
}
|
@ -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 }
|
@ -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 "";
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -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>
|
|
||||||
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
@ -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>
|
||||||
|
@ -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');
|
||||||
|
@ -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
|
|
||||||
|
Loading…
Reference in New Issue
Block a user