As we did earlier, in order to make these events visible to the user, we must not only add client code to the template, views/noteview.hbs; we need a couple of small changes to the template:

<div class="container-fluid">
    <div class="row"><div class="col-xs-12">
        {{#if note}}<h3 id="notetitle">{{ note.title }}</h3>{{/if}}
        {{#if note}}<div id="notebody">{{ note.body }}</div>{{/if}}
        <p>Key: {{ notekey }}</p>
    </div></div>
    {{#if user }}
    {{#if notekey }}
        <div class="row"><div class="col-xs-12">
        <div class="btn-group">
            <a class="btn btn-outline-dark" 
                href="/notes/destroy?key={{notekey}}" 
                role="button">Delete</a>
            <a cl e template, views/noteview.hb 
 ass="btn btn-outline-dark" 
                href="/notes/edit?key={{notekey}}" 
                role="button">Edit</a>
        </div>
        </div></div>
    {{/if}}
    {{/if}}
</div>

{{> footerjs}}

{{#if notekey }}
<script src="/socket.io/socket.io.js"></script> 
<script> 
$(document).ready(function () { 
    io('/view').on('noteupdate', function(note) { 
        if (note.key === "{{ notekey }}") { 
            $('h3#notetitle').empty(); 
            $('h3#notetitle').text(note.title); 
            $('#notebody').empty(); 
            $('#notebody').text(note.body); 
        } 
    }); 
    io('/view').on('notedestroy', function(data) { 
        if (data.key === "{{ notekey }}") { 
            window.location.href = "/"; 
        } 
    }); 
}); 
</script> 
{{/if}}

We connect to the /view namespace where the messages are sent. As noteupdate or notedestroy messages arrive, we check the key to see whether it matches the key for the note being displayed. 

A technique is used here that's important to understand. We have mixed JavaScript executed on the server, with JavaScript executed in the browser. We must compare the notekey received by the client code against the notekey for the note being viewed by this page. The latter notekey value is known on the server, while the former is known in the client.

Remember that code within the {{ .. }} delimiters is interpreted by the Handlebars template engine on the server. Consider the following:

if (note.key === "{{ notekey }}") { 
  .. 
} 

This comparison is between the notekey value in the browser, which arrived inside the message from the server, and the notekey variable on the server. That variable contains the key of the note being displayed. Therefore, in this case, we are able to ensure these code snippets are executed only for the note being shown on the screen.

For the noteupdate event, we take the new note content and display it on the screen. For this to work, we had to add id= attributes to the HTML so we could use jQuery selectors in manipulating the DOM.

For the notedestroy event, we simply redirect the browser window back to the home page. The note being viewed has been deleted, and there's no point the user continuing to look at a note that no longer exists.