使用subscriptions-transport-ws設置Apollo服務器？

Question

似乎我的服務器是根據Apollo文檔http://dev.apollodata.com/tools/apollo-server/setup.html設置的。在我的服務器/ main.js文件：

//SET UP APOLLO INCLUDING APOLLO PUBSUB 
const executableSchema = makeExecutableSchema({ 
    typeDefs: Schema, 
    resolvers: Resolvers, 
    connectors: Connectors, 
    logger: console, 
}); 

const GRAPHQL_PORT = 8080; 
const graphQLServer = express(); 

// `context` must be an object and can't be undefined when using connectors 
graphQLServer.use('/graphql', bodyParser.json(), apolloExpress({ 
    schema: executableSchema, 
    context: {}, //at least(!) an empty object 
})); 

graphQLServer.use('/graphiql', graphiqlExpress({ 
    endpointURL: '/graphql', 
})); 

graphQLServer.listen(GRAPHQL_PORT,() => console.log(
    `GraphQL Server is now running on http://localhost:${GRAPHQL_PORT}/graphql` 
)); 
//SET UP APOLLO INCLUDING APOLLO PUBSUB 

它打印出「GraphQL現在服務器上運行http://localhost:8080/graphql」到終端日誌表明服務器已成功初始化。

但在我的main_layout組件的頂部，當我運行這段代碼：

import { Client } from 'subscriptions-transport-ws'; 
const wsClient = new Client('ws://localhost:8080'); 

...我得到這個控制檯消息：

WebSocket連接到「WS：//本地主機：8080 /'失敗：連接在收到握手響應之前關閉

我在想什麼？

Answer 1

您需要創建一個專用的websocket服務器。它將運行在不同的端口上，subscriptions-transport-ws包中提供了設置它的代碼。

採取從GitHunt-API例如下面的代碼一看： https://github.com/apollostack/GitHunt-API/blob/master/api/index.js#L101-L134

而且你會看到這個代碼依賴於一個名爲SubscriptionManager類。這是從一個叫graphql-subscriptions也由太陽神隊包中的類，你可以找到如何在這裏使用它的一個例子： https://github.com/apollostack/GitHunt-API/blob/master/api/subscriptions.js

Answer 2

這是一個關於使用阿波羅GraphQL演示，陣營&哈皮：https://github.com/evolastech/todo-react。它不太不堪重負比GitHunt反應的& GitHunt-API

Answer 3

TL; DR：您可以使用graphql-up，迅速得到一個GraphQL服務器訂閱支持和準備。這裏有更多detailed tutorial與Apollo和websocket客戶端subscriptions-transport-ws結合使用。

獲得一個GraphQL服務器與點擊

比方說，你要在此基礎上GraphQL Schema in IDL syntax建立一個Twitter的克隆：

type Tweet { 
    id: ID! 
    title: String! 
    author: User! @relation(name: "Tweets") 
} 

type User { 
    id: ID! 
    name: String! 
    tweets: [Tweet!]! @relation(name: "Tweets") 
} 

點擊此按鈕可以接受你自己的GraphQL API然後打開Playground，您可以在其中添加一些推文，查詢所有推文並測試訂閱。

簡單易用的API

首先，讓我們創建一個將是筆者對於未來的所有微博用戶。在操場上運行此突變：

mutation createUser { 
    createUser(name: "Tweety") { 
    id # copy this id for future mutations! 
    } 
} 

這裏是你如何查詢存儲在您的GraphQL服務器的所有微博和其作者：

query allTweets { 
    allTweets { 
    id 
    title 
    createdAt 
    author { 
     id 
     name 
    } 
    } 
} 

認購支持使用的WebSockets

現在我們訂閱新的鳴叫來自「Tweety」。這是語法：

subscription createdTweets { 
    Message(filter: { 
    mutation_in: [CREATED] 
    node: { 
     author: { 
     name: "Tweety" 
     } 
    } 
    }) { 
    node { 
     id 
     text 
     createdAt 
     sentBy { 
     id 
     name 
     } 
    } 
    } 
} 

現在創建在操場上一個新的選項卡，並創建一個新的鳴叫：

mutation createTweet { 
    createTweet(
    title: "#GraphQL Subscriptions are awesome!" 
    authorId: "<id-from-above>" 
) { 
    id 
    } 
} 

你應該可以看到一個新的事件在其他標籤彈出，你之前認購。

Answer 4

似乎你並不是真的在製作websocket服務器。使用SubscriptionServer。請記住，如davidyaha所說，你不得不擁有一個專門的websocket端口（我曾經這麼想過）。我有兩個我的普通查詢和潛艇在同一個端口。

import { createServer } from 'http'; 
import { SubscriptionServer } from 'subscriptions-transport-ws'; 
import { execute, subscribe } from 'graphql'; 
import { schema } from './my-schema'; 

// All your graphQLServer.use() etc setup goes here, MINUS the graphQLServer.listen(), 
// you'll do that with websocketServer: 

// Create WebSocket listener server 
const websocketServer = createServer(graphQLServer); 

// Bind it to port and start listening 
websocketServer.listen(3000,() => console.log(
    `Server is now running on http://localhost:3000` 
)); 

const subscriptionServer = SubscriptionServer.create(
    { 
    schema, 
    execute, 
    subscribe, 
    }, 
    { 
    server: websocketServer, 
    path: '/subscriptions', 
    }, 
);