Add Sanic example app (uses websockets lib)

mgasner · Jan 11, 2018 · ab015f4 · ab015f4
1 parent ad3713c
commit ab015f4
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 0 deletions.
diff --git a/examples/websockets_lib/__init__.py b/examples/websockets_lib/__init__.py
diff --git a/examples/websockets_lib/app.py b/examples/websockets_lib/app.py
@@ -0,0 +1,36 @@
+from graphql import format_error
+from graphql_ws.websockets_lib import WsLibSubscriptionServer
+from sanic import Sanic, response
+from schema import schema
+from template import render_graphiql
+
+app = Sanic(__name__)
+
+
+@app.route('/graphql', methods=['GET', 'POST'])
+async def graphql_view(request):
+ payload = request.json
+ result = await schema.execute(payload.get('query', ''),
+ return_promise=True)
+ data = {}
+ if result.errors:
+ data['errors'] = [format_error(e) for e in result.errors]
+ if result.data:
+ data['data'] = result.data
+ return response.json(data,)
+
+
+@app.route('/graphiql')
+async def graphiql_view(request):
+ return response.html(render_graphiql())
+
+subscription_server = WsLibSubscriptionServer(schema)
+
+
+@app.websocket('/subscriptions', subprotocols=['graphql-ws'])
+async def subscriptions(request, ws):
+ await subscription_server.handle(ws)
+ return ws
+
+
+app.run(host="0.0.0.0", port=8000)
diff --git a/examples/websockets_lib/requirements.txt b/examples/websockets_lib/requirements.txt
@@ -0,0 +1,3 @@
+graphql_ws
+sanic>=0.7.0
+graphene>=2.0
diff --git a/examples/websockets_lib/schema.py b/examples/websockets_lib/schema.py
@@ -0,0 +1,34 @@
+import random
+import asyncio
+import graphene
+
+
+class Query(graphene.ObjectType):
+ base = graphene.String()
+
+
+class RandomType(graphene.ObjectType):
+ seconds = graphene.Int()
+ random_int = graphene.Int()
+
+
+class Subscription(graphene.ObjectType):
+ count_seconds = graphene.Float(up_to=graphene.Int())
+ random_int = graphene.Field(RandomType)
+
+ async def resolve_count_seconds(root, info, up_to=5):
+ for i in range(up_to):
+ print("YIELD SECOND", i)
+ yield i
+ await asyncio.sleep(1.)
+ yield up_to
+
+ async def resolve_random_int(root, info):
+ i = 0
+ while True:
+ yield RandomType(seconds=i, random_int=random.randint(0, 500))
+ await asyncio.sleep(1.)
+ i += 1
+
+
+schema = graphene.Schema(query=Query, subscription=Subscription)
diff --git a/examples/websockets_lib/template.py b/examples/websockets_lib/template.py
@@ -0,0 +1,124 @@
+
+from string import Template
+
+
+def render_graphiql():
+ return Template('''
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <title>GraphiQL</title>
+ <meta name="robots" content="noindex" />
+ <style>
+ html, body {
+ height: 100%;
+ margin: 0;
+ overflow: hidden;
+ width: 100%;
+ }
+ </style>
+ <link href="//cdn.jsdelivr.net/graphiql/${GRAPHIQL_VERSION}/graphiql.css" rel="stylesheet" />
+ <script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
+ <script src="//cdn.jsdelivr.net/react/15.0.0/react.min.js"></script>
+ <script src="//cdn.jsdelivr.net/react/15.0.0/react-dom.min.js"></script>
+ <script src="//cdn.jsdelivr.net/graphiql/${GRAPHIQL_VERSION}/graphiql.min.js"></script>
+ <script src="//unpkg.com/subscriptions-transport-ws@${SUBSCRIPTIONS_TRANSPORT_VERSION}/browser/client.js"></script>
+ <script src="//unpkg.com/[email protected]/browser/client.js"></script>
+</head>
+<body>
+ <script>
+ // Collect the URL parameters
+ var parameters = {};
+ window.location.search.substr(1).split('&').forEach(function (entry) {
+ var eq = entry.indexOf('=');
+ if (eq >= 0) {
+ parameters[decodeURIComponent(entry.slice(0, eq))] =
+ decodeURIComponent(entry.slice(eq + 1));
+ }
+ });
+ // Produce a Location query string from a parameter object.
+ function locationQuery(params, location) {
+ return (location ? location: '') + '?' + Object.keys(params).map(function (key) {
+ return encodeURIComponent(key) + '=' +
+ encodeURIComponent(params[key]);
+ }).join('&');
+ }
+ // Derive a fetch URL from the current URL, sans the GraphQL parameters.
+ var graphqlParamNames = {
+ query: true,
+ variables: true,
+ operationName: true
+ };
+ var otherParams = {};
+ for (var k in parameters) {
+ if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) {
+ otherParams[k] = parameters[k];
+ }
+ }
+ var fetcher;
+ if (true) {
+ var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient('${subscriptionsEndpoint}', {
+ reconnect: true
+ });
+ fetcher = window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient, graphQLFetcher);
+ } else {
+ fetcher = graphQLFetcher;
+ }
+ // We don't use safe-serialize for location, because it's not client input.
+ var fetchURL = locationQuery(otherParams, '${endpointURL}');
+ // Defines a GraphQL fetcher using the fetch API.
+ function graphQLFetcher(graphQLParams) {
+ return fetch(fetchURL, {
+ method: 'post',
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(graphQLParams),
+ credentials: 'include',
+ }).then(function (response) {
+ return response.text();
+ }).then(function (responseBody) {
+ try {
+ return JSON.parse(responseBody);
+ } catch (error) {
+ return responseBody;
+ }
+ });
+ }
+ // When the query and variables string is edited, update the URL bar so
+ // that it can be easily shared.
+ function onEditQuery(newQuery) {
+ parameters.query = newQuery;
+ updateURL();
+ }
+ function onEditVariables(newVariables) {
+ parameters.variables = newVariables;
+ updateURL();
+ }
+ function onEditOperationName(newOperationName) {
+ parameters.operationName = newOperationName;
+ updateURL();
+ }
+ function updateURL() {
+ history.replaceState(null, null, locationQuery(parameters) + window.location.hash);
+ }
+ // Render <GraphiQL /> into the body.
+ ReactDOM.render(
+ React.createElement(GraphiQL, {
+ fetcher: fetcher,
+ onEditQuery: onEditQuery,
+ onEditVariables: onEditVariables,
+ onEditOperationName: onEditOperationName,
+ }),
+ document.body
+ );
+ </script>
+</body>
+</html>''').substitute(
+ GRAPHIQL_VERSION='0.10.2',
+ SUBSCRIPTIONS_TRANSPORT_VERSION='0.7.0',
+ subscriptionsEndpoint='ws:https://localhost:8000/subscriptions',
+ endpointURL='/graphql',
+ )