7

I set up an event and new channel :

class TaskCreated implements shouldBroadcast
 {
use Dispatchable, InteractsWithSockets, SerializesModels;
public $task;

public function __construct(Task $task)
{
    $this->task = $task;
}

}

and installed Echo and set it up 

 import Echo from "laravel-echo"
window.Pusher = require('pusher-js');
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'pusher-key',
    cluster: 'ap2',
    encrypted: true
});

then I call the TaskCreated event when a task is posted 

event(new TaskCreated($task));

However, the issue is Echo doesn't listen to pusher logs or ANYTHING. even though in laravel-websockets the event was created as an api-message.

here is vue js Echo implementation :

 mounted () {
        axios.get('/tasks').then(response => (this.tasks = response.data));

       Echo.channel('taskCreated').listen('TaskCreated', (e) => {
            console.log(e);
            this.tasks.push(task.body)
        });

in the dashboard :

api-message Channel: taskCreated, Event: App\Events\TaskCreated 19:01:55

UPDATE

Now when I tried to connect with WS the connection status is pending for 10 seconds then finished with an error WebSocket is closed before the connection is established. AND Error in connection establishment: net::ERR_CERT_AUTHORITY_INVALID.

Request URL: wss://127.0.0.1/app/local?protocol=7&client=js&version=6.0.2&flash=false

import Echo from "laravel-echo"
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
 key: process.env.MIX_PUSHER_APP_KEY,
 wsHost: window.location.hostname,
 wssPort: 6001,
 disableStats: true,
 enabledTransports: ['ws', 'wss']
AlmoDev
  • 969
  • 2
  • 18
  • 46
  • Could you check console? there might be some errors. – Uzair Riaz May 06 '20 at 22:47
  • 1
    Remove the dot before `TaskCreated`. The dot implies that you have have a custom named event. You can add a custom name by adding a `broadcastAs()` function in the event class and returning a string with the custom event name. – Kabelbaan May 06 '20 at 23:54
  • @UzairRiaz no errors or logs in the console. Network - WS status is 101 – AlmoDev May 07 '20 at 07:10
  • `DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:8000/js/utf8.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE DevTools failed to load SourceMap: Could not load content for chrome-extension://ndjpnladcallmjemlbaebfadecfhkepb/editor/config.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load SourceMap: Could not load content for chrome-extension://ndjpnladcallmjemlbaebfadecfhkepb/editor/content.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME` – AlmoDev May 07 '20 at 07:36
  • can you confirm if the events are firing from the backend? check laravel-websockets dashboard at **{base_ur}/laravel-websockets**. Also, laravel echo constantly keeps sending requests to **wss:{url}** and **ws:{ur}**, and if you dont run `php artisan websockets:serve`, it will produce errors in console so check for those errors and post them here. You can also check network in browser dev tools by setting the filter to all requests to check those requests. – Uzair Riaz May 07 '20 at 07:58
  • laravel-websockets dashboard is receiving messages and WebSocket server is running and displaying connection ID and sending message logs :( been two days I tried to create new projects but all act the same .... – AlmoDev May 07 '20 at 08:08
  • could you contact me at https://join.slack.com/t/vue-vmr4432/shared_invite/zt-eau36fgx-k1KWjR7fmNdqfvlJouderw. I can help you if I get to know the problem in detail. Can't keep asking you to try things here in comments. – Uzair Riaz May 09 '20 at 15:02
  • just did plz check – AlmoDev May 09 '20 at 17:17

6 Answers6

5

i dont see broadcastOn method in TaskCreated event if you have it in your code just use broadcastAs method too like this:

public function broadcastAs()
{
    return 'task.created';
}

and in vue component listen for event like this:

Echo.channel('taskCreated').listen('.task.created', (e) => {
            this.tasks.push(task.body)
        });

more info: https://laravel.com/docs/broadcasting but about laravel-websockets i use it recently and have similar problem and check their github repo turned out they have some open issues for this error that they didnt fix. i love spatie packages but for this one tlaverdure/laravel-echo-server is my first choise and easier to work with.

TEFO
  • 1,432
  • 9
  • 23
3

for anyone out there, after many attempts here is what I found ... you MUST have pusher credentials set in your env. and broadcast.js. I tried a lot with Laravel 7 to set it without the credentials ( no luck ) otherwise many issues from Google Chrome and network requests will blow up. this is for me and hopefully, this will work for you

AlmoDev
  • 969
  • 2
  • 18
  • 46
  • It would be so nice if you could give us some clue about what you meant. I have been trying to run my Laravel 7 - Vue Application on a live server even if it works on localhost. – Mycodingproject Jul 03 '20 at 11:46
  • I haven't tested on a live server yet – AlmoDev Jul 04 '20 at 07:32
  • 1
    Not the best formatted answer.. ..but certainly solved this exact issue for me. I removed the `process.env.MIX_PUSHER_APP_KEY` and `process.env.MIX_PUSHER_APP_CLUSTER` constants from bootstrap.js, and replaced them with the actual values. It now works. Thanks AlmoDev. – MaggsWeb Jul 08 '20 at 08:46
  • To above commenter, that might be because you need to prefix with VUE_APP So use VUE_APP_MIX_PUSHER_APP_KEY https://cli.vuejs.org/guide/mode-and-env.html#environment-variables – fred Jul 10 '20 at 22:30
1

Maybe you can try:

In your TaskCreated event:

public function broadcastOn()
{
   return new Channel('task.created');     
}

and in your Vue:

Echo.channel('task.created').listen('TaskCreated', (e) => {
            this.tasks.push(task.body)
        });
akshaypjoshi
  • 1,245
  • 1
  • 15
  • 24
1

For Laravel 6.2 use socket.io-client@2.4.0

Joundill
  • 6,828
  • 12
  • 36
  • 50
Davit Hambardzumyan
  • 71
  • 3
0

As Kabelbaan said, remove the dot but go to the debug console and just refresh your app to start with. You should see connection and subscription for your tasks channel. If you don't, you can start debugging the connection rather than pushing dispatching the event. Also, I gather the copy & paste is just incomplete but your window.Echo statement is incomplete.

Drewster
  • 499
  • 5
  • 13
  • I removed the dot and still same thing. restarted all servers ( including Apache) and still same thing. window.Echo is complete! is there anything missing ? – AlmoDev May 07 '20 at 07:08
  • @leo0019 Try using the `event(new TaskCreated($task))` function since that is how all events are fired in the official Laravel docs or by using `Event::fire(...)`. Could you also show us the channels.php? – Kabelbaan May 07 '20 at 14:37
  • `event` and `broadcast` didn't work for me. channel.php has only one route that's not related to tasks because its a public channel – AlmoDev May 07 '20 at 14:48
  • laravel-websocket already getting `Channel: tasks, Event: App\Events\TaskCreated` but Echo isn't listening – AlmoDev May 07 '20 at 14:49
  • @leo0019 I see that your channel name is `'tasks'` so make sure to change the channel correctly in the front end aswell. `Echo.channel('tasks').listen(...)` – Kabelbaan May 07 '20 at 23:41
  • that was a typo I changed it to tasks but still, the console has no errors, and dashboard is reviving events. – AlmoDev May 08 '20 at 11:13
0

net::ERR_CERT_AUTHORITY_INVALID.

Request URL: wss://127.0.0.1/app/local?protocol=7&client=js&version=6.0.2&flash=false

You have possibly a problem with your ssl certification. You are using wss which connects on https only. You should check out your ssl cert or use ws instead.

Plus tip:

I would use socket.io + redis combo instead of pusher.

bornemisza
  • 61
  • 6