pusher integration problem

[syntaxlexx]

pusher integration problem

[syntaxlexx]

Hi there,

Quick checklist:

• Have you enabled broadcasting in config/app.php?
• If yes, when yu set the broadcast channel to log, can you see the broadcast message in your logs?
• If not, is your queue running? temporaryli set the queue driver to sync

[syntaxlexx]

Also check for
This Laravel inertia demo for the latest coding practice where we showcase with

• Laravel Echo
• Broadcast via Notifications (instead of Events)

[bhdrnzl]

Hi there,

Quick checklist:

• Have you enabled broadcasting in config/app.php?
• If yes, when yu set the broadcast channel to log, can you see the broadcast message in your logs?
• If not, is your queue running? temporaryli set the queue driver to sync

Hi, Yes, I did everything you said. When the other person sends me a message, I can see the json output in the console. but without refreshing the page, the message doesn't appear in my view. On the pusher screen, the number of messages and the number of connections are also displayed instantly. When I press the network tab in the console, a receive request appears when I receive a message. but the message does not appear in front of me instantly. I need to refresh the page for this.

[bhdrnzl]

and yes, i downloaded and installed the demo, i have the same problem with it. Just like in my own project, the toastr is triggered. but before the page is refreshed, the text appears on the console, but it is not reflected in the view.

[bhdrnzl]

no matter what i did i couldn't solve the problem :(

[syntaxlexx]

Too bad to hear that.
Here's a demo we have developed using Laravel Echo, Laravel 9, Laravel inertia, + Laravel Jetstream (as opposed to jquery like the previoous demo). It demonstrates the latest Laravel way of chat messaging + pusher.
Feel free to ask more questions.

[bhdrnzl]

I still don't understand why I couldn't figure this out. Here are the codes and screenshots:
console.log

Pusher Dashboard:

Route:
Route::controller(MessagesController::class)->group(function () { Route::get('/mesajlar/yeni', 'create')->name('messages.create'); Route::get('/mesajlar', 'index')->name('messages.index'); Route::post('/mesajlar', 'store')->name('messages.store'); Route::get('/mesajlar/unread', 'unread')->name('messages.unread'); Route::get('/mesajlar/{id}', 'show')->name('messages.show'); Route::put('/mesajlar/{id}', 'update')->name('messages.update'); Route::get('/mesajlar/ayril/{id}', 'leave')->name('messages.leave'); Route::get('/mesajlar/{id}/read', 'read')->name('messages.read'); });

Controller:

    public function store(Request $request)
    {
        $input = $request->all();

        $thread = Thread::create([
            'subject' => $input['subject'],
        ]);
        $message = Message::create([
            'thread_id' => $thread->id,
            'user_id' => Auth::id(),
            'body' => $input['message'],
        ]);
        Participant::create([
            'thread_id' => $thread->id,
            'user_id' => Auth::id(),
            'last_read' => new Carbon,
        ]);
        if ($request->has('recipients')) {

            $thread->addParticipant($input['recipients']);
        }
        if (config('chatmessenger.use_pusher')) {
            $this->oooPushIt($message);
        }

        if (request()->ajax()) {
            return response()->json([
                'status' => 'OK',
                'message' => $message,
                'thread' => $thread,
            ]);
        }

        return redirect()->route('messages.index');
    }



    protected function oooPushIt(Message $message, $html = '')
    {
        $thread = $message->thread;
        $sender = $message->user;

        $data = [
            'thread_id' => $thread->id,
            'div_id' => 'thread_' . $thread->id,
            'sender_name' => $sender->name,
            'thread_url' => route('messages.show', ['id' => $thread->id]),
            'thread_subject' => $thread->subject,
            'message' => $message->body,
            'html' => $html,
            'text' => str_limit($message->body, 50),
        ];

        $recipients = $thread->participantsUserIds();
        if (count($recipients) > 0) {
            foreach ($recipients as $recipient) {
                if ($recipient == $sender->id) {
                    continue;
                }
                
                event(new MessageWasComposed($recipient, $data));
            }
        }
    }

script:

@if(config('chatmessenger.use_pusher'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/4.2.1/pusher.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('form').submit(function(e) {
            e.preventDefault();
            var data = $(this).serialize();
            var url = $(this).attr('action');
            var method = $(this).attr('method');
            $(this).trigger('reset');
            $.ajax({
                method: method,
                data: data,
                url: url,
                success: function(response) {
                    var thread = $('#thread_' + response.message.thread_id);
                    $('body').find(thread).append(response.html);
                },
                error: function(error) {
                    console.log(error);
                }
            });
        });
        var pusher = new Pusher('f7ea1bd6a1ba8499a0f0', {
            cluster: 'eu',
            useTls: false
        });
        var channel = pusher.subscribe('for_user_{{ Auth::id() }}');
        channel.bind('new_message', function(data) {
            console.log(data);
            var thread = $('#' + data.div_id);
            var thread_id = data.thread_id;
            var thread_plain_text = data.text;
            var thread_subject = data.thread_subject;
            if (thread.length) {
                thread.append(data.html);
                $.ajax({
                    url: "/mesajlar/" + thread_id + "/read"
                });
            } else {
                var message = '<strong>' + data.sender_name + ': </strong>' + data.text + '<br/><a href="' + data.thread_url + '" class="text-right">View Message</a>';
                toastr.success(thread_subject + '<br/>' + message);
                let url = "{{ route('messages.unread') }}";
                console.log(url);
                $.ajax({
                    method: 'GET',
                    url: url,
                    success: function(data) {
                        console.log('data from fetch: ', data);
                        var div = $('#unread_messages');
                        var count = data.msg_count;
                        if (count == 0) {
                            $(div).addClass('hidden');
                        } else {
                            $(div).text(count).removeClass('hidden');
                            $('#thread_list_' + thread_id).addClass('alert-info');
                            $('#thread_list_' + thread_id + '_text').html(thread_plain_text);
                        }
                    }
                });
            }
        });
    });
</script>
@endif

messages.blade.php

<div class="d-flex justify-content-{{ $message->user_id == Auth::id() ? 'start' : 'end' }} mb-10">
    <div class="d-flex flex-column align-items-{{ $message->user_id == Auth::id() ? 'start' : 'end' }}">
        <div class="d-flex align-items-center mb-2">
            <div class="me-3">
                <span class="text-muted fs-7 mb-1">{{ $message->created_at->diffForHumans() }}</span>
                <a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary ms-1">{{ $message->user->name }}</a>
            </div>
            <div class="symbol symbol-35px symbol-circle bg-light-{{ $message->user_id == Auth::id() ? 'info' : 'primary' }}">
                <img alt="Pic" src="https://avatars.dicebear.com/api/croodles-neutral/@if($message->user->info->gender == 1)male/@elseif($message->user->info->gender == 2)female/@endif{{ $message->user->slug }}.svg?mood[]=happy">
            </div>
        </div>
        <div class="p-5 rounded bg-light-{{ $message->user_id == Auth::id() ? 'info' : 'primary' }} text-dark fw-bold mw-lg-400px text-end">
            {{ $message->body }}
        </div>
    </div>
</div>

What could be wrong here?

[bhdrnzl]

Is there anyone who has experienced the same problem? I still can't solve it..

[bikadin]

I solve this by assigning $html variable to the oooPushIt function in the controller file.

$this->oooPushIt($message, $html);