when i send a message from a user not getting to the recipient or recevier.but only getting the message who sended as revceived message and it was to in sended messages.
# consumer.py
import json
from channels.consumer import AsyncConsumer
from channels.generic.websocket import WebsocketConsumer, AsyncWebsocketConsumer
from channels.db import database_sync_to_async
from rest_framework.authtoken.models import Token
from rest_framework_simplejwt.tokens import RefreshToken,AccessToken
from asgiref.sync import async_to_sync
from api.models import UserModel as User,Message,Rooms
from django.db.models import Q
import uuid
class ChatConsumer(AsyncWebsocketConsumer):
async def connect(self):
token=(self.scope['url_route']['kwargs']['token'])
receiver_id=self.scope['url_route']['kwargs']['receiver_id']
receiver= await self.get_user_by_id(receiver_id)
sender=await self.get_user_object(token=token)
gname=await self.get_room(sender,receiver)
self.roomGroupName = gname
await self.channel_layer.group_add(
self.roomGroupName,
self.channel_name
)
await self.accept()
async def disconnect(self, close_code):
await self.channel_layer.group_discard(
self.roomGroupName,
self.channel_layer
)
async def receive(self, text_data):
text_data_json = json.loads(text_data)
message = text_data_json["message"]
username = text_data_json["username"]
print(self.roomGroupName,
self.channel_name)
user= await self.get_user_object(token=(self.scope['url_route']['kwargs']['token']))
await self.channel_layer.group_send(
self.roomGroupName, {
"type": "sendMessage",
"message": message,
"username": username,
})
async def sendMessage(self, event):
message = event["message"]
user_id = self.scope['url_route']['kwargs']['receiver_id']
print(user_id,'fdsfsdfsdfsdfwerrrrrreee')
receiver= await self.get_user_by_id(user_id)
token=self.scope['url_route']['kwargs']['token']
print(token)
user = await self.get_user_object(token)
print(user)
await self.create_message(sender=user,message=message,room_name=self.roomGroupName,receiver=receiver)
await self.send(text_data=json.dumps({"message": message, "username": user.username,'to':'ihsan'}))
@database_sync_to_async
def get_user_by_id(self,id):
return User.objects.filter(id=id).first()
@database_sync_to_async
def get_user_object(self, token):
token=AccessToken(token=token)
return User.objects.get(id=token.payload['user_id'])
@database_sync_to_async
def create_message(self,sender,receiver,message,room_name):
messageObj=Message.objects.create(sender=sender,receiver=receiver,message=message)
room=Rooms.objects.get(groupName=room_name)
messageObj.save()
room.messages.add(messageObj)
room.save()
return messageObj
@database_sync_to_async
def get_room(self,user1,user2):
print(user1.id,user2.id)
room=Rooms.objects.filter(Q(users__id=user1.id)&Q(users__id=user2.id)).first()
if room:
return room.groupName
else:
room=Rooms(groupName=str(uuid.uuid1()))
room.save()
room.users.add(user1)
room.users.add(user2)
return room.groupName
this is consumer.py file from django
// messagePage.js
import React, { useState } from 'react'
import '../style.css'
import { useSelector } from 'react-redux';
function Messages({username, userId, setMsgPg }) {
const { isAuthenticated, user, loading } = useSelector(state => state.user);
const [inputText, setInputText] = useState('')
const message = { type: '', message: '' }
const [messages, setMessages] = useState([])
let chatSocket = new WebSocket( encodeURI(`ws://127.0.0.1:8000/${localStorage.getItem('access')}/${userId}`))
chatSocket.onopen = function (e) {
console.log("The connection was setup successfully !");
};
chatSocket.onclose = function (e) {
console.log("Something unexpected happened !");
};
chatSocket.onmessage = function (e) {
const data = JSON.parse(e.data);
message.type = 'recieve'
message.message = data.message + ':' + data.username
var tmsg = [...messages]
tmsg.push(message)
};
return (
<div className='col-sm-12 col-3 d-flex flex-column h-100 message-page ' style={{ maxHeight: (window.innerHeight - 80) + 'px', width: '25%' }}>
<div className='w-100 mt-3 ps-1 d-flex' style={{ borderColor: 'grey', borderWidth: '0 0 1px 0 ', borderStyle: 'solid', height: '50px' }}>
<button type="button" className="bg-black border-0 me-2 mb-2" data-dismiss="modal" aria-label="Close" onClick={_ => setMsgPg(null)}>
<svg xmlns="http://www.w3.org/2000/svg" width='20' viewBox="0 0 320 512"><path fill='white' d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" /></svg>
</button><div className='bg-light rounded-5' style={{ height: '35px', width: '35px ' }}>
</div>
<div>
<h6 className='ms-3 mb-0 text-white '>{username}</h6>
<p className='ms-4 mt-1 text-secondary' style={{ fontSize: '12px' }}> hello</p>
</div>
</div>
<div className="d-flex flex-column ps-2 overflow-y-scroll hidescroller mt-auto gap-2 w-100 pt-2">
{messages.map((message, idx) => {
return <div id={idx} className={message.type === 'recieve' ? 'bg-success rounded ps-3 pe-3 text-break': 'ms-auto text-end bg-success text-break rounded ps-3 pe-2' } style={{ maxWidth: '50%', width: "fit-content", minWidth: '25%' }}>
{message.message}
</div>
})}
</div>
<div className="w-100 d-flex gap-1 mt-2">
<input type="text" value={inputText} placeholder="messages" aria-placeholder='messages' id="" className='w-75 whiteholder rounded-3 bg-secondary ps-2 '
onChange={e => {
setInputText(e.target.value)
}}
/>
<button className='w-25 bg-primary rounded border-0 '
onClick={_ => {
message.type = 'send'
message.message = inputText
var tmsg = [...messages]
tmsg.push(message)
setMessages(tmsg)
const to =user.username=='ihsanu-admin'?'ihsan':'ihsanu-admin'
chatSocket.send(JSON.stringify({
message: inputText, username: user.username,to:to
}))
}}
>send</button>
</div>
</div>
)
}
export default Messages
this is messagePage.js from react
so any one please help me.
i tried to set a static groupname but at that time only getting on the user are avilabe else.
and also when reconnect did’nt see any message. also when sudden messages getting ‘connection state error’