Laravel Echo 与 Pusher 和 Vue答案

【问题标题】：Laravel Echo with Pusher and VueLaravel Echo 与 Pusher 和 Vue
【发布时间】：2020-06-14 04:32:44
【问题描述】：

我使用 Laravel 作为服务器部分，使用 Vue Cli 作为客户端。我也使用https://docs.beyondco.de/laravel-websockets/ 但是当我尝试将 vue 客户端连接到 laravel websockets 时，控制台日志中出现错误。

WebSocket connection to 'ws://http//websockets.test:6001/app/myKey?protocol=7&client=js&version=5.1.1&flash=false' failed: Connection closed before receiving a handshake response

WebSocket connection to 'wss://http//websockets.test:443/app/myKey?protocol=7&client=js&version=5.1.1&flash=false' failed: Error in connection establishment: net::ERR_CONNECTION_CLOSED

Access to XMLHttpRequest at 'http://sockjs-mt1.pusher.com/pusher/app/myKey/659/6nenb2dd/xhr_streaming?protocol=7&client=js&version=5.1.1&t=1583092642805&n=1' from origin 'http://app.vuesocks.test:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是我在 Vue Cli index.js Echo 选项中的代码

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: 'myKey',
  cluster: 'mt1',
  authEndpoint: 'http://websockets.test/broadcasting/auth',
  wsHost: 'http://websockets.test',
  wsPort: 6001,
  disableStats: true,
  auth: {
    headers: {
      Authorization: 'Bearer myToken...',
    },
  },
});

BroadcastServiceProvider.php

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

频道.php

Broadcast::channel('chat', function () {
    return 'Hello!';
});

如果删除wsHost 和wsPort 则没有错误，但没有任何反应，服务器没有响应。

【问题讨论】：

你在运行 php artisan websockets:serve 吗？在大多数情况下，在收到响应之前关闭连接就是由于这个原因。

标签： laravel vue.js laravel-echo pusher-js laravel-websockets

【解决方案1】：

我遇到了同样的问题（Laravel 和 Vuejs），它在 localhost 中工作，但是当我托管到 vps 时，CORS 问题出现在控制台中。我将 pushers-js 版本从 6.0.0 更改为 5.1.1，这对我有用。

【讨论】：

【解决方案2】：

这可能已经解决了，但是对于那些仍然无法让他们的前端监听事件的人来说，对我有用的是将 pusher-js 恢复到版本 5.1.1，在 repo 上找到了这个问题的答案：https://github.com/beyondcode/laravel-websockets/issues/365

【讨论】：