Блог

Я использую веб-сокеты(каналы) в своем проекте django.

Во-первых, когда страница перезагружается, все в порядке, но когда я хочу пообщаться с другим пользователем, я нажимаю другого пользователя (запускаю функцию runChatUser javascript, которая находится в app.js).

После этого сообщение проходит через веб — сокет и получает веб-сокет нормально, но в app.js Чатсокет. В консоли управления сообщениями.журнал(данные) не отображается в консоли javascript.

Поэтому я не добавлял html-код сообщения в разговор.

app.js

 var roomName = JSON.parse(document.getElementById('room-name').textContent); var conversation=document.getElementById("conversation"); var sendButton = document.getElementById("sendMessage"); var inputField = document.getElementById("message-input-chat"); var chatSocket = "";    function webSocketConnect(roomName){  // var roomName = document.getElementById('room-name').textContent;  chatSocket = new WebSocket(  'ws://'    window.location.host    '/ws/chat/'    roomName    '/'  )  inputField.focus(); };  //roomName is changing when the user click other user to chat window.onload=webSocketConnect(roomName);   chatSocket.onmessage = function(e) {  inputField.focus();  var data = JSON.parse(e.data);  console.log(data);  var message=`lt;li class="media sent"gt;  lt;div class="media-body"gt;  lt;div class="msg-box"gt;  lt;divgt;  lt;pgt;${data.message}lt;/pgt;  lt;ul class="chat-msg-info"gt;  lt;ligt;  lt;div class="chat-time"gt;  lt;spangt;8:30 AMlt;/spangt;  lt;/divgt;  lt;/ligt;  lt;/ulgt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/ligt;`  conversation.innerHTML =message };   chatSocket.onclose=function(e){  console.error("Socket closed");   };  inputField.focus();  inputField.onkeyup = function(e) {  if (e.keyCode === 13) { // enter, return  sendButton.click();  } };   sendButton.onclick = function(e) {  var message = inputField.value;  chatSocket.send(JSON.stringify({  'message': message  }));  inputField.value = ''; };   //It is calling when user click other user to chat  function runChatUser(id){  document.getElementById('room-name').textContent=id;  roomName = id;  // chatSocket.close();  webSocketConnect(id);   // chatSocket.disconnect;      $.ajax({  type : "GET",  url : "get_user/" id,  dataType: 'JSON',   data : {     },   //changing chat header    success : function(data) {  console.log(data)    messages=data.messages;  $("#chat-header-part").html(`lt;a id="back_user_list" href="javascript:void(0)" class="back-user-list"gt;  lt;i class="material-icons"gt;chevron_leftlt;/igt;  lt;/agt;  lt;div class="media"gt;  lt;div class="media-img-wrap"gt;  lt;div class="avatar avatar-online"gt;  lt;img src="${data.image}" alt="User Image" class="avatar-img rounded-circle"gt;  lt;/divgt;  lt;/divgt;  lt;div class="media-body"gt;  lt;div class="user-name"gt;${data.second_user_name}lt;/divgt;  lt;div class="user-status"gt;onlinelt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="chat-options"gt;  lt;a href="javascript:void(0)" data-toggle="modal" data-target="#voice_call"gt;  lt;i class="material-icons"gt;local_phonelt;/igt;  lt;/agt;  lt;a href="javascript:void(0)" data-toggle="modal" data-target="#video_call"gt;  lt;i class="material-icons"gt;videocamlt;/igt;  lt;/agt;  lt;a href="javascript:void(0)"gt;  lt;i class="material-icons"gt;more_vertlt;/igt;  lt;/agt;  lt;/divgt;`)    }    });        }  

consumers.py

 # chat/consumers.py import json from asgiref.sync import async_to_sync from channels.generic.websocket import WebsocketConsumer  from chat.models import Message  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  print("web socket connected ")  # 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):  print("web socket closed")  # Leave room group  async_to_sync(self.channel_layer.group_discard)(  self.room_group_name,  self.channel_name  )   # Receive message from WebSocket  def receive(self, text_data):  text_data_json = json.loads(text_data)  message = text_data_json['message']   # Send message to room group  async_to_sync(self.channel_layer.group_send)(  self.room_group_name,  {  'type': 'chat_message',  'message': message,    }  )   # Receive message from room group  def chat_message(self, event):  message = event['message']    # Send message to WebSocket  self.send(text_data=json.dumps({  'message': message,    }))  

routing.py

 # chat/routing.py from django.urls import re_path  from . import consumers  websocket_urlpatterns = [  re_path(r'ws/chat/(?Plt;room_namegt;[^/] )/

views.py

 def get_user(request,room_id):  if request.method=='GET' and request.is_ajax():  room=get_object_or_404(Room,id=room_id)  if request.user == room.first_user:  second_user=room.second_user  else:  second_user=room.first_user  data ={  "second_user_name":second_user.get_full_name(),  "image":second_user.image.url,  "messages":list(Message.objects.filter(room_id=room_id).all().values()),    }  return JsonResponse(data,safe=True)  return JsonResponse({'status':'Fail', 'msg': 'Object does not exist'})     
index.html
 {% extends 'base.html' %}  {% load static %}  {% block body_class %}chat-page{% endblock %}  {% block content %}       {{ room_name|json_script:"room-name" }}    lt;!-- Page Content --gt;  lt;div class="content"gt;  lt;div class="container-fluid"gt;  lt;div class="row"gt;  lt;div class="col-xl-12"gt;  lt;div class="chat-window"gt;    lt;!-- Chat Left --gt;  lt;div class="chat-cont-left"gt;  lt;div class="chat-header"gt;  lt;spangt;Chatslt;/spangt;  lt;a href="javascript:void(0)" class="chat-compose"gt;  lt;i class="material-icons"gt;control_pointlt;/igt;  lt;/agt;  lt;/divgt;  lt;form class="chat-search"gt;  lt;div class="input-group"gt;  lt;div class="input-group-prepend"gt;  lt;i class="fas fa-search"gt;lt;/igt;  lt;/divgt;  lt;input type="text" class="form-control" placeholder="Search"gt;  lt;/divgt;  lt;/formgt;      lt;div class="chat-users-list" style="height: 112%;"gt;  lt;div class="chat-scroll" gt;   {% for room in rooms %}    lt;a class="media   {% if forloop.counter0 == 0 %}  read-chat active  {% endif %}  " href="javascript:void(0)" data-url="{% url 'startChat' room.second_user.slug %}" id="{{room.second_user.slug}}" onclick="runChatUser('{{ room.id }}');" gt;  lt;div class="media-img-wrap"gt;  lt;div class="avatar avatar-away"gt;  lt;img src="{{room.second_user.image.url}}" alt="User Image" class="avatar-img rounded-circle"gt;  lt;/divgt;  lt;/divgt;  lt;div class="media-body"gt;  lt;divgt;  lt;div class="user-name"gt;  {% if request.user.is_doctor %}  {{room.second_user.get_full_name}}  {% else %}  {{room.first_user.get_full_name}}  {% endif %}  lt;/divgt;  lt;div class="user-last-chat"gt;Hey, How are you?lt;/divgt;  lt;/divgt;  lt;divgt;  lt;div class="last-chat-time block"gt;2 minlt;/divgt;  lt;div class="badge badge-success badge-pill"gt;15lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/agt;    {% endfor %}         lt;!--         lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;!-- /Chat Left --gt;        lt;!-- Chat Right --gt;  lt;div class="chat-cont-right"gt;  lt;div class="chat-header" id="chat-header-part"gt;    lt;!-- this part adding by ajax--gt;   lt;/divgt;        lt;div class="chat-body" style="height: 78%;"gt;   lt;div class="chat-scroll"gt;  lt;ul class="list-unstyled" id="conversation"gt;    lt;!-- this part adding by websocket and ajax--gt;      lt;/ulgt;   lt;/divgt;  lt;/divgt;    lt;div class="chat-footer" gt;  lt;div class="input-group"gt;  lt;div class="input-group-prepend"gt;  lt;div class="btn-file btn"gt;  lt;i class="fa fa-paperclip"gt;lt;/igt;  lt;input type="file"gt;  lt;/divgt;  lt;/divgt;  lt;input type="text" class="input-msg-send form-control" placeholder="Type something" id="message-input-chat"gt;  lt;div class="input-group-append"gt;  lt;button type="button" id="sendMessage" class="btn msg-send-btn"gt;lt;i class="fab fa-telegram-plane"gt;lt;/igt;lt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt;     lt;/divgt;  lt;!-- /Chat Right --gt;         lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;!-- /Row --gt;   lt;/divgt;   lt;/divgt;   lt;!-- /Page Content --gt;         {% endblock content %}