{"id":15162296,"url":"https://github.com/xingsy97/webpubsub-graphql-subscribe","last_synced_at":"2025-09-30T15:31:37.470Z","repository":{"id":143927880,"uuid":"387457538","full_name":"xingsy97/webpubsub-graphql-subscribe","owner":"xingsy97","description":null,"archived":true,"fork":false,"pushed_at":"2021-07-23T08:22:25.000Z","size":43,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-02-24T23:01:59.237Z","etag":null,"topics":["azure","graphql","graphql-server","realtime-messaging","webpubsub","websocket"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xingsy97.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-19T12:32:17.000Z","updated_at":"2023-08-04T10:49:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"92c9f790-8837-425b-b6d6-bcf33eb6e670","html_url":"https://github.com/xingsy97/webpubsub-graphql-subscribe","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xingsy97%2Fwebpubsub-graphql-subscribe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xingsy97%2Fwebpubsub-graphql-subscribe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xingsy97%2Fwebpubsub-graphql-subscribe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xingsy97%2Fwebpubsub-graphql-subscribe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xingsy97","download_url":"https://codeload.github.com/xingsy97/webpubsub-graphql-subscribe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234747853,"owners_count":18880518,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["azure","graphql","graphql-server","realtime-messaging","webpubsub","websocket"],"created_at":"2024-09-27T01:22:41.091Z","updated_at":"2025-09-30T15:31:37.187Z","avatar_url":"https://github.com/xingsy97.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpubsub-graphql-subscribe\r\n\r\n## Introduction\r\n[Microsoft Azure Web PubSub](https://docs.microsoft.com/en-us/azure/azure-web-pubsub/overview) is a real-time messaging cloud service.\r\nIn GraphQL, `subscriptions` are long-lasting GraphQL read operations that can update their result whenever a particular server-side event occurs. And it is usually implemented with WebSocket protocol. \r\n\r\nFirstly, this package helps developers use Microsoft Azure WebPub service to avoid server-side maintenance of WebSocket connections between users clients and GraphQL server caused by `subscriptions` query from clients.\r\n\r\nSecondly, this package provides a replacement for `PubSub` using Azure Web PubSub service. [PubSub](https://www.apollographql.com/docs/apollo-server/data/subscriptions/#the-pubsub-class) is an in-memory event-publishing system provided by [Apollo server](https://www.apollographql.com/docs/apollo-server/data/subscriptions/).\r\n\r\n## Prepare\r\n\r\n1. Create a Microsoft Azure Web PubSub resource instance. Details are [Here](https://docs.microsoft.com/en-us/azure/azure-web-pubsub/quickstart-serverless?tabs=javascript).\r\n\r\n2. Use `ngrok` to expose our local endpoint to the public Internet\r\n\r\n**Notice**: make sure the region of your Azure Web PubSub resource and the region of ngrok tunnel server are the same. For Example, if your Azure Web PubSub instance is located in Asia Pacific (ap) region , run your ngrok with parameter `--region=ap` as below. [Ngrok documents](https://ngrok.com/docs#global-locations) shows more location settings.\r\n```\r\nngrok http --region=ap 8888 \r\n```\r\nThen you'll get a forwarding endpoint `http://{ngrok-id}.ngrok.io` like `http://1bff94a2f246.ap.ngrok.io`\r\n\r\n3. Set `Event Handler` in Azure Web PubSub service. Go to **Azure portal** -\u003e Find your Web PubSub resource -\u003e **Settings**. Add two new hub settings as below. Replace the {ngrok-id} to yours. \r\n\r\n| Hub Name: graphql_main                         |                    |                                |\r\n| ---------------------------------------------- | ------------------ | ------------------------------ |\r\n| URL Template                                   | User Event Pattern | System Events                  |\r\n| http://{ngrok-id}.ngrok.io/wps-services/main   | *                  | connect,connected,disconnected |\r\n\r\n\r\n| Hub Name: graphql_pubsub                       |                    |                                |\r\n| ---------------------------------------------- | ------------------ | ------------------------------ |\r\n| URL Template                                   | User Event Pattern | System Events                  |\r\n| http://{ngrok-id}.ngrok.io/wps-services/pubsub | *                  | No system Events is selected   |\r\n\r\n## Deploy a demo\r\n1. Clone this repository and install required package\r\n```git\r\ngit clone https://github.com/xingsy97/webpubsub-graphql-subscribe\r\ncd webpubsub-graphql-subscribe\r\nnpm install\r\n```\r\n\r\n2. replace `\u003cweb-pubsub-connection-string\u003e` in `demos/demo.js` Line 7 to your own Azure Web PubSub connection string\r\n\r\n3. Compile \u0026\u0026 Run the demo\r\n```bash\r\nnpm run compile \u0026\u0026 npm run demo\r\n```\r\n\r\n4. Open your web browser like Google Chrome, visit `http://localhost:4000/graphql`.\r\nCopy the following GraphQL query to the left panel.\r\n```gql\r\nsubscription sampleSubscription {\r\n  numberIncremented\r\n}\r\n```\r\nThen click the play button and watch the right pannel.\r\n\r\n## Usage\r\n`src/demos/demo-without-webpubsub.ts` is a sample show Subscriptions in Apollo Server without Azure WebPub service. Follow these instructions, we will apply Web Pubsub to this sample.\r\n1. define a variable to store Web PubSub connection string\r\n```javascript\r\nconst webpubsub_conn_string = \"\u003cwebpubsub-connection-string\u003e\"\r\n```\r\n\r\n2. replace original in-memory event system `PubSub` to our `WpsPubSub` based on Web PubSub.\r\n\r\nOld:\r\n```\r\nconst pubsub = new PubSub();\r\n```\r\n\r\nNew: \r\n```\r\nconst pubsub = new WpsPubSub(webpubsub_conn_string);\r\n```\r\n\r\n3. use `create_webpubsub_subscribe_server` exported by our package to create a subscription server\r\n\r\nOld:\r\n```javascript\r\nSubscriptionServer.create(\r\n  { schema, execute, subscribe },\r\n  { server: httpServer, path: apolloServer.graphqlPath }\r\n);\r\n```\r\n\r\nNew:\r\n\r\n```javascript\r\nawait create_webpubsub_subscribe_server(apolloServer, schema, pubsub, webpubsub_conn_string);\r\n```\r\n\r\nNow your subscription server inside Apollo Server is based on Azure Web PubSub service. Refer to `src/demos/demo.ts` for complete source code.\r\n\r\n\r\n## Implementations\r\n- class `WpsWebSocketServer`\r\n  - Original GraphQL subscriptions implementation starts up a WebSocket server which listens to clients and maintains WebSocket connections in server-side. \r\n  - This class replaces original `WebSocket.Server` and communicate between the server and WebPub service using HTTP protocol.\r\n  - And clients use WebSocket communicates with WebPub service rather than directly communicate with our server by WebSocket.\r\n\r\n- class `WpsPubSub`\r\n  - It implements the `PubSubEngine` Interface from the `graphql-subscriptions` package using Azure Web PubSub service.\r\n  - It replaces the original in-memory event system `PubSub` and allows you to connect your subscriptions manager to an Azure Web PubSub service to support multiple subscription manager instances.\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxingsy97%2Fwebpubsub-graphql-subscribe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxingsy97%2Fwebpubsub-graphql-subscribe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxingsy97%2Fwebpubsub-graphql-subscribe/lists"}