diff --git a/examples/jquery/.eslintrc.json b/examples/jquery/.eslintrc.json new file mode 100644 index 00000000..97d990dd --- /dev/null +++ b/examples/jquery/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "semistandard" +} \ No newline at end of file diff --git a/examples/jquery/.gitignore b/examples/jquery/.gitignore new file mode 100644 index 00000000..b512c09d --- /dev/null +++ b/examples/jquery/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/examples/jquery/README.md b/examples/jquery/README.md new file mode 100644 index 00000000..e296b232 --- /dev/null +++ b/examples/jquery/README.md @@ -0,0 +1,11 @@ +# JQuery Example + +This example exposes a simple service at the route `http://localhost:3000/flakeyService`. As the service receives requests, it gets slower and slower. Once it takes more than 1 second to respond, the service just returns a `423 (Locked)` error. + +Start the server. + +```sh +$ npm start +``` + +Browse to `http://localhost:3000` and click the button to see the service in action. \ No newline at end of file diff --git a/examples/jquery/app.js b/examples/jquery/app.js new file mode 100644 index 00000000..29b4a855 --- /dev/null +++ b/examples/jquery/app.js @@ -0,0 +1,68 @@ +'use strict'; +/* global $ circuitBreaker */ + +(function appInitialization () { + $(() => { + $('#flakey').click(handleClick('/flakeyService', '#flakeyResponse')); + $('.clear').click(function () { $(this).siblings('p').remove(); }); + }); + + const circuitBreakerOptions = { + timeout: 500, + maxFailures: 2, + resetTimeout: 5000, + Promise: Promise + }; + + function handleClick (route, element) { + const circuit = circuitBreaker((route, element) => { + circuit.fallback(() => ({ body: `${route} unavailable right now. Try later.` })); + + // Return a promise to the circuit + return new Promise((resolve, reject) => { + $.get(route) + .done((data) => resolve(data)) + .fail((err) => { + reject(err); + console.error(err); + }); + }); + }, circuitBreakerOptions); + + circuit.on('success', + (data) => $(element).append(makeNode(`SUCCESS: ${JSON.stringify(data)}`))); + + circuit.on('timeout', + () => $(element).append( + makeNode(`TIMEOUT: ${route} is taking too long to respond.`))); + + circuit.on('reject', + () => $(element).append( + makeNode(`REJECTED: The breaker for ${route} is open. Failing fast.`))); + + circuit.on('open', + () => $(element).append( + makeNode(`OPEN: The breaker for ${route} just opened.`))); + + circuit.on('halfOpen', + () => $(element).append( + makeNode(`HALF_OPEN: The breaker for ${route} is half open.`))); + + circuit.on('close', + () => $(element).append( + makeNode(`CLOSE: The breaker for ${route} has closed. Service OK.`))); + + circuit.on('fallback', + (data) => $(element).append( + makeNode(`FALLBACK: ${JSON.stringify(data)}`))); + + return () => circuit.fire(route, element).catch((e) => console.error(e)); + } + + function makeNode (body) { + const response = document.createElement('p'); + $(response).addClass(body.substring(0, body.indexOf(':')).toLowerCase()); + response.append(body); + return response; + } +})(); diff --git a/examples/jquery/index.html b/examples/jquery/index.html new file mode 100644 index 00000000..15f17eab --- /dev/null +++ b/examples/jquery/index.html @@ -0,0 +1,70 @@ + +
++ When you click the button here, this simple app calls a flakey web service that takes longer and longer to respond. The app's circuit breaker is configured to timeout after 500ms and execute a fallback command. Every 20 seconds, the flakey service is reset and the pattern is repeated. This should allow you to see all of the various events that occur when using a circuit breaker. +
++ The source code for the application is relatively simple, and uses some basic jQuery capabilities to make the ajax calls and update the DOM accordingly. +
+