How to connect to a socket published in Heroku from Visualforce

Visualforce Socket connection

<apex:page showHeader="true" sidebar="true">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCu1PGlWXv9cLbWdaYgCh8M5gXvduD3LeM&libraries=geometry"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="https://cdn.socket.io/socket.io-1.3.7.js"></script>
	<script>
		var wsUri = "wss://young-shelf-7004.herokuapp.com/websocket"; 
		var output;  

		function init() { 
			output = document.getElementById("output"); testWebSocket(); 
		}  
		function testWebSocket() { 
			websocket = new WebSocket(wsUri); 
			
			websocket.onopen = function(evt) { 
				onOpen(evt)
			}; 
			
			websocket.onclose = function(evt) { 
				onClose(evt) 
			}; 

			websocket.onmessage = function(evt) { 
				onMessage(evt) 
			}; 
			
			websocket.onerror = function(evt) { 
				onError(evt) }; 
		}  

		function onOpen(evt) { writeToScreen("Conectado al Socket."); doSend("You are connected"); }  

		function onClose(evt) { 
			writeToScreen("DISCONNECTED"); 
			init();
		}  

		function onMessage(evt) { 
			writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
			//websocket.close(); 
		}  

		function onError(evt) { writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data); }  

		function doSend(message) { writeToScreen("SENT: " + message);  websocket.send(message); }  

		function writeToScreen(message) { var pre = document.createElement("p"); pre.style.wordWrap = "break-word"; pre.innerHTML = message; output.appendChild(pre); }  window.addEventListener("load", init, false);
	</script>

	<div id="output"></div>
</apex:page>