使用订阅时，laravel-graphql-playground 无法连接到 UI 中的 websocket答案

【问题标题】：laravel-graphql-playground can't connect to websocket in UI when using subscribe使用订阅时，laravel-graphql-playground 无法连接到 UI 中的 websocket
【发布时间】：2019-12-11 06:15:45
【问题描述】：

我目前使用 Lighthouse 作为 laravel 的 graphql 服务器。我已经浏览了他们网站上的订阅文档 (https://lighthouse-php.com/master/subscriptions/getting-started.html)，并将适当的推送器凭据添加到 .env 文件中。

尝试通过 graphql-playground UI 订阅时，我收到以下错误：

订阅：

subscription {
  orgUserCreated {
    org
  }
}

错误：

{
  "error": "Could not connect to websocket endpoint ws://localhost:8000/graphql. Please check if the endpoint url is correct."
}

所有突变和查询都在正常工作。

我已经覆盖了 laravel-graphql-playground laravel 的 index.blade.php 文件，并且可以向该文件添加一个“subscriptionEndpoint”变量，但不清楚该变量应该包含什么。

<script type="text/javascript">
  window.addEventListener('load', function (event) {
    const loadingWrapper = document.getElementById('loading-wrapper');
    loadingWrapper.classList.add('fadeOut');
    const root = document.getElementById('root');
    root.classList.add('playgroundIn');
    GraphQLPlayground.init(root, {
      endpoint: "{{url(config('graphql-playground.endpoint'))}}",
      subscriptionEndpoint: "?"
    })
  })
</script>

由于我是通过推送器连接的，有谁知道“subscriptionEndpoint”变量中应该包含什么？

【问题讨论】：

标签： laravel graphql pusher graphql-subscriptions laravel-lighthouse

【解决方案1】：

Pusher Channels 的订阅端点如下（将“you-cluster”替换为您的 Channels 应用所在的集群）：

ws://ws-[your-cluster].pusherapp.com 在端口 80

wss://ws-[your-cluster].pusherapp.com 在端口 443

https://support.pusher.com/hc/en-us/articles/360019420773-What-ports-do-I-need-to-open-in-my-Firewall-to-allow-Channels-to-connect-

【讨论】：

【解决方案2】：

为了将来参考，我不得不使用以下内容：

wss://ws-[CLUSTER].pusher.com:443/app/[APP_KEY]?protocol=5
ws://ws-[CLUSTER].pusher.com:80/app/[APP_KEY]?protocol=5

[CLUSTER] 可以在 pusher 上找到，我的是“eu”

[APP_KEY] 不是 App ID，而是公钥

【讨论】：