diff --git a/src/client/javascript/scripts/sample.js b/src/client/javascript/scripts/user1.js
similarity index 64%
rename from src/client/javascript/scripts/sample.js
rename to src/client/javascript/scripts/user1.js
index 71467d6..d5b0515 100644
--- a/src/client/javascript/scripts/sample.js
+++ b/src/client/javascript/scripts/user1.js
@@ -20,28 +20,24 @@ describe('Interactivity tests', function() {
   describe('Basic connection tests', () => {
     beforeEach(() => {
       // Start a new test case.
+      task.bindListener('user2')
       return task.startCase();
     });
     afterEach(() => {
       // Stop a test case.
       return task.stopCase();
     });
-    it('Each endpoint sends a message should success.', (done) => {
-      task.addEventListener('test1', (event) => {
-        if (event.sender != task.role) {
-          // Execute done when received message from another endpoint.
-          done();
-        }
+    it('testConnect should success.', (done) => {
+      task.run(() => {
+        task.notifyWorkflowLock('user1', 'connect');
+      }).then(() => {
+        return task.waitWorkflowLock('user2', 'connect')
+      }).then(() => {
+        console.log("test success")
+        done()
+      }).catch(err => {
+        done(err)
       })
-      task.send('test1', 'Something useful.');
-    });
-    it('Each endpoint sends a message again should success.', (done) => {
-      task.addEventListener('test2', (event) => {
-        if (event.sender != task.role) {
-          done();
-        }
-      })
-      task.send('test2', 'Something more useful.');
     });
   });
 
diff --git a/src/client/javascript/scripts/user2.js b/src/client/javascript/scripts/user2.js
new file mode 100644
index 0000000..ede87ba
--- /dev/null
+++ b/src/client/javascript/scripts/user2.js
@@ -0,0 +1,50 @@
+import {
+  Task
+} from "../../sdk/javascript/task.js";
+
+const expect = chai.expect;
+const url = window.location.href;
+const task = new Task({
+  taskId: (new URL(document.location)).searchParams.get("taskId"),
+  role: (new URL(document.location)).searchParams.get('role'),
+  socketIoUrl: 'https://' + document.domain + ':8080/'
+});
+
+describe('Interactivity tests', function() {
+  this.timeout(50000);  // Set a larger timeout value because it needs to wait for another endpoint's response.
+  document.getElementById('iatf-state').innerText = 'Preparing';
+  before(() => {
+    // Start a new task.
+    return task.start();
+  });
+  describe('Basic connection tests', () => {
+    beforeEach(() => {
+      // Start a new test case.
+      task.bindListener('user1')
+      return task.startCase();
+    });
+    afterEach(() => {
+      // Stop a test case.
+      return task.stopCase();
+    });
+    it('testConnect should success.', (done) => {
+      task.waitWorkflowLock('user1', 'connect').then(() => {
+        console.log("user1 connect")
+      }).then(() => {
+        task.run(() => {
+           task.notifyWorkflowLock('user2', 'connect');
+        })
+        done()
+      }).catch(err => {
+        done(err)
+      })
+    });
+  });
+
+  after(() => {
+    document.getElementById('iatf-state').innerText = 'Finished';
+  });
+}).timeout(50000);
+
+mocha.checkLeaks();
+mocha.run();
\ No newline at end of file
diff --git a/src/client/javascript/test.html b/src/client/javascript/user1.html
similarity index 92%
rename from src/client/javascript/test.html
rename to src/client/javascript/user1.html
index 18fbb4b..09ebb9e 100644
--- a/src/client/javascript/test.html
+++ b/src/client/javascript/user1.html
@@ -17,6 +17,6 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/5.2.0/mocha.min.js"></script>
   <script src="https://localhost:8080/socket.io/socket.io.js"></script>
   <script>mocha.setup({ui:'bdd'})</script>
-  <script type="module" src="scripts/sample.js"></script>
+  <script type="module" src="scripts/user1.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/client/javascript/user2.html b/src/client/javascript/user2.html
new file mode 100644
index 0000000..73db140
--- /dev/null
+++ b/src/client/javascript/user2.html
@@ -0,0 +1,22 @@
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>IATF JavaScript Sample</title>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/mocha/5.2.0/mocha.min.css" rel="stylesheet" />
+  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
+  <style>
+  #mocha{
+    font-family: "Lato","tahoma",Helvetica,"helvetica",Arial,sans-serif;
+  }
+  </style>
+</head>
+<body>
+  <div id="mocha"></div>
+  <div id="iatf-state"></div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.2.0/chai.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/5.2.0/mocha.min.js"></script>
+  <script src="https://localhost:8080/socket.io/socket.io.js"></script>
+  <script>mocha.setup({ui:'bdd'})</script>
+  <script type="module" src="scripts/user2.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/client/sdk/javascript/task.js b/src/client/sdk/javascript/task.js
index d57b8a9..811e793 100644
--- a/src/client/sdk/javascript/task.js
+++ b/src/client/sdk/javascript/task.js
@@ -18,6 +18,7 @@ export class Task extends EventDispatcher {
     this._caseSequenceNumber = 0;
     this._resolveStartCase;
     this._caseState = CaseState.unknown;
+    this._eventMsg = new Map();
     Object.defineProperty(this, 'configuration', {
       configurable: false,
       writable: false,
@@ -67,19 +68,12 @@ export class Task extends EventDispatcher {
         console.log('Recieved workflow message: ' + message);
         this.dispatchEvent(new WorkflowEvent(message.type, {
           sender: message.sender,
-          data: message.data
+          message: message.data
         }));
       });
     });
   };
 
-  send(type, data) {
-    this._socket.emit('iatf-workflow', {
-      type: type,
-      data: data
-    });
-  }
-
   startCase() {
     this._caseSequenceNumber++;
     this._caseState = CaseState.ready;
@@ -106,4 +100,45 @@ export class Task extends EventDispatcher {
     // Return immediately, so app has more time to prepare for the next case. But we can wait for server's confirmation without changing API.
     return Promise.resolve();
   }
+
+  bindListener(eventType) {
+    this.addEventListener(eventType, (event) => {
+      console.log(eventType)
+      console.log(event)
+      if (!this._eventMsg.has(eventType)) {
+        this._eventMsg.set(eventType, event);
+      }else{
+        this._eventMsg.get(eventType).sender = event.sender;
+        this._eventMsg.get(eventType).message = event.data;
+      }
+    })
+  }
+
+  waitWorkflowLock(eventType, eventData) {
+    return new Promise((resolve, reject) => {
+      let interval = setInterval(() => {
+        if (this._eventMsg.has(eventType) && this._eventMsg.get(eventType).message == eventData){
+          clearInterval(interval)
+          clearTimeout(timeout)
+          resolve()
+        }
+      }, 500)
+      let timeout = setTimeout(() => {
+         clearInterval(interval)
+         reject("can not get message:" + eventData)
+      }, 10000)
+    })
+  }
+
+  notifyWorkflowLock(type, data) {
+    this._socket.emit('iatf-workflow', {
+      type: type,
+      data: data
+    });
+  }
+
+  run(func){
+    func()
+    return Promise.resolve();
+  }
 }
\ No newline at end of file