Laravel Echo library for beautiful Pusher and Ably integration.

So I have a single page application with authorization setup. When the app boots, it will check if the user is authenticated. If not, the user is send to the login page, if so, the app sets the Authorization header of the requests to the token saved in localStorage. This is working fine, but when I want to login and update the Authorization token, the update isn't reflected and I have to manually refresh the page to make the request with the token.

As you can see here, I set the token correctly: https://github.com/petervmeijgaard/jwt-example/blob/next/resources/frontend/src/app/store/modules/auth/mutations.js#L24

And even when I do a console.log(Vue.echo.options.auth.headers.Authorization) before I subscribe to a private channel, I get the correct token returned. However, when I check the request send to the REST-server, the Authorization header isn't set.

The console.log ouput:

The request headers:

• Echo Version: 1.9.0
• Laravel Version: 8.x
• PHP Version: 7.4
• NPM Version: 6.14.6
• Node Version: 12.18.3

Description:

After updating Socket.IO to v3.0.1 there are constant erros of Bad handshake method.

{"code":2,"message":"Bad handshake method"}

This pull request allows Echo to be used with different web socket providers. PusherJS as previously supported and Socket.io.

Summary of Changes:

• Added Typescript as a dev dependency. Typescript is a superset of JavaScript that allows for things like abstract classes, interfaces, type hints, and some other language features that someone coming from Laravel may be used to.
• Added Rollup JS as a dev dependency. Rollup makes use of babel plugins and has a config file so I removed the babelcli npm dependecy and .babelrc file. This is needed to handle compiling typscript on npm install.
• Seperated classes into ther own files for organization.
• Created an abstract Connector
• Added a Socket.io Connector
• Made updates to the Pusher Connector to extend the Connector
• Presence Channel - removed the then() method and went directly to the here() method. It appears that the intent was to listen to added and removed events at the same time as listening to updated member events, not sure if this was to solve a corner case but one could do this to accomplish that:

echo.join('presence-channel')
        .here(callback)
        .joinging(callback)
        .leaving(callback);

• Updated Echo to be instantiated with an object of options for more flexibility.
• Added a bind() method to the Channel class to reflect the on() method for socket.io

Dev Tooling

To view Typescript type hint errors you can either use vscode, install one of the plugins for atom or sublime, or use the Typescript cli tool by typing tsc and tsc -w to watch.

To compile the code run npm run compile.

@taylorotwell the only real question that I had is when would the namespace() method be used? Let me know if you have any questions for me. Thanks

• Echo Version: 1.5.3
• Laravel Version: 5.8.*
• PHP Version: 7.2.17
• NPM Version: 6.8.0
• Node Version: 8.10.8

Description:

When Echo used with Redis, it produces keyPrefix to every channel you created. (which is by default "laravel_database_")

Steps To Reproduce:

1-) Use Redis as Broadcast Driver and Queue Connection

BROADCAST_DRIVER=redis
QUEUE_CONNECTION=redis

2-) Create any Event

class UserRegistered implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $user;

    public function __construct(User $user)
    {
        $this->user = $user;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('test');
    }

    public function broadcastAs()
    {
        return 'user.registered';
    }

    public function broadcastWith()
    {
        return ['id' => $this->user->id];
    }
}

3-) Broadcast this event with Private Channel called 'test' 4-) Authorize this channel

Broadcast::channel('test', function ($user) {
    return $user;
});

5-) Initialize Echo in your js file

import Echo from "laravel-echo"

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
    authEndpoint: "/broadcasting/auth",
});

6-) Initialize your channel

 Echo.private(`test`)
                .listen('.user.registered', function (e) {
                    console.log(e);
                });

7-) Send event

event(new UserRegistered($user));

8-) See laravel-echo-server logs

[6:13:51 AM] - W3drJJWfqL9OacTmAAAa authenticated for: private-test
[6:13:51 AM] - W3drJJWfqL9OacTmAAAa joined channel: private-test
Channel: foo_bar_database_private-test
Event: user.registered

My Redis keyPrefix is "foo_bar_database_", so the channel name that the event emitted is "foo_bar_database_private-test" but i am listening the channel "private-test". So Echo never gets the event.

I tried to delete "private-" prefixes from both php&js side but this time Echo not requiring to authenticate channel anymore since not see as private channel.

Pusher has the disconnect() method. Is there such a thing in Echo? I couldn't see it. It's very important for me to disconnect users who keep their tab(s) open otherwise I run out of connections.

Is there a typings file I can include in my typescript project? I think it is possible to to include the typescript class form github, but there is none included in the npm package :(

I use laravel echo with Typescript and I have a problem on listen property, I receive a

TS2339: Property 'listen' does not exist on type 'PresenceChannel'.

In this segment of code:

    echo.join(channel)
            .here((users) => {
                EventBusMain.$emit(EVENTS.HERE_MAIN_CHANNEL_EVENT, {users});
            })
            .joining((user) => {
                EventBusMain.$emit(EVENTS.JOIN_MAIN_CHANNEL_EVENT, {user});
            })
            .leaving((user) => {
                EventBusMain.$emit(EVENTS.LEAVE_MAIN_CHANNEL_EVENT, {user});
            })
            .listen('.event', (e) => {
                EventBusMain.$emit(e.event, e.data)
            });

The version of laravel echo I'm using is 1.5.4

Why is the X-Socket-Id set per default?

This causes a shitload of problems with most API's and it would be more beneficial to add it whenever you need to call a socket endpoint, rather than to remove it when it causes problems.

The Github API for example does not allow it in their preflight response. For Axios I have to do this all over the place now:

axios.get('user/repos', {
    transformRequest: [function (data, headers) {
        delete headers['X-Socket-Id'];
        return data;
    }]
})

• Echo Version: 1.10.0
• Laravel Version: 8.4.0
• PHP Version: 7.4
• NPM Version: 6.14.6
• Node Version: 4.1.0
• pusher/pusher-php-server: 4.1.5
• pusher-js: 7.0.3

Description:

I use pusher and laravel-echo to create chat app in laravel. public Channels work properly.

I use pusher.com debug console and I realized in PrivateChannel laravel-echo can't subscribe users to Available private channels automaticaly. notice that commented codes is for public channel.

App\Events\ChatBroad.php is:

    public function broadcastOn()
    {
        //        return new channel('recieve-chat.' . $this->chat['reciever_id']);
        return new PrivateChannel('recieve-chat.' . $this->chat['reciever_id']);
    }

routes/channels.php is:

Broadcast::channel('recieve-chat.{reciever_id}', function ($user , $reciever_id) {
      return true;
   // return $user->id == $reciever_id;

});

and in App\Providers\BroadcastServiceProvider i use this middleware:

Broadcast::routes(['middleware' => ['auth']]);

bootstrap.js is:

import Echo from 'laravel-echo'

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '83b97539662b786ffabb',
    cluster: 'eu',
    forceTLS: true,
    authEndpoint: '/broadcasting/auth',
    csrfToken: $('meta[name="csrf-token"]').attr('content'),
});

blade view file:

        <script src="{{asset('js/app.js')}}"></script>
        <script>
            {{--window.addEventListener('DOMContentLoaded' , function () {--}}
            {{--    Echo.channel('recieve-chat.{{Auth::id()}}' )--}}
            {{--        .listen('ChatBroad', (e) => {--}}
            {{--            window.livewire.emit('recieve:' + e.chat.bid_id , e.chat);--}}
            {{--            $(chatScrollDown('.chat'+ e.chat.bid_id ));--}}
            {{--        });--}}
            {{--});--}}

        window.addEventListener('DOMContentLoaded' , function () {
            Echo.private('recieve-chat.{{Auth::id()}}' )
                .listen('ChatBroad', (e) => {
                    window.livewire.emit('recieve:' + e.chat.bid_id , e.chat);
                    $(chatScrollDown('.chat'+ e.chat.bid_id ));
                });
        });
    </script>

I've managed to setup and install Laravel-echo correctly however the callback isn't triggered when an event is send from the debug tool. I see the client connecting succesfully. Can someone help?

@driesvints this is most likely not the correct solution, but it does prevent the errors which are stopping the build from succeeding when using Angular CLI. You will see I just added the listen method to the various PresenceChannels.

I hope this helps!

Note: this PR is one of four parallel pull requests to add first class support for Ably to Laravel. Please find the other PRs here:

• laravel/docs#8120
• laravel/framework#43685
• laravel/laravel#5969

Background: the current Ably broadcaster uses the Pusher JavaScript SDK and the documentation instructs users to use Ably with the Pusher compatibility mode enabled. We’ve received a lot of feedback that various features of the Ably Laravel integration don’t work as expected, often caused by the fact that there’s a dependency on the Pusher JavaScript SDK which we have no control over. This collection of PRs adds a new broadcaster which uses the ably-js SDK which means that we can ensure that the Ably broadcaster will remain stable. We are more than happy to take feedback and answer any questions about the work presented here :)

• Adds a new AblyConnector and associated Channel classes to the library which are compatible with the Ably JavaScript SDK.
• Also adds some integration tests to ensure the new connector continues to work as expected.

See laravel/docs#8120 for usage instructions.