Skip to content

Commit ab015f4

Browse files
hballardhballard
committed
Add Sanic example app (uses websockets lib)
1 parent ad3713c commit ab015f4

File tree

5 files changed

+197
-0
lines changed

5 files changed

+197
-0
lines changed

‎examples/websockets_lib/__init__.py‎

Whitespace-only changes.

‎examples/websockets_lib/app.py‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
from graphql import format_error
2+
from graphql_ws.websockets_lib import WsLibSubscriptionServer
3+
from sanic import Sanic, response
4+
from schema import schema
5+
from template import render_graphiql
6+
7+
app = Sanic(__name__)
8+
9+
10+
@app.route('/graphql', methods=['GET', 'POST'])
11+
async def graphql_view(request):
12+
payload = request.json
13+
result = await schema.execute(payload.get('query', ''),
14+
return_promise=True)
15+
data = {}
16+
if result.errors:
17+
data['errors'] = [format_error(e) for e in result.errors]
18+
if result.data:
19+
data['data'] = result.data
20+
return response.json(data,)
21+
22+
23+
@app.route('/graphiql')
24+
async def graphiql_view(request):
25+
return response.html(render_graphiql())
26+
27+
subscription_server = WsLibSubscriptionServer(schema)
28+
29+
30+
@app.websocket('/subscriptions', subprotocols=['graphql-ws'])
31+
async def subscriptions(request, ws):
32+
await subscription_server.handle(ws)
33+
return ws
34+
35+
36+
app.run(host="0.0.0.0", port=8000)

‎examples/websockets_lib/requirements.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
graphql_ws
2+
sanic>=0.7.0
3+
graphene>=2.0

‎examples/websockets_lib/schema.py‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import random
2+
import asyncio
3+
import graphene
4+
5+
6+
class Query(graphene.ObjectType):
7+
base = graphene.String()
8+
9+
10+
class RandomType(graphene.ObjectType):
11+
seconds = graphene.Int()
12+
random_int = graphene.Int()
13+
14+
15+
class Subscription(graphene.ObjectType):
16+
count_seconds = graphene.Float(up_to=graphene.Int())
17+
random_int = graphene.Field(RandomType)
18+
19+
async def resolve_count_seconds(root, info, up_to=5):
20+
for i in range(up_to):
21+
print("YIELD SECOND", i)
22+
yield i
23+
await asyncio.sleep(1.)
24+
yield up_to
25+
26+
async def resolve_random_int(root, info):
27+
i = 0
28+
while True:
29+
yield RandomType(seconds=i, random_int=random.randint(0, 500))
30+
await asyncio.sleep(1.)
31+
i += 1
32+
33+
34+
schema = graphene.Schema(query=Query, subscription=Subscription)

‎examples/websockets_lib/template.py‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
2+
from string import Template
3+
4+
5+
def render_graphiql():
6+
return Template('''
7+
<!DOCTYPE html>
8+
<html>
9+
<head>
10+
<meta charset="utf-8" />
11+
<title>GraphiQL</title>
12+
<meta name="robots" content="noindex" />
13+
<style>
14+
html, body {
15+
height: 100%;
16+
margin: 0;
17+
overflow: hidden;
18+
width: 100%;
19+
}
20+
</style>
21+
<link href="//cdn.jsdelivr.net/graphiql/${GRAPHIQL_VERSION}/graphiql.css" rel="stylesheet" />
22+
<script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
23+
<script src="//cdn.jsdelivr.net/react/15.0.0/react.min.js"></script>
24+
<script src="//cdn.jsdelivr.net/react/15.0.0/react-dom.min.js"></script>
25+
<script src="//cdn.jsdelivr.net/graphiql/${GRAPHIQL_VERSION}/graphiql.min.js"></script>
26+
<script src="//unpkg.com/subscriptions-transport-ws@${SUBSCRIPTIONS_TRANSPORT_VERSION}/browser/client.js"></script>
27+
<script src="//unpkg.com/graphiql-subscriptions-fetcher@0.0.2/browser/client.js"></script>
28+
</head>
29+
<body>
30+
<script>
31+
// Collect the URL parameters
32+
var parameters = {};
33+
window.location.search.substr(1).split('&').forEach(function (entry) {
34+
var eq = entry.indexOf('=');
35+
if (eq >= 0) {
36+
parameters[decodeURIComponent(entry.slice(0, eq))] =
37+
decodeURIComponent(entry.slice(eq + 1));
38+
}
39+
});
40+
// Produce a Location query string from a parameter object.
41+
function locationQuery(params, location) {
42+
return (location ? location: '') + '?' + Object.keys(params).map(function (key) {
43+
return encodeURIComponent(key) + '=' +
44+
encodeURIComponent(params[key]);
45+
}).join('&');
46+
}
47+
// Derive a fetch URL from the current URL, sans the GraphQL parameters.
48+
var graphqlParamNames = {
49+
query: true,
50+
variables: true,
51+
operationName: true
52+
};
53+
var otherParams = {};
54+
for (var k in parameters) {
55+
if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) {
56+
otherParams[k] = parameters[k];
57+
}
58+
}
59+
var fetcher;
60+
if (true) {
61+
var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient('${subscriptionsEndpoint}', {
62+
reconnect: true
63+
});
64+
fetcher = window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient, graphQLFetcher);
65+
} else {
66+
fetcher = graphQLFetcher;
67+
}
68+
// We don't use safe-serialize for location, because it's not client input.
69+
var fetchURL = locationQuery(otherParams, '${endpointURL}');
70+
// Defines a GraphQL fetcher using the fetch API.
71+
function graphQLFetcher(graphQLParams) {
72+
return fetch(fetchURL, {
73+
method: 'post',
74+
headers: {
75+
'Accept': 'application/json',
76+
'Content-Type': 'application/json',
77+
},
78+
body: JSON.stringify(graphQLParams),
79+
credentials: 'include',
80+
}).then(function (response) {
81+
return response.text();
82+
}).then(function (responseBody) {
83+
try {
84+
return JSON.parse(responseBody);
85+
} catch (error) {
86+
return responseBody;
87+
}
88+
});
89+
}
90+
// When the query and variables string is edited, update the URL bar so
91+
// that it can be easily shared.
92+
function onEditQuery(newQuery) {
93+
parameters.query = newQuery;
94+
updateURL();
95+
}
96+
function onEditVariables(newVariables) {
97+
parameters.variables = newVariables;
98+
updateURL();
99+
}
100+
function onEditOperationName(newOperationName) {
101+
parameters.operationName = newOperationName;
102+
updateURL();
103+
}
104+
function updateURL() {
105+
history.replaceState(null, null, locationQuery(parameters) + window.location.hash);
106+
}
107+
// Render <GraphiQL /> into the body.
108+
ReactDOM.render(
109+
React.createElement(GraphiQL, {
110+
fetcher: fetcher,
111+
onEditQuery: onEditQuery,
112+
onEditVariables: onEditVariables,
113+
onEditOperationName: onEditOperationName,
114+
}),
115+
document.body
116+
);
117+
</script>
118+
</body>
119+
</html>''').substitute(
120+
GRAPHIQL_VERSION='0.10.2',
121+
SUBSCRIPTIONS_TRANSPORT_VERSION='0.7.0',
122+
subscriptionsEndpoint='ws://localhost:8000/subscriptions',
123+
endpointURL='/graphql',
124+
)

0 commit comments

Comments
 (0)