Thiết lập Máy chủ Apollo với đăng ký-vận chuyển-w?

Question

Có vẻ như tôi đã thiết lập máy chủ theo tài liệu của Apollo tại http://dev.apollodata.com/tools/apollo-server/setup.html. Trong máy chủ/main.js tập tin của tôi:

//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 

Nó in ra "GraphQL Server bây giờ đang chạy trên http://localhost:8080/graphql" để đăng nhập thiết bị đầu cuối cho thấy rằng các máy chủ đã được khởi tạo thành công.

Nhưng ở phía trên cùng của phần main_layout của tôi, khi tôi chạy mã này:

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

... tôi nhận được giao diện điều khiển này thông điệp:

kết nối WebSocket để 'ws: // localhost : 8080/'không thành công: Đã đóng kết nối trước khi nhận được phản hồi bắt tay

Tôi đang thiếu gì?

Answer 1

Bạn cần tạo máy chủ websocket chuyên dụng. Nó sẽ chạy trên một cổng khác và mã để thiết lập nó được cung cấp trên gói subscriptions-transport-ws.

Hãy nhìn vào đoạn mã sau từ ví dụ GitHunt-API: https://github.com/apollostack/GitHunt-API/blob/master/api/index.js#L101-L134

Ngoài ra bạn sẽ thấy rằng mã này là phụ thuộc vào một lớp được gọi là SubscriptionManager. Nó là một lớp từ một gói phần mềm được gọi là graphql-subscriptions còn bởi đội apollo, và bạn có thể tìm thấy một ví dụ về cách sử dụng nó ở đây: https://github.com/apollostack/GitHunt-API/blob/master/api/subscriptions.js

Answer 2

Đây là một bản demo về việc sử dụng Apollo GraphQL, Phản ứng & Hapi: https://github.com/evolastech/todo-react. Nó ít bị choáng ngợp hơn GitHunt-Phản ứng & GitHunt-API

Answer 3

TL; DR: Bạn có thể sử dụng graphql-up để nhanh chóng có được một máy chủ GraphQL với đăng ký hỗ trợ lên và sẵn sàng. Dưới đây là một số detailed tutorial về việc sử dụng kết hợp này với Apollo và ứng dụng khách webs subscriptions-transport-ws.

Lấy Server GraphQL với một cú nhấp chuột

Hãy nói rằng bạn muốn xây dựng một bản sao Twitter dựa trên này GraphQL Schema in IDL syntax:

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

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

Bấm nút này để nhận riêng GraphQL API của bạn và sau đó mở Playground, nơi bạn có thể thêm một số tweet, truy vấn tất cả các tweet và cũng kiểm tra các đăng ký.

Dễ sử dụng API

Trước tiên, hãy tạo người dùng sẽ là tác giả cho tất cả các tweet sắp tới.Chạy đột biến này trong sân chơi:

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

Đây là cách bạn truy vấn tất cả các tweet và các tác giả của họ được lưu trữ tại máy chủ GraphQL của bạn:

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

đăng ký hỗ trợ sử dụng WebSockets

Hãy nay đăng ký vào tweet mới từ "Tweety". Đây là cú pháp:

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

Bây giờ, tạo một tab mới trong sân chơi và tạo ra một Tweet mới:

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

Bạn sẽ thấy một sự kiện mới nảy lên trong tab khác mà bạn đăng ký trước.

Answer 4

Dường như bạn không thực sự tạo máy chủ websocket. sử dụng SubscriptionServer. Hãy nhớ rằng nó là hoàn toàn không đúng sự thật rằng bạn phải có một cổng websocket chuyên dụng (tôi nghĩ điều này một lần quá) như davidyaha nói. Tôi có cả các truy vấn bình thường và subs của tôi trên cùng một cổng.

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', 
    }, 
);