diff --git a/juniper/CHANGELOG.md b/juniper/CHANGELOG.md
index 72b79bc32..1584f9251 100644
--- a/juniper/CHANGELOG.md
+++ b/juniper/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Features
 
+- Normalization for the subscriptions_endpoint_url in the `graphiql_source`.
+(See [#628](https://github.com/graphql-rust/juniper/pull/628) for more details)
+  
 - Support raw identifiers in field and argument names. (`#[object]` macro)
 
 - Most error types now implement `std::error::Error`:
diff --git a/juniper/src/http/graphiql.rs b/juniper/src/http/graphiql.rs
index d1cd12cec..71f56170d 100644
--- a/juniper/src/http/graphiql.rs
+++ b/juniper/src/http/graphiql.rs
@@ -31,7 +31,23 @@ pub fn graphiql_source(
     let fetcher_source = r#"
     <script>
         if (usingSubscriptions) {
-            var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient(GRAPHQL_SUBSCRIPTIONS_URL, { reconnect: true });
+            var subscriptionEndpoint = normalizeSubscriptionEndpoint(GRAPHQL_URL, GRAPHQL_SUBSCRIPTIONS_URL);
+            var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient(subscriptionEndpoint, { reconnect: true });
+        }
+
+        function normalizeSubscriptionEndpoint(endpoint, subscriptionEndpoint) {
+            if (subscriptionEndpoint) {
+                if (subscriptionEndpoint.startsWith('/')) {
+                    const secure =
+                        endpoint.includes('https') || location.href.includes('https')
+                        ? 's'
+                        : ''
+                    return `ws${secure}://${location.host}${subscriptionEndpoint}`
+                } else {
+                    return subscriptionEndpoint.replace(/^http/, 'ws')
+                }
+            }
+            return null
         }
 
         function graphQLFetcher(params) {