Scripting Enhancements - HTML5 with Visual Studio 2012 - page 114

eXerCISe 5-2. CreatING a ShareD WOrKer

1. Open the Index.cshtml file and add the following script reference in the head

element after the previous reference:

<script src="Scripts/controlSharedWorker.js"></script>

2. Add the code shown in bold in Listing 5-4 to the form element. This will add another

set of buttons to control the shared worker.

Listing 5-4. The additional buttons in Index.cshtml

<form id="control" method="post" action="">
<input id="create" type="button" class="button" value="Create Worker"
onclick="createWorker()"><br>
<input id="send" type="button" class="button" value="Send Message"
onclick="sendWorkerMessage()">
<input id="message" type="text" class="text" value="Hello, World!"><br>
<input id="kill" type="button" class="button" value="Close Worker"
onclick="closeWorker()">
<br><br>
<input id="createS" type="button" class="button" value="Create Shared"
onclick="createSharedWorker()"><br>
<input id="sendS" type="button" class="button" value="Send Shared Msg"
onclick="sendSharedWorkerMessage()">
<input id="messageS" type="text" class="text" value="Hello, World!"><br>
<input id="killS" type="button" class="button" value="Close Shared"
onclick="closeSharedWorker()">
</form>

3. From the Solution Explorer, add another file to the Scripts folder named

sharedWorker.js and enter the code shown in Listing 5-5. This is the
implementation of the shared worker.

Listing 5-5. The sharedWorker.js implementation
/* This file implements the shared web worker */
var clients=0;
onconnect=function(event) {
var port=event.ports[0];
clients++;
/* Attach the event listener */
port.addEventListener("message", function(event){
sendResponse(event.target, "Msg received: " + event.data);
}, false);
port.start();
sendResponse(port, "You are client # " + clients + "\n");
}