you can use this sample code:
if(type of web3 !== 'undefined'){
// Use injected web3 by Metamask/Mist
window.web3js = new Web3(web3.currentProvider);
} else {
// Fallback to local node
// you can use Infura Node Urls also
// 'http://127.0.0.1:8545' will be replaced by
// 'https://ropsten.infura.io/<API KEy>'
window.web3js = new Web3(new Web3.providers.HttpProvider('http://127.0.0.1:8545'));
}
here you can see i have added web3js instance, instead of replacing web3 instance injected by Metamask or Mist.
Update
To consume JSON-RPC API's over WebSockets, use web3.js beta version 1.0.0-beta https://github.com/ethereum/web3.js/tree/1.0
First expose RPC API's over Web Socket Interface
geth --testnet --ws --wsorigins="*"
then instantiate web3 in your page as
web3 = new Web3("ws://127.0.0.1:8546");
Written a detailed blog on setting up local geth node & communicating with it. http://blog.kherwa.com/2018/05/10/building-a-dapp-series-part1-set-up-and-communicate-with-an-ethereum-node/
Fatal: Error starting protocol stack: listen udp :30303: bind: Only one usage of each socket address (protocol/network address/port) is normally permitted
– Hina Khuman May 14 '18 at 11:08