Ok so I'm trying to decouple the demo repository into two installations. And I'll also be using the "server-only" installation to work with all my other projects that currently use Pusher.
So I created a new mysql database 'db_socketmaster' and set it inside .env
laravel new socketmaster
cd socketmaster
composer require beyondcode/laravel-websockets
composer require pusher/pusher-php-server "~3.0" (as per instructions but seems redundant since this is a dependency of beyondcode/laravel-websockets)
pa key:generate
pa migrate
pa vendor:publish (to publish the config and migrations from websockets)
I'm running this off Valet with --secure
In my websockets.php. I added the necessary entries to the SSL part as per the new Valet configuration.. no problem there
Then in the apps section I added this
'apps' => [
[
'id' => '4036967643',
'name' => 'site-1',
'key' => 'E2fAKqHM0EvOAL',
'secret' => 'InMBQzUtRueKdf',
'enable_client_messages' => false,
'enable_statistics' => true,
],
[
'id' => '6641070849',
'name' => 'site-2',
'key' => '7kWyUamVkIaAZw',
'secret' => 'iLKvyU3f3ftzJK',
'enable_client_messages' => false,
'enable_statistics' => true,
],
[
'id' => '9566892751',
'name' => 'site-3',
'key' => 'zRr6ThwvOPoIeK',
'secret' => 'HufIJdYCfWDGBh',
'enable_client_messages' => false,
'enable_statistics' => true,
],
[
'id' => '2856995658',
'name' => 'websockets-demo',
'key' => 'gzfYlnfja2LiS4',
'secret' => '1jHb1sxlhavkS8',
'enable_client_messages' => false,
'enable_statistics' => true,
],
// [
// 'id' => '',
// 'name' => '',
// 'key' => '',
// 'secret' => '',
// 'enable_client_messages' => false,
// 'enable_statistics' => true,
// ],
],
Ignore the first 3, so the 4th one is for the laravel-websockets-demo. I used a random generator to generate all the fake app IDs and key/secrets
I set the broadcast driver to pusher (or in my case pusher-dev)
And then inside broadcasting.php config file, this is where I'm confused
I put this
'pusher' => [
'driver' => 'pusher',
// 'key' => env('PUSHER_APP_KEY'),
// 'secret' => env('PUSHER_APP_SECRET'),
// 'app_id' => env('PUSHER_APP_ID'),
'options' => [
// 'cluster' => env('PUSHER_APP_CLUSTER'),
'encrypted' => true,
'host' => '127.0.0.1',
'port' => 6001,
'scheme' => 'https',
],
],
'pusher-dev' => [
'driver' => 'pusher',
// 'key' => env('PUSHER_APP_KEY'),
// 'secret' => env('PUSHER_APP_SECRET'),
// 'app_id' => env('PUSHER_APP_ID'),
'options' => [
// 'cluster' => env('PUSHER_APP_CLUSTER'),
'encrypted' => true,
'host' => '127.0.0.1',
'port' => 6001,
'scheme' => 'https',
'curl_options' => [
CURLOPT_SSL_VERIFYHOST => 0,
CURLOPT_SSL_VERIFYPEER => 0,
],
],
],
I set another connection "pusher-dev" because on production I don't want to disable the host verification. I set the scheme to https for both.. and where I'm confused is.. what am I supposed to put for the key/secret/app_id ? since this is not for any particular app but is managing multiple apps
So I just commented out those values. Also I think the cluster is redundant at this point am I right?
I ran php artisan websockets:serve, no errors here
Then I modified the bootstrap.js inside the demo to this:
window.Echo = new Echo({
broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// wsHost: window.location.hostname,
key: 'gzfYlnfja2LiS4',
wsHost: 'socketmaster.dev',
wsPort: 6001,
wssPort: 6001,
disableStats: true,
});
I'm using the "key" from the 4th app, the 'websocket-demo' app. And for the host I'm using my "socket manager" url, which is correct. I'm able to visit the debug dashboard at https://socketmaster.dev/laravel-websockets
I ran npm run prod
And then I visited the chat demo, logged in. I get no errors in the console or the network tab. But in my terminal running the websockets I get an 'Invalid Signature' error
New connection opened for app key gzfYlnfja2LiS4.
Connection id 125098324.201156164 sending message {"event":"pusher:connection_established","data":"{\"socket_id\":\"125098324.201156164\",\"activity_timeout\":30}"}
2856995658: connection id 125098324.201156164 received message: {"event":"pusher:subscribe","data":{"auth":"websocketkey:34efbef0371bee17728389eb9b08f4dd53077ee2cccaadfe90f7a0637db67a34","channel_data":"{\"user_id\":1,\"user_info\":{\"id\":1,\"name\":\"Charlie\",\"email\":\"[email protected]\",\"email_verified_at\":null,\"created_at\":\"2018-12-05 02:10:01\",\"updated_at\":\"2018-12-05 02:10:01\"}}","channel":"presence-chat"}}.
Exception `BeyondCode\LaravelWebSockets\WebSockets\Exceptions\InvalidSignature` thrown: `Invalid Signature`
2856995658: exception `BeyondCode\LaravelWebSockets\WebSockets\Exceptions\InvalidSignature` thrown: `Invalid Signature`.
Connection id 125098324.201156164 sending message {"event":"pusher:error","data":{"message":"Invalid Signature","code":4009}}
2856995658: connection id 943809179.970880291 received message: {"event":"pusher:ping","data":{}}.
Connection id 943809179.970880291 sending message {"event":"pusher:pong"}
I also gets CORS errors afterwards
Is this purely a CORS issue?
My 'allowed_origins' array is left empty on socketmaster's websockets.php configuration
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent