<script>
const messageBox = document.querySelector("#message");
const room_name = "{{ context.channel.slug }}" ;
const username = "{{request.user.username}}";
const chatSocket = new WebSocket( 'wss://' + window.location.host + '/ws/chat/' + room_name
+ '/'
);
chatSocket.onmessage = (e)=> {
const dataContainer = JSON.parse(e.data);
const data = dataContainer.msg_container
const chatThread = document.querySelector('#main-middle')
chatThread.innerHTML += (`<div class="chat-item">
<div class="chat-item-dp">
<img src="${data.author_photo_url} " alt="" id="sidebar-dp" />
</div>
<div class="chat-item-right">
<div class="chat-item-desc">
<span>${ data.username }</span>
<span>${ data.msg_date } at ${data.msg_time}</span>
</div>
<div class="chat-text">
<p>
${ data.message}
</p>
</div>
</div>
</div>`);
};
chatSocket.onclose = function(e) {
console.error('Chat socket closed unexpectedly');
};
x = document.querySelector('#message-bar')
x.onsubmit = (event) => {
event.preventDefault()
const messageInputDom = document.querySelector('#m.;.essage');
const message = messageInputDom.value;
chatSocket.send(JSON.stringify({
'message': message,
'channel-slug':room_name,
'username':username,
}));
messageInputDom.value = '';
};
</script>
ASGI_APPLICATION = 'django_project.asgi.application'
CHANNEL_LAYERS = {
"default": {
"BACKEND": "channels.layers.InMemoryChannelLayer"
}
}
import os
from django.core.asgi import get_asgi_application
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.security.websocket import AllowedHostsOriginValidator
import <myapp>.routing
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'django_project.settings')
application = ProtocolTypeRouter({
"http": get_asgi_application(),
"websocket": AllowedHostsOriginValidator(
AuthMiddlewareStack(
URLRouter(
<myapp>.routing.websocket_urlpatterns
)
)
),
})
from django.urls import re_path
from . import consumers
websocket_urlpatterns = [
re_path(r'^ws/chat/(?P<room_name>[^/]+)/$', consumers.ChatConsumer.as_asgi()),
]
import json
from channels.generic.websocket import WebsocketConsumer
from .models import Channel
from .forms import MessageForm
from django.contrib.auth.models import User
from asgiref.sync import async_to_sync
class ChatConsumer(WebsocketConsumer):
def connect(self):
self.room_name = self.scope['url_route']['kwargs']['room_name']
self.room_group_name = 'chat_%s' % self.room_name
# Join room group
async_to_sync(self.channel_layer.group_add)(
self.room_group_name,
self.channel_name
)
self.accept()
def disconnect(self, close_code):
# Leave room group
async_to_sync(self.channel_layer.group_discard)(
self.room_group_name,
self.channel_name
)
def receive(self, text_data):
text_data_json = json.loads(text_data)
message = text_data_json['message']
username = text_data_json['username']
channel_slug = text_data_json['channel-slug']
channel = Channel.objects.get(slug=channel_slug)
author = User.objects.get(username=username)
msg_form = MessageForm(data={'text':message})
if msg_form.is_valid():
msg_instance = msg_form.save(commit=False)
msg_instance.channel = channel
msg_instance.author = author
msg_instance.save()
if author.member.photo.url:
author_photo_url = author.member.photo.url
else:
author_photo_url="{% static 'chatroom/temp-images/no_images.png' %}"
msg_time = msg_instance.created.strftime("%H:%i")
msg_date = msg_instance.created.strftime("%m %M %Y")
msg_container = {
'message': message,
'author_photo_url':author_photo_url,
'username':username,
'msg_date':msg_date,
'msg_time':msg_time,
}
# Send message to room group
async_to_sync(self.channel_layer.group_send)(
self.room_group_name,
{
'type': 'chat_message',
'msg_container': msg_container
}
)
# Receive message from room group
def chat_message(self, event):
msg_container = event['msg_container']
# Send message to WebSocket
self.send(text_data=json.dumps({
'msg_container': msg_container
}))