服务器上的Pusher错误:4009超时内未授权连接

Question

我运行Laravel 9应用程序时使用：
vue 3.2.37
vite 2.9.15
pusher/pusher php服务器7.0
Laravel echo 1.14.0

所有这些在localhost上都很好，但在服务器上，我在devtools中有这两个事件->网络->ws尝试连接到频道时：
第一个：{"event":"pusher:connection_established","data":"{"socket_id":"137307.1921357","activity_timeout":120}"}
和第二个：{"event":"pusher:error","data":{"code":4009,"message":"Connection not authorized within timeout"}}

我已经在Pusher应用程序设置中启用了授权连接，但我不知道这个未经授权的错误是从哪里来的。它发生在服务器端，在localhost上我有一个subscribed event
，并且在localhost和服务器上的开发工具中显示的sockets之间存在差异：
localhost：显示了两个套接字：ws://localhost:3000/和wss://ws-eu.pusher.com/app/App_key?protocol=7&client=js&version=7.4.0&flash=false

但在服务器上只有一个：wss://ws-eu.pusher.com/app/App_key?protocol=7&client=js&version=7.4.0&flash=false

bootstrap.js

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;
window.Echo = new Echo({
broadcaster: 'pusher',
key: import.meta.env.VITE_PUSHER_APP_KEY,
wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
wsPort: 443, //import.meta.env.VITE_PUSHER_PORT ?? 80,
wssPort: 443, //import.meta.env.VITE_PUSHER_PORT ?? 443,
forceTLS: true,  // (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
disableStats: true,
cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
enabledTransports: ['ws', 'wss'],
//authEndpoint: "https://support.demkit.fr/broadcasting/auth",
encrypted: true,
});

.env:

BROADCAST_DRIVER=pusher    
PUSHER_APP_ID=1******
PUSHER_APP_KEY=6******
PUSHER_APP_SECRET=8*********
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=eu
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

channels.php

Broadcast::channel('messages.{RoomId}', function ($user, $RoomId) {
//if(Auth::check())
//return ['id' => $RoomId];    
return true; // I tried to return all time true to get authorization but it doesn't work :(
});

Answer 1

发生此错误是因为您的客户端在超时时间内没有订阅专用或呈现频道。当启用授权连接时，任何未订阅此类频道的连接都将被终止。https://pusher.com/docs/channels/using_channels/authorized-connections/

关闭此设置或订阅要解决的专用/呈现频道。

Answer 2

Slution

我通过添加自定义授权端点检查自定义授权端点解决了此问题laravel 的文档

web.hp:

Route::post('/pusher/user-auth', [PusherController::class, 'pusherAuth']);

推进器控制器：

/**
* Authenticates logged-in user in the Pusher JS app
* For private channels
*/
public function pusherAuth(Request $request)
{
$user = auth()->user();
$socket_id = $request['socket_id'];
$channel_name =$request['channel_name'];
$key = config('broadcasting.connections.pusher.key'); 
$secret = config('broadcasting.connections.pusher.secret'); 
$app_id = config('broadcasting.connections.pusher.app_id'); 
if ($user) {

$pusher = new Pusher($key, $secret, $app_id);
$auth = $pusher->socketAuth($channel_name, $socket_id);
return response($auth, 200);
} else {
header('', true, 403);
echo "Forbidden";
return;
}
}

和引导文件：

window.Echo = new Echo({
broadcaster: 'pusher',
key: import.meta.env.VITE_PUSHER_APP_KEY,
wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
wsPort: 443, //import.meta.env.VITE_PUSHER_PORT ?? 80,
wssPort: 443, //import.meta.env.VITE_PUSHER_PORT ?? 443,
forceTLS:  (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
disableStats: true,
cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
enabledTransports: ['ws', 'wss'],
authEndpoint: "/pusher/user-auth", // this is the new endpoint for auth
encrypted: true,
});

最后不要将.env文件中的BROADCAST_DRIVER更改为pusher而不是log