Invalid Frame Header when Implementing Subscriptions for Apollo-Client with Hasura

Question

I am creating an httpLink for mutations and queries, and then a wsLink for subscriptions since subscriptions need to go through a websocket. Here is an example of what my code looks like.

const token = 'hasura-token-generated-from-admin-secret';

const httpLink = createHttpLink({
  uri: 'https://path-to-site.hasura.app/v1/graphql'
});

const wsLink = new WebSocketLink({
  uri: 'ws://path-to-site.hasura.app/v1/graphql',
  options: {
    reconnect: true,
    connectionParams: {
      'Authorization': `Bearer ${token}`
    }
  }
});

const spliLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink
);

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      'x-hasura-admin-secret': token
    }
  }
});

const client = new ApolloClient({
  link: authLink.concat(splitLink);
  cache: new InMemoryCache()
});

However, when I run my application I get the following error:

WebSocket connection to 'ws://path-to-site.hasura.app/v1/graphql' failed: Invalid frame header

I tried the solution here but to no avail, and Hasura's documentation does not fully specify how to properly configure the headers in order to make it work. I have mutations and queries executing fine, but subscriptions are what I am having problems with.

Any help would be greatly appreciated! Thank you.