Heroku Node.js WebSocket Sever Chat Deployment - node.js

Question

Websocket server not connecting after deployment on heroku:
I already went through the documentation and a heroku tutorial.
I am able to run the application locally but running into problems on heroku deployment. The UI part is working, but doesn't seem to be connecting to the back end. Procfile as been updated.
The client connection url would need to be changed to a localhost:8989 to work locally. When I hard coded the url in the client before deployment, the error in console is the same as when I don't run the websocket server running with npm start locally.
https://github.com/kbventures/chatTest
Front end:
import * as types from '../constants/ActionTypes';
import { addUser, messageReceived, populateUsersList } from '../actions';
const setupSocket = (dispatch, username) => {
const socket = new WebSocket('wss://boiling-brook-76849.herokuapp.com');
//const HOST = location.origin.replace(/^http/, 'ws');
//const socket = new WebSocket(HOST);
socket.onopen = () => {
socket.send(
JSON.stringify({
type: types.ADD_USER,
name: username
})
);
};
socket.onmessage = event => {
const data = JSON.parse(event.data);
switch (data.type) {
case types.ADD_MESSAGE:
dispatch(messageReceived(data.message, data.author));
break;
case types.ADD_USER:
dispatch(addUser(data.name));
break;
case types.USERS_LIST:
dispatch(populateUsersList(data.users));
break;
default:
break;
}
};
return socket;
};
export default setupSocket;
Back end:
const WebSocket = require('ws');
const port = process.env.PORT || 8989;
const wss = new WebSocket.Server({ port });
const users = [];
const broadcast = (data, ws) => {
wss.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN && client !== ws) {
client.send(JSON.stringify(data));
}
});
};
wss.on('connection', ws => {
let index;
ws.on('message', message => {
const data = JSON.parse(message);
switch (data.type) {
case 'ADD_USER': {
index = users.length;
users.push({ name: data.name, id: index + 1 });
ws.send(
JSON.stringify({
type: 'USERS_LIST',
users
})
);
broadcast(
{
type: 'USERS_LIST',
users
},
ws
);
break;
}
case 'ADD_MESSAGE':
broadcast(
{
type: 'ADD_MESSAGE',
message: data.message,
author: data.author
},
ws
);
break;
default:
break;
}
});
ws.on('close', () => {
users.splice(index, 1);
broadcast(
{
type: 'USERS_LIST',
users
},
ws
);
});
});
Locally the user list would populate, update and there would no errors in the browser console.
In order to reproduce error go to :
https://boiling-brook-76849.herokuapp.com/
Type a message and then check the console for the following error:
index.js:2178 uncaught at handleNewMessage at handleNewMessage
at takeEvery
at
Error: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state
...
index.js:5 WebSocket connection to 'wss://boiling-brook-76849.herokuapp.com/' failed: Error during WebSocket handshake: Unexpected response code: 503