Web worker worked

cypress/e2e/array-binary-search/client.html

@@ -22,11 +22,7 @@
     <h1>Connect JIFF</h1>
     <label for="computation_id">Computation ID</label><input id="computation_id" value="test"></input><br/><br/>
     <label for="role">Choose Role</label>
-    <select id="role">
-      <option value="1">Provide Array</option>
-      <option value="2">Provide element to search</option>
-    </select>
-    <button id="connectButton" onclick="connect();">Connect</button>
+    <button id="connectButton" onclick="connect(1);connect(2)">Connect</button>
     <br/><br/>
     <hr/>
     <div class="container" id="input1" style="display: block">

cypress/e2e/array-binary-search/client.js

@@ -1,26 +1,10 @@
-/*
- * Do not modify this file unless you have too
- * This file has UI handlers.
- */
-// eslint-disable-next-line no-unused-vars
-function connect() {
+let worker = new Worker('./web-worker.js');
+
+function connect(party_id) {
   $('#connectButton').prop('disabled', true);
   var computation_id = $('#computation_id').val();
-  var party_id = parseInt($('#role').val());
 
   var options = { party_id: party_id, party_count: 2, Zp: 13 };
-  options.onError = function (_, error) {
-    $('#output').append('<p class="error">' + error + '</p>');
-    $('#connectButton').prop('disabled', false);
-  };
-  options.onConnect = function () {
-    if (party_id === 1) {
-      $('#input1').show();
-    } else {
-      $('#input2').show();
-    }
-    $('#result').append('All parties Connected!<br/>');
-  };
 
   var hostname = window.location.hostname.trim();
   var port = window.location.port;
@@ -40,9 +24,37 @@ function connect() {
   hostname = hostname + ':' + port;
 
   // eslint-disable-next-line no-undef
-  mpc.connect(hostname, computation_id, options);
+  if (party_id === 1) {
+    worker.postMessage({
+      type: 'init_array',
+      hostname: hostname,
+      computation_id: computation_id,
+      options: options
+    });
+  } else if (party_id === 2) {
+    worker.postMessage({
+      type: 'init_elem',
+      hostname: hostname,
+      computation_id: computation_id,
+      options: options
+    });
+  }
 }
 
+worker.onmessage = function (e) {
+  if (e.data.type === 'array') {
+    const msg = e.data.result === 1 ? 'Element Found' : 'Element Does Not Exist';
+    document.querySelector('#output').innerHTML += `<p>${msg}</p>`;
+  }
+};
+
+worker.onmessage = function (e) {
+  if (e.data.type === 'element') {
+    const msg = e.data.result === 1 ? 'Element Found' : 'Element Does Not Exist';
+    document.querySelector('#output').innerHTML += `<p>${msg}</p>`;
+  }
+};
+
 // eslint-disable-next-line no-unused-vars
 function submitArray() {
   var arr = JSON.parse($('#inputArray').val());
@@ -53,12 +65,9 @@ function submitArray() {
     }
   }
 
-  // eslint-disable-next-line no-undef
-  var promise = mpc.compute(arr);
-
-  promise.then(function (result) {
-    var msg = result === 1 ? 'Element Found' : 'Element Does Not Exist';
-    $('#output').append('<p>' + msg + '</p>');
+  worker.postMessage({
+    type: 'computeArray',
+    input: arr
   });
 }
 
@@ -75,11 +84,8 @@ function submitElement() {
     return;
   }
 
-  // eslint-disable-next-line no-undef
-  var promise = mpc.compute(element);
-
-  promise.then(function (result) {
-    var msg = result === 1 ? 'Element Found' : 'Element Does Not Exist';
-    $('#output').append('<p>' + msg + '</p>');
+  worker.postMessage({
+    type: 'computeElement',
+    input: element
   });
 }

cypress/e2e/array-binary-search/mpc.js

@@ -1,6 +1,4 @@
 (function (exports, node) {
-  var saved_instance;
-  var seeds = {};
 
   /**
    * Connect to the server and initialize the jiff instance
@@ -28,45 +26,28 @@
     return saved_instance;
   };
 
-  exports.compute = function (input, jiff_instance) {
-    if (jiff_instance == null) {
-      jiff_instance = saved_instance;
-    }
-
-    // Unique prefix seed for op_ids
-    if (seeds[jiff_instance.id] == null) {
-      seeds[jiff_instance.id] = 0;
-    }
-    var seed = seeds[jiff_instance.id]++;
-
-    var element = null;
-    var array = null;
+  exports.compute = async function (input, jiff_instance) {
     if (jiff_instance.id === 1) {
-      array = input;
-      array.sort(function (a, b) {
-        // sorts array: note that the sort function without comparison function inside it will interpret numbers as strings
-        // (e.g. 100 smaller than 25)
+      input.sort(function (a, b) {
         return a - b;
       });
-    } else {
-      element = input;
     }
-
-    var deferred = $.Deferred();
-    var promise = deferred.promise();
-
-    element = jiff_instance.share(element, 2, [1, 2], [2])[2];
-    jiff_instance.share_array(array, null, 2, [1, 2], [1]).then(function (array) {
-      jiff_instance.seed_ids(seed);
-
-      array = array[1];
-      var result = binary_search(array, element);
-      result.open().then(function (result) {
-        deferred.resolve(result);
+    return new Promise((resolve, reject) => {
+      jiff_instance.wait_for([1, 2], async () => {
+        try {
+          const inputs = await jiff_instance.share_array(input)
+
+          const array = inputs[1];
+          const elem = inputs[2];
+
+          const occurrences = await binary_search(array, elem);
+          result = await jiff_instance.open(occurrences);
+          resolve(result);
+        } catch (error) {
+          reject(error);
+        }
       });
     });
-
-    return promise;
   };
 
   function binary_search(array, element) {

cypress/e2e/array-binary-search/test.cy.ts

@@ -6,20 +6,14 @@ describe('Array Binary Search', () => {
 
   it('Search Output', () => {
     // Visit the HTML page
-    cy.visit('./cypress/e2e/array-binary-search/client.html');
+    cy.visit('http://localhost:8080/cypress/e2e/array-binary-search/client.html');
 
     // Load the input data and interact with the UI
     cy.get('@inputData').then((inputData) => {
       const arrayInput = (inputData as any)['array-binary-search']['1'] as number[];
       const elementInput = (inputData as any)['array-binary-search']['2'] as number;
 
       // Ensure the correct role is selected and the inputs are visible
-      cy.get('#role').select('Provide Array');
-      cy.get('#connectButton').click();
-
-      // The second submitter provides an element to search
-      cy.visit('./cypress/e2e/array-binary-search/client.html');
-      cy.get('#role').select('Provide element to search');
       cy.get('#connectButton').click();
 
       // Input the array by contributor 1

cypress/e2e/array-binary-search/web-worker.js

@@ -0,0 +1,27 @@
+importScripts('./mpc.js', '../../../dist/jiff-client.js', '../../../dist/jiff-client-websockets.js');
+
+let elem_instance;
+let array_instance;
+
+self.onmessage = function (event) {
+  const data = event.data;
+
+  switch (data.type) {
+    case 'init_elem':
+      elem_instance = mpc.connect(data.hostname, data.computation_id, data.options);
+      break;
+    case 'init_array':
+      array_instance = mpc.connect(data.hostname, data.computation_id, data.options);
+      break;
+    case 'computeElement':
+      mpc.compute(data.input, elem_instance).then((result) => {
+        self.postMessage({ result: result, type: 'element' });
+      });
+      break;
+    case 'computeArray':
+      mpc.compute(data.input, array_instance).then((result) => {
+        self.postMessage({ result: result, type: 'array' });
+      });
+      break;
+  }
+};

cypress/support/server.ts

@@ -16,7 +16,3 @@ jiff_instance.apply_extension(jiffWebsocketServer);
 http.listen(8080, function () {
   console.log('listening on *:8080');
 });
-
-console.log('Direct your browser to http://localhost:8080/demos/array-binary-search/client.html.');
-console.log('To run a server-based party: node demos/array-binary-search/party <input>');
-console.log();