Connecting to the Streaming API via GraphiQL

To better visualize the streaming API, a playground application is available that uses a tool called GraphiQL. The GraphiQL tool is often utilized with GraphQL APIs. It is available as a standalone web page from our public Github repository.

Note:

The GraphiQL page has a limitation that a single browser can only stream events from one application at a time. GraphiQL cannot be open in multiple tabs or windows consuming events from different applications.

Connecting via GraphiQL

  1. Enter the URL (see the ‘Information required to call the WebSocket’ section in WebSocket Authorization).

  2. Enter an Auth Token as described in WebSocket Authorization.

  3. Enter the API key as it is listed in the Developer Portal.

    This is the not the sha256 hash of the API key.

  4. Click the Start button.

    • This stores the values on your machine not on the server. Only you can view these saved values.

    • This populates the Socket Key.

    The connection is open if you see the three boxes appear below the Start button.

    • The left-hand box holds the subscription request. By default, this includes a getHelp query and an example subscription.

    • The middle box holds the latest response.

    • The right-hand box is a navigable representation of the GraphQL schema showing the fields you can include in the subscription.

    Since the middle box holds only the latest response, you should open developer tools in your browser, usually the Network tab, so that all events sent on the stream are visible.

  5. Click the play button to open the WebSocket connection. By default, this returns the getHelp query with useful links to this guide.

  6. Comment out the getHelp query and remove the comments in front of the example subscription.

    Use CTRL + / to comment or uncomment.

  7. Optionally, add elements from the GraphQL schema into the subscription. Press CTRL + space to list fields from the schema.

  8. Click the play button to open the WebSocket connection. All events that occurred after the subscription was approved are now sent with the latest event shown in the middle pane. The WebSocket connection remains open until you click the stop button. This means if any of the events chosen in the Developer Portal occur in the subscribed hotel(s), the events are immediately sent on the streaming API and appear in the middle pane.

Note:

When the Auth Token expires, the connection must be severed by clicking the stop button and then reestablished with a fresh Auth Token every hour. As noted in the Broken Connections topic, OHIP sends any events that occurred between stopping and restarting the WebSocket connection.

Viewing Historic Events

To view historic events, use your web browser's developer tools. For example:

  1. In Mozilla Firefox, press F12 to open developer tools.

  2. Click the Network tab.

  3. Click WS to show only WebSocket requests.

  4. After clicking the play button, click the last web service request sent.

  5. When the details appear, click the Response tab.

You will see all the sent business events. You can view each business event inside the developer tools by clicking it, or you can copy it by right clicking the business event in the list of responses and clicking Copy Message.

Parent topic: Connecting to the Streaming API