I have a VF page which is part of a Force.com Site. I refer this page using Canvas app. Now I'm trying establish a publish/subscribe model between the VF page in Salesforce and the Canvas app which show the Site page. The problem I'm having is a Javascript error. I don't know what script files I need to add to the VF page to initiate this communication. Attached my code along with this post. I get "Uncaught TypeError: Cannot call method 'publish' of undefined ". I'm showing the Canvas app(Site page) in a service console and the side panel as a another VF page. I'm trying to establish a connection between the VF Page shown by Canvas app and the right side panel Custom VF page?

Site VF page (Shown by the canvas app)

Sfdc.canvas(function() { var sr = {!sJson}; var key = "{!encodedSig}"; });
<script>
(function(global) {
var module = function() { function subscribe(event) { Sfdc.canvas.parent.subscribe(event) } function unsubscribe(event) { Sfdc.canvas.parent.unsubscribe(event) } function publish(event) { Sfdc.canvas.parent.publish(event) } function resize(size, target) { Sfdc.canvas.parent.resize(size, target) } return{subscribe:subscribe, unsubscribe:unsubscribe, publish:publish, resize:resize} }(); global.Sfdc = global.Sfdc || {}; global.Sfdc.canvas = global.Sfdc.canvas || {}; global.Sfdc.canvas.controller = module })(this);

</script>
var sr = "{!sJson}"; Sfdc.canvas(function() { console.log("in the call "); Sfdc.canvas.controller.subscribe(sr.client, {name : 'demo.testAction1', onData : function (data) { console.log("event received... "); console.log("published message received " + JSON.stringify(data));}} );
First name:
Last name:

Right Frame VF page:

<script type="text/javascript" src="{!URLFOR($Resource.CanvasJavascript,'/CanvasScripts/js/canvas-all.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.CanvasJavascript,'/CanvasScripts/js/canvas.js')}"></script>
<script type="text/javascript" src="{!$Resource.Json2}"></script>






<script>

    function testpayload (msg) {

     Sfdc.canvas.controller.publish({
         name: 'pnc.testAction',
         payload : {message:msg},
         target : {canvas : 'app1'}
         });

     };
var sr = "{!sJson}";

Sfdc.canvas(function() {
console.log("in the call sidebar ");
Sfdc.canvas.controller.subscribe(sr.client,
{name : 'demo.testAction1', onData : function (data) {
  console.log("event received sidebar... ");
  console.log("published message received sidebar" + JSON.stringify(data));}}
);
<apex:form >

    <apex:pageBlock title="Question" helpTitle="Custom Help Title" helpUrl="http://test/" mode="edit">
        <apex:pageBlockButtons >
            <apex:commandButton action="{!saveQuestion}" value="Save"/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection title="Group-1 Questions">
          <apex:repeat value="{!$ObjectType.Question_test__c.FieldSets.Group1}" var="field">
                <apex:inputField value="{!quest[field]}" />
                <br/>
          </apex:repeat>
        </apex:pageBlockSection>
        <apex:pageBlockSection title="Group-2 Questions">
          <apex:repeat value="{!$ObjectType.Question_test__c.FieldSets.Group2}" var="field">
                <apex:inputField value="{!quest[field]}" />
                <br/>
          </apex:repeat>
        </apex:pageBlockSection>
    </apex:pageBlock>

    <apex:commandLink onclick="testpayload('Open')" value="Open" reRender="TestPanel"/><br/>
    <apex:commandLink onclick="testpayload('Closed')" value="Closed" reRender="TestPanel"/>
    <apex:outputPanel id="TestPanel">
    </apex:outputPanel>

</apex:form>
Can anyone help me how to get the communication going between the Canvas app's VF page and the VF page on the right frame?