PresenceChannel not listening to the event of sending message - laravel

Question

I'm currently using the channel to conduct one-on-one conversations amongst users, but despite my best efforts, the channel is not listening for the sendMessageEvent event.
this image shows that the event is fired
SendMessageEvent
<?php
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Console\Scheduling\Event;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\Event as FacadesEvent;
class SendMessageEvent implements ShouldBroadcastNow
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public $user;
public $roomId;
public $fromId;
public $status;
/**
* Create a new event instance.
*
* #return void
*/
public function __construct($message,$user,$roomId,$fromId,$status)
{
$this->message = $message;
$this->user = $user;
$this->roomId = $roomId;
$this->fromId = $fromId;
$this->status = $status;
}
/**
* Get the channels the event should broadcast on.
*
* #return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new PresenceChannel('message.'.$this->roomId);
}
public function broadcastAs(){
return 'chat-message';
}
public function broadcastWith()
{
return [
'id'=>$this->fromId,
'name'=>$this->user,
'message'=>$this->message,
'status'=>$this->status,
];
}
}
frontend javascript
#push('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
#vite(['resources/js/app.js'])
{{-- <script type="module" src="{{ asset('js/privateMessage.js') }}"></script> --}}
<script type="module">
let token = $('meta[name="csrf-token"]').attr('content');
//form-id
let form = document.getElementById('form');
//input-message
let inputMessage = document.getElementById('input-message');
//container-message
let container = document.getElementById('container-message');
//room-id
let roomid = document.getElementById('room-id');
const roomId = roomid.value;
//other-user-id
let touserId =document.getElementById('touserId');
const toUserId = touserId.value;
let send = document.getElementById('send-btn');
let typing = document.getElementById('typing');
let status = document.getElementById('status');
let read_message = document.querySelectorAll('.fa-check-double.unreaded');
//array of online users in both sides
let usersOnline = [];
//create new channel and make pass room id to it
let channel = Echo.join(`message.${roomId}`).listen('.chat-message',(event)=>{
console.log('.chat-message');
create_message(event)
});
console.log(channel);
//add status code 1 => online , 0 => offline
function add_status_code()
{
let status_code = 0
usersOnline.forEach(user => {
if(user.id == toUserId){
status_code = 1
}
});
return status_code
}
//check message status in front view
function check_message_status(message)
{
let status_t = 'unreaded'
if(message.status == 1){
status_t = 'readed'
}
return status_t
}
//create message
function create_message(message)
{
let status_t = check_message_status(message)
console.log(status_t)
console.log('aaamk');
var today = new Date();
var time = today.toLocaleTimeString();
if(message.id == '{{Auth::id()}}'){
container.innerHTML +=`
<div class="message text-only">
<div class="response">
<p class="text">${message.message}</p>
</div>
</div>
<p class="time my_time">${time} <i class="fa-sharp fa-solid fa-check-double ${status_t}"></i></p>
`
}else{
var today = new Date();
var time = today.toLocaleTimeString();
container.innerHTML +=`
<div class="message">
<div class="photo" style="background-image: url(https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);">
<div class="online"></div>
</div>
<p class="text"> ${message.message} </p>
</div>
<p class="time">${time}</p>
`;
}
}
//read message in typing
function read_all_message()
{
usersOnline.forEach(user => {
if(user.id == toUserId){
let readedd = document.querySelectorAll('.fa-check-double.unreaded');
readedd.forEach(el=>{
el.className = 'fa-sharp fa-solid fa-check-double readed';
})
$.ajax({
method: "POST",
url: "/read_all",
data: {
toId: toUserId,
roomId: roomId,
_token: token
},
});
}
});
}
// show in typing
// inputMessage.addEventListener('input',function(event){
// if(inputMessage.value.length == 0){
// channel.whisper('stop-typing');
// }else{
// channel.whisper('typing',{
// name: "{{$user->display_name}}"
// })
// console.log('typingsss');
// }
// })
//on submit
form.addEventListener('submit',function(event){
const userInput = inputMessage.value;
event.preventDefault();
let status_code = add_status_code()
$.ajax({
method: "POST",
url: "/send",
data: {
message: userInput,
roomid:roomId,
touserId:toUserId,
status:status_code,
_token: token
},
});
// channel.whisper('stop-typing');
// channel.whisper('message-sent',event);
inputMessage.value="";
})
SendMessageController
public function sendMessage(Request $request){
$fromId = Auth::id();
$toUserId = $request->touserId;
$message = $request->message;
$status = $request->status;
$email = Auth::user()->email;
$user = Auth::user()->display_name;
$id = $request->roomid;
$save_message = Message::create([
'message'=>$message,
'from_id'=>$fromId,
'to_id'=>$toUserId,
'chat_id'=>$id,
'is_readed'=>$status,
]);
broadcast(new SendMessageEvent($message,$user,$id,$fromId,$status))->toOthers();
return null;
}
l tried
broadcast(new SendMessageEvent($message,$user,$id,$fromId,$status))->toOthers();
event(new SendMessageEvent($message,$user,$id,$fromId,$status));
let channel = Echo.join(message.${roomId}).listen('.chat-message',(event)=>{
console.log('.chat-message');
create_message(event)
});
let channel = Echo.join(message.${roomId}).listen('SendMessageEvent',(event)=>{
console.log('.chat-message');
create_message(event)
});
let channel = Echo.join(message.${roomId}).listen('\App\Events\SendMessageEvent',(event)=>{
console.log('.chat-message');
create_message(event)
});
let channel = Echo.join(message.${roomId}).listen('\App\Events\SendMessageEvent',(event)=>{
console.log('.chat-message');
create_message(event)
});