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) });