amplify-cli: Failed to construct 'WebSocket' when using amplify mock over http

Copied from an upstream amplify-cli issue as reported by @riacoding:

Describe the bug Create a fresh react project and add amplify to it with an API. On running amplify mock api the graphql subscriptions are not working as expected with the AWSAppSyncRealTimeProvider having a connection failed exception after timeout.

Amplify CLI Version Amplify/Cli@4.5.0

To Reproduce Following demo from aws blog post by Nikhil Dabhade https://aws.amazon.com/blogs/mobile/amplify-framework-local-mocking/

npx create-react-app myapp amplify init amplify add api npm i aws-amplify replace App.js with code below

import React, { useEffect, useReducer } from “react”; import Amplify from “@aws-amplify/core”; import { API, graphqlOperation } from “aws-amplify”; import { createTodo } from “./graphql/mutations”; import { listTodos } from “./graphql/queries”; import { onCreateTodo, onUpdateTodo } from “./graphql/subscriptions”;

import config from “./aws-exports”; Amplify.configure(config); // Configure Amplify

const initialState = { todos: [] }; const reducer = (state, action) => { switch (action.type) { case “QUERY”: return { …state, todos: action.todos }; case “SUBSCRIPTION”: return { …state, todos: […state.todos, action.todo] }; default: return state; } };

async function createNewTodo() { const todo = { name: “Use AppSync”, description: “Realtime and Offline” }; await API.graphql(graphqlOperation(createTodo, { input: todo })); } function App() { const [state, dispatch] = useReducer(reducer, initialState);

useEffect(() => { getData(); const subscription = API.graphql(graphqlOperation(onCreateTodo)).subscribe({ next: eventData => { const todo = eventData.value.data.onCreateTodo; dispatch({ type: “SUBSCRIPTION”, todo }); } }); return () => { subscription.unsubscribe(); }; }, []);

async function getData() { const todoData = await API.graphql(graphqlOperation(listTodos)); dispatch({ type: “QUERY”, todos: todoData.data.listTodos.items }); }

return ( <div> <div className="App"> <button onClick={createNewTodo}>Add Todo</button> </div> <div> {state.todos.map((todo, i) => (

{todo.name} : {todo.description}

))} </div> </div> ); } export default App; amplify mock api npm start

Expected behavior From the http://localhost:20002/ local endpoint using graphiql to create a mutation create a todo item. This would then be automatically updated on the http://localhost:3000/ endpoint via the graphql subscription.

The error appears to happen because new Websocket is called with a string that starts with http:// instead of the required ws:// or wss://.

https:// is replaced with wss:// here.

Suggest adding a line that replaces http:// with ws:// to enable supporting subscriptions with amplify mock which runs locally on http:// by default.