Merge pull request #3587 from ethcore/ng-ws-improved

Work around WS in UI
This commit is contained in:
Gav Wood 2016-11-23 19:29:02 +01:00 committed by GitHub
commit 7e800b7a63
6 changed files with 197 additions and 58 deletions

View File

@ -29,21 +29,33 @@ export default class Ws extends JsonRpcBase {
this._token = token;
this._messages = {};
this._connecting = true;
this._connecting = false;
this._connected = false;
this._lastError = null;
this._autoConnect = false;
this._autoConnect = true;
this._retries = 0;
this._reconnectTimeoutId = null;
this._connect();
}
updateToken (token) {
this._token = token;
this._autoConnect = false;
this._autoConnect = true;
this._connect();
}
_connect () {
if (this._connecting) {
return;
}
if (this._reconnectTimeoutId) {
window.clearTimeout(this._reconnectTimeoutId);
this._reconnectTimeoutId = null;
}
const time = parseInt(new Date().getTime() / 1000, 10);
const sha3 = keccak_256(`${this._token}:${time}`);
const hash = `${sha3}_${time}`;
@ -53,6 +65,7 @@ export default class Ws extends JsonRpcBase {
this._ws.onopen = null;
this._ws.onclose = null;
this._ws.onmessage = null;
this._ws.close();
this._ws = null;
}
@ -65,6 +78,27 @@ export default class Ws extends JsonRpcBase {
this._ws.onopen = this._onOpen;
this._ws.onclose = this._onClose;
this._ws.onmessage = this._onMessage;
// Get counts in dev mode
if (process.env.NODE_ENV === 'development') {
this._count = 0;
this._lastCount = {
timestamp: Date.now(),
count: 0
};
window.setInterval(() => {
const n = this._count - this._lastCount.count;
const t = (Date.now() - this._lastCount.timestamp) / 1000;
const s = Math.round(1000 * n / t) / 1000;
if (this._debug) {
console.log('::parityWS', `speed: ${s} req/s`, `count: ${this._count}`);
}
}, 5000);
window._parityWS = this;
}
}
_onOpen = (event) => {
@ -72,6 +106,7 @@ export default class Ws extends JsonRpcBase {
this._connected = true;
this._connecting = false;
this._autoConnect = true;
this._retries = 0;
Object.keys(this._messages)
.filter((id) => this._messages[id].queued)
@ -79,18 +114,39 @@ export default class Ws extends JsonRpcBase {
}
_onClose = (event) => {
console.log('ws:onClose', event);
this._connected = false;
this._connecting = false;
this._lastError = event;
if (this._autoConnect) {
setTimeout(() => this._connect(), 500);
const timeout = this.retryTimeout;
const time = timeout < 1000
? Math.round(timeout) + 'ms'
: (Math.round(timeout / 10) / 100) + 's';
console.log('ws:onClose', `trying again in ${time}...`);
this._reconnectTimeoutId = setTimeout(() => {
this._connect();
}, timeout);
return;
}
console.log('ws:onClose', event);
}
_onError = (event) => {
console.error('ws:onError', event);
this._lastError = event;
// Only print error if the WS is connected
// ie. don't print if error == closed
window.setTimeout(() => {
if (this._connected) {
console.error('ws:onError', event);
this._lastError = event;
}
}, 50);
}
_onMessage = (event) => {
@ -127,11 +183,16 @@ export default class Ws extends JsonRpcBase {
_send = (id) => {
const message = this._messages[id];
message.queued = !this._connected;
if (this._connected) {
this._ws.send(message.json);
if (process.env.NODE_ENV === 'development') {
this._count++;
}
return this._ws.send(message.json);
}
message.queued = !this._connected;
message.timestamp = Date.now();
}
execute (method, ...params) {
@ -159,4 +220,27 @@ export default class Ws extends JsonRpcBase {
get lastError () {
return this._lastError;
}
/**
* Exponential Timeout for Retries
*
* @see http://dthain.blogspot.de/2009/02/exponential-backoff-in-distributed.html
*/
get retryTimeout () {
// R between 1 and 2
const R = Math.random() + 1;
// Initial timeout (100ms)
const T = 100;
// Exponential Factor
const F = 2;
// Max timeout (4s)
const M = 4000;
// Current number of retries
const N = this._retries;
// Increase retries number
this._retries++;
return Math.min(R * T * Math.pow(F, N), M);
}
}

View File

@ -21,25 +21,39 @@ export default class Registry {
this._api = api;
this._contracts = [];
this._instance = null;
this._fetching = false;
this._queue = [];
this.getInstance();
}
getInstance () {
return new Promise((resolve, reject) => {
if (this._instance) {
resolve(this._instance);
return;
}
if (this._instance) {
return Promise.resolve(this._instance);
}
this._api.parity
.registryAddress()
.then((address) => {
this._instance = this._api.newContract(abis.registry, address).instance;
resolve(this._instance);
})
.catch(reject);
});
if (this._fetching) {
return new Promise((resolve) => {
this._queue.push({ resolve });
});
}
this._fetching = true;
return this._api.parity
.registryAddress()
.then((address) => {
this._fetching = false;
this._instance = this._api.newContract(abis.registry, address).instance;
this._queue.forEach((queued) => {
queued.resolve(this._instance);
});
this._queue = [];
return this._instance;
});
}
getContract (_name) {

View File

@ -17,6 +17,7 @@
import { getBalances, getTokens } from './balancesActions';
import { setAddressImage } from './imagesActions';
import Contracts from '../../contracts';
import * as abis from '../../contracts/abi';
import imagesEthereum from '../../../assets/images/contracts/ethereum-black-64x64.png';
@ -84,15 +85,9 @@ export default class Balances {
return Promise.resolve(this._tokenreg);
}
return this._api.parity
.registryAddress()
.then((registryAddress) => {
const registry = this._api.newContract(abis.registry, registryAddress);
return registry.instance.getAddress.call({}, [this._api.util.sha3('tokenreg'), 'A']);
})
.then((tokenregAddress) => {
const tokenreg = this._api.newContract(abis.tokenreg, tokenregAddress);
return Contracts.get().tokenReg
.getContract()
.then((tokenreg) => {
this._tokenreg = tokenreg;
this.attachToTokens();

View File

@ -71,8 +71,8 @@ export default class Status {
* @see src/views/Connection/connection.js
*/
_shouldPing = () => {
const { isConnected, isConnecting } = this._apiStatus;
return isConnecting || !isConnected;
const { isConnected } = this._apiStatus;
return !isConnected;
}
_stopPollPing = () => {
@ -119,7 +119,7 @@ export default class Status {
_pollStatus = () => {
const nextTimeout = (timeout = 1000) => {
setTimeout(this._pollStatus, timeout);
setTimeout(() => this._pollStatus(), timeout);
};
const { isConnected, isConnecting, needsToken, secureToken } = this._api;
@ -134,7 +134,8 @@ export default class Status {
const gotReconnected = !this._apiStatus.isConnected && apiStatus.isConnected;
if (gotReconnected) {
this._pollLongStatus();
this._pollLongStatus(true);
this._store.dispatch(statusCollection({ isPingable: true }));
}
if (!isEqual(apiStatus, this._apiStatus)) {
@ -175,13 +176,12 @@ export default class Status {
this._store.dispatch(statusCollection(status));
this._status = status;
}
nextTimeout();
})
.catch((error) => {
console.error('_pollStatus', error);
nextTimeout(250);
});
nextTimeout();
}
/**
@ -223,7 +223,11 @@ export default class Status {
* fetched every 30s just in case, and whenever
* the client got reconnected.
*/
_pollLongStatus = () => {
_pollLongStatus = (newConnection = false) => {
if (!this._api.isConnected) {
return;
}
const nextTimeout = (timeout = 30000) => {
if (this._longStatusTimeoutId) {
clearTimeout(this._longStatusTimeoutId);
@ -242,7 +246,7 @@ export default class Status {
this._api.parity.netChain(),
this._api.parity.netPort(),
this._api.parity.rpcSettings(),
this._api.parity.enode()
newConnection ? Promise.resolve(null) : this._api.parity.enode()
])
.then(([
clientVersion, defaultExtraData, netChain, netPort, rpcSettings, enode
@ -255,21 +259,23 @@ export default class Status {
netChain,
netPort,
rpcSettings,
enode,
isTest
};
if (enode) {
longStatus.enode = enode;
}
if (!isEqual(longStatus, this._longStatus)) {
this._store.dispatch(statusCollection(longStatus));
this._longStatus = longStatus;
}
nextTimeout();
})
.catch((error) => {
console.error('_pollLongStatus', error);
nextTimeout(250);
});
nextTimeout(newConnection ? 5000 : 30000);
}
_pollLogs = () => {

View File

@ -25,12 +25,13 @@ export default class SecureApi extends Api {
this._isConnecting = true;
this._connectState = sysuiToken === 'initial' ? 1 : 0;
this._needsToken = false;
this._nextToken = nextToken;
this._dappsPort = 8080;
this._dappsInterface = null;
this._signerPort = 8180;
this._followConnectionTimeoutId = null;
console.log('SecureApi:constructor', sysuiToken);
// Try tokens from localstorage, then from hash
this._tokensToTry = [ sysuiToken, nextToken ].filter((t) => t && t.length);
this._followConnection();
}
@ -40,15 +41,30 @@ export default class SecureApi extends Api {
console.log('SecureApi:setToken', this._transport.token);
}
_checkNodeUp () {
return fetch('/', { method: 'HEAD' })
.then(
(r) => r.status === 200,
() => false
)
.catch(() => false);
}
_followConnection = () => {
const nextTick = () => {
setTimeout(() => this._followConnection(), 250);
if (this._followConnectionTimeoutId) {
clearTimeout(this._followConnectionTimeoutId);
}
this._followConnectionTimeoutId = setTimeout(() => this._followConnection(), 250);
};
const setManual = () => {
this._connectState = 100;
this._needsToken = true;
this._isConnecting = false;
};
const lastError = this._transport.lastError;
const isConnected = this._transport.isConnected;
@ -58,11 +74,23 @@ export default class SecureApi extends Api {
if (isConnected) {
return this.connectSuccess();
} else if (lastError) {
const nextToken = this._nextToken || 'initial';
const nextState = this._nextToken ? 0 : 1;
return this
._checkNodeUp()
.then((isNodeUp) => {
const nextToken = this._tokensToTry[0] || 'initial';
const nextState = nextToken !== 'initial' ? 0 : 1;
this._nextToken = null;
this.updateToken(nextToken, nextState);
// If previous token was wrong (error while node up), delete it
if (isNodeUp) {
this._tokensToTry = this._tokensToTry.slice(1);
}
if (nextToken !== this._transport.token) {
this.updateToken(nextToken, nextState);
}
nextTick();
});
}
break;

View File

@ -197,30 +197,42 @@ module.exports = {
historyApiFallback: false,
quiet: false,
hot: !isProd,
proxy: {
'/api/*': {
proxy: [
{
context: (pathname, req) => {
return pathname === '/' && req.method === 'HEAD';
},
target: 'http://127.0.0.1:8180',
changeOrigin: true,
autoRewrite: true
},
{
context: '/api/*',
target: 'http://127.0.0.1:8080',
changeOrigin: true,
autoRewrite: true
},
'/app/*': {
{
context: '/app/*',
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/app': ''
}
},
'/parity-utils/*': {
{
context: '/parity-utils/*',
target: 'http://127.0.0.1:3000',
changeOrigin: true,
pathRewrite: {
'^/parity-utils': ''
}
},
'/rpc/*': {
{
context: '/rpc/*',
target: 'http://localhost:8080',
changeOrigin: true
}
}
]
}
};