1
votes

I am creating realtime chat app. I have set up pusher in my laravel and vue.js project.

But it doesn't work. Though I don't have any error in the console. Also, I have no error in network tab.

I need to create messenger app, so I need a realtime chat function. Now, I can push user's comment but in the other user's window, nothing shows up.

But it does, once I refresh the page. I think my pusher setting has something wrong, because in the pusher debug console, any session is not executed.

Here is my code. .env

BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

PUSHER_APP_ID=my id
PUSHER_APP_KEY=my app key
PUSHER_APP_SECRET= my secret key
PUSHER_APP_CLUSTER=mt1

broadcasting.php

'pusher' => [
            'driver' => 'pusher',
            'key' => env('my key'),
            'secret' => env('my secret key'),
            'app_id' => env('my id'),
            'options' => [
                'cluster' => 'ap3',
                'encrypted' => true,
            ],

BroadcastServiceProvider.php

Broadcast::routes(['middleware' => ['auth:api']]);
        require base_path('routes/channels.php');

bootstrap.js

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'my key',
    cluster: 'ap3',
    encrypted: true
});

NewMessage.php

use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class NewMessage implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $message;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Message $message)
    {
        $this->message = $message;
    }
    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('messages.' . $this->message->to);
    }
    public function broadcastWith()
    {
        $this->message->load('fromContact');
        return ["message" => $this->message];
    }
}

routes/channel.php

use Illuminate\Support\Facades\Broadcast;

ContactsController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
use App\Message;

class ContactsController extends Controller
{
    public function get() {
        $contacts = User::where('id', '!=', auth()->id())->get();//全部のcontactをjson経由でgetする

        return response()->json($contacts);    
    }

    public function getMessagesFor($id) {
        $messages = Message::where('from', $id)->orWhere('to', $id)->get();
        return response() -> json($messages);
    }

    public function send(Request $request) {
        $message = Message::create([
            'from' => auth()->id(),
            'to' => $request->contact_id,
            'text' => $request->text
        ]);



        return response()->json($message);
    }
}

Here is what I tried.

run all the command according to the laravel document.

php artisan chache:clear and run the server again.

run php artisan queue:work in command terminal

2

2 Answers

0
votes

Did you write

window.Echo.private('channelName').listen('EventName',function(e){
})

in your application to listen

0
votes

In your send() function you should write broadcast(new NewMessage($message)); to broadcast the message.