Breaking News: Grepper is joining You.com. Read the official announcement!

websocket + django channels setup

chifarol answered on July 19, 2022 Popularity 9/10 Helpfulness 2/10

answer websocket + django channels setup

websocket + django channels setup

Comment

//index.html
<script>
  const messageBox = document.querySelector("#message");
  // const roomName = JSON.parse(document.getElementById('channel-title').textContent);
  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')
    // const chatThread = document.createElement('div')
    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>


//django settings.py
ASGI_APPLICATION = 'django_project.asgi.application'
CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer"
    }
}

//django asgi.py
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
            )
        )
    ),
})

//django routing.py
from django.urls import re_path
from . import consumers

websocket_urlpatterns = [
    re_path(r'^ws/chat/(?P<room_name>[^/]+)/$', consumers.ChatConsumer.as_asgi()),
]

//django consumers.py
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
    }))

Popularity 9/10 Helpfulness 2/10 Language python

Source: Grepper

Tags: django-channels python websocket

Link to this answer
Share Copy Link

Contributed on Jul 19 2022

chifarol

0 Answers Avg Quality 2/10

websocket + django channels setup

Contents

More Related Answers

websocket + django channels setup

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.