Websocket 如何使用苦艾酒（长生不老药）和Urql订阅graphql？

我的想法是使用react和urql构建一个客户端应用程序，并使用elixir和Absisize构建一个GraphQLAPI，但目前看来，这两个应用程序在一起的效果并不好

除了Apollo，还有其他客户可以使用苦艾酒订阅吗？我尝试使用urql，但由于ws-connection出现以下错误而失败：

到“ws://localhost:4000/socket/WebSocket”的WebSocket连接失败： WebSocket握手期间出错：发送非空 “Sec WebSocket协议”标头，但未收到响应

到目前为止，我发现的唯一一件似乎与这个问题有关的东西是这个库Absince/socket apollo link（），但它显然只适用于apollo

在我失败的尝试中，我做了以下几点：

import React from 'react'
import { Provider, Client, dedupExchange, fetchExchange, subscriptionExchange } from 'urql'
import { cacheExchange } from '@urql/exchange-graphcache'
import { SubscriptionClient } from 'subscriptions-transport-ws'

const DataProvider = ({ children }) => {
  const cache = cacheExchange({})
  const subscriptionClient = new SubscriptionClient('ws://localhost:4000/socket/websocket', {})
  const client = new Client({
    url: 'http://localhost:4000/api',
    exchanges: [
      dedupExchange,
      cache,
      fetchExchange,
      subscriptionExchange({
        forwardSubscription: operations => subscriptionClient.request(operations),
      }),
    ],
  })
  return <Provider value={client}>{children}</Provider>
}

export default DataProvider

从“React”导入React
从“urql”导入{提供程序、客户端、重复数据交换、fetchExchange、subscriptionExchange}
从'@urql/exchange-graphcache'导入{cacheExchange}
从“订阅传输ws”导入{SubscriptionClient}
常量数据提供程序=（{children}）=>{
const cache=cacheExchange（{}）
const subscriptionClient=new subscriptionClient（'ws://localhost:4000/socket/websocket'，{}）
const client=新客户端({
网址：'http://localhost:4000/api',
交易所：[
重复数据交换，
隐藏物
交换，
订阅交换({
forwardSubscription:operations=>subscriptionClient.request（操作），
}),
],
})
返回{children}
}
导出默认数据提供程序

---

这个“订阅传输ws”是我从一个教程中找到的，ws url末尾神秘的“/websocket”在某期gh杂志中提到过，但它似乎有效（在添加到url末尾之前，根本没有ws连接）。

这显然是一个迟来的回复，但无论如何我会尽力。苦艾酒似乎有一个不同于

ws

的备选客户端库，值得注意的是它在这里：

---

如果您与这个库集成，那么它可能会工作。因此，这意味着您可能需要与PhoenixSocket集成，如图所示：

这显然是一个迟到的回复，但无论如何我会尽力。苦艾酒似乎有一个不同于

ws

的备选客户端库，值得注意的是它在这里：

---

如果您与这个库集成，那么它可能会工作。因此，这意味着您可能必须与

PhoenixSocket

集成，如下所示：

这并不能直接回答问题，但万一有人最终遇到同样的困惑，并作为对您评论的回应：

我从一个教程中发现，在某期gh文章中提到了ws-url末尾的神秘“/websocket”，但它似乎有效（在添加到url末尾之前，根本没有ws-connection）

---

这是因为longpoll和websocket都是可行的传输方式。您很可能在

端点中使用
websocket:true
定义了套接字，这为您提供了该路径。运行
mix phx.routes | grep socket
将是一个有用的命令。
这并不能直接回答这个问题，但万一有人最终遇到同样的困惑，作为对您评论的回应：

我从一个教程中发现，在某期gh文章中提到了ws-url末尾的神秘“/websocket”，但它似乎有效（在添加到url末尾之前，根本没有ws-connection）

这是因为longpoll和websocket都是可行的传输方式。您很可能在
端点中使用
websocket:true
定义了套接字，这为您提供了该路径。运行
mix phx.routes | grep socket
将是一个有用的命令