A Register handles the `onSelectionChanged` events and sends the selected cell value to OBS via OBS WebSockets js

OBS WebSocket Sample (1).EXCEL.yaml

name: OBS WebSocket Sample (1)
description: >-
  A Register handles the `onSelectionChanged` events and sends the selected cell
  value to OBS via OBS WebSockets js
host: EXCEL
api_set: {}
script:
  content: "$(\"#register-event-handlers\").click(() => tryCatch(registerEventHandlers));\n\nasync function registerEventHandlers() {\n  await Excel.run(async (context) => {\n    // Add a selection changed event handler for the workbook.\n    context.workbook.worksheets.onSelectionChanged.add(onWorksheetSelectionChange);\n    console.log(\"Change the seleceted cell\");\n    await context.sync();\n  });\n}\n\nasync function onWorksheetSelectionChange(args: Excel.WorksheetSelectionChangedEventArgs) {\n  await Excel.run(async (context) => {\n    //get selected cell value\n    let myWorkbook = context.workbook;\n    let activeCell = myWorkbook.getActiveCell();\n    activeCell.load(\"values\");\n    await context.sync();\n    let cellText = activeCell.values.toString();\n    console.log(\"The\_active\_cell\_is\_\" + cellText);\n\n    //connect to OBS Websocket localhost\n    //Get websocket connection info\n    //Enter the websocketIP address\n    const websocketIP = document.getElementById(\"IP\").value;\n\n    //Enter the OBS websocket port number\n    const websocketPort = document.getElementById(\"Port\").value;\n\n    //Enter the OBS websocket server password\n    const websocketPassword = document.getElementById(\"PW\").value;\n\n    var obs = new OBSWebSocket();\n    console.log(`ws://${websocketIP}:${websocketPort}`);\n    // connect to OBS websocket\n    try {\n      const { obsWebSocketVersion, negotiatedRpcVersion } = await obs.connect(\n        `ws://${websocketIP}:${websocketPort}`,\n        websocketPassword,\n        {\n          rpcVersion: 1\n        }\n      );\n    console.log(`Connected to server ${obsWebSocketVersion} (using RPC ${negotiatedRpcVersion})`);\n    } catch (error) {\n      console.error(\"Failed to connect\", error.code, error.message);\n    }\n    obs.on(\"error\", (err) => {\n      console.error(\"Socket error:\", err);\n    });\n\n    //set OBS Scene\n    await obs.call(\"SetCurrentProgramScene\", { sceneName: document.getElementById(\"Scene\").value });\n\n    //set OBS source text\n    await obs.call(\n      \"SetInputSettings\",\n      {\n        inputName: document.getElementById(\"Source\").value,\n        inputSettings: {\n          text: cellText\n        }\n      },\n      (err, data) => {\n        /* Error message and data. */\n        // console.log('Using call SetInputSettings:', err, data);\n      }\n    );\n    await obs.disconnect();\n  });\n}\n\n/** Default helper for invoking an action and handling errors. */\nasync function tryCatch(callback) {\n  try {\n    await callback();\n  } catch (error) {\n    // Note: In a production add-in, you'd want to notify the user through your add-in's UI.\n    console.error(error);\n  }\n}\n"
  language: typescript
template:
  content: "<section class=\"ms-font-m\">\n\t<p>This sample shows how to use the Excel API <code>onSelectionChanged</code> event and the OBS WebSocket js API to display an Excel cell's value\n\t\tin OBS.</p>\n</section>\n\n<section class=\"setup ms-font-m\">\n\t<h3>OBS WebSocket Server Settings</h3>\n\t<span class=\"ms-Button-label\">Enter WebSocket Server IP Address</span>\n\t<Input id=\"IP\" class=\"ms-Button\" value=\"localhost\"></Input>\n\t<span class=\"ms-Button-label\">Enter WebSocket Server Port</span><br>\n\t<Input id=\"Port\" class=\"ms-Button\" value=\"4455\"></Input>\n\t<span class=\"ms-Button-label\">Enter WebSocket Server Password</span><br>\n\t<Input type=\"password\" id=\"PW\" class=\"ms-Button\"></Input>\n\t<h3>OBS WebSocket Server Settings</h3>\n\t<span class=\"ms-Button-label\">Enter OBS Scene Name</span>\n\t<Input id=\"Scene\" class=\"ms-Button\" value=\"Example Scene\"></Input>\n\t<span class=\"ms-Button-label\">Enter OBS Source Name</span>\n\t<Input id=\"Source\" class=\"ms-Button\" value=\"Example Source\"></Input>\n\t<button id=\"register-event-handlers\" class=\"ms-Button\">\n\t      <span class=\"ms-Button-label\">Connect to OBS WebSocket Server</span>\n    </button>\n\t<p>The <code>onSelectionChanged</code> events being listened for are:</p>\n\t<ul>\n\t\t<li><code>Worksheet</code></li>\n\t</ul>\n</section>\n\n<section class=\"samples ms-font-m\">\n\t<h3>Try it out</h3>\n</section>\n\n<section class=\"samples ms-font-m\">\n\t<p>The console will log the values reported by the different <code>onSelectionChanged</code> events. Change the\n\t\tcell in the worksheet to see the results.</p>\n</section>"
  language: html
style:
  content: |
    section.samples {
        margin-top: 20px;
    }

    section.samples .ms-Button, section.setup .ms-Button {
        display: block;
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }
  language: css
libraries: |-
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js

  office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
  office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css

  core-js@2.4.1/client/core.min.js
  @types/core-js

  jquery@3.1.1
  @types/jquery@3.3.1

  obs-websocket-js

OBS WebSocket Sample.EXCEL.yaml

name: OBS WebSocket Sample
description: >-
  A Register handles the `onSelectionChanged` events and sends the selected cell
  value to OBS via OBS WebSockets js
host: EXCEL
api_set: {}
script:
  content: "$(\"#register-event-handlers\").click(() => tryCatch(registerEventHandlers));\n\nasync function registerEventHandlers() {\n  await Excel.run(async (context) => {\n    // Add a selection changed event handler for the workbook.\n    context.workbook.worksheets.onSelectionChanged.add(onWorksheetSelectionChange);\n    // console.log(\"Change the seleceted cell\");\n    await context.sync();\n  });\n}\n\nasync function onWorksheetSelectionChange(args: Excel.WorksheetSelectionChangedEventArgs) {\n  await Excel.run(async (context) => {\n    //get selected cell value\n    let myWorkbook = context.workbook;\n    let activeCell = myWorkbook.getActiveCell();\n    activeCell.load(\"values\");\n    await context.sync();\n    let cellText = activeCell.values.toString();\n    //console.log(\"The\_active\_cell\_is\_\" + cellText);\n\n    //connect to OBS Websocket localhost\n    //Get websocket connection info\n    //Enter the websocketIP address\n    const websocketIP = document.getElementById(\"IP\").value;\n\n    //Enter the OBS websocket port number\n    const websocketPort = document.getElementById(\"Port\").value;\n\n    //Enter the OBS websocket server password\n    const websocketPassword = document.getElementById(\"PW\").value;\n\n    var obs = new OBSWebSocket();\n    // console.log(`ws://${websocketIP}:${websocketPort}`);\n    // connect to OBS websocket\n    try {\n      const { obsWebSocketVersion, negotiatedRpcVersion } = await obs.connect(\n        `ws://${websocketIP}:${websocketPort}`,\n        websocketPassword,\n        {\n          rpcVersion: 1\n        }\n      );\n      // console.log(`Connected to server ${obsWebSocketVersion} (using RPC ${negotiatedRpcVersion})`);\n    } catch (error) {\n      console.error(\"Failed to connect\", error.code, error.message);\n    }\n    obs.on(\"error\", (err) => {\n      console.error(\"Socket error:\", err);\n    });\n\n    //set OBS Scene\n    await obs.call(\"SetCurrentProgramScene\", { sceneName: document.getElementById(\"Scene\").value });\n\n    //set OBS source text\n    await obs.call(\n      \"SetInputSettings\",\n      {\n        inputName: document.getElementById(\"Source\").value,\n        inputSettings: {\n          text: cellText\n        }\n      },\n      (err, data) => {\n        /* Error message and data. */\n        // console.log('Using call SetInputSettings:', err, data);\n      }\n    );\n    /*     const { currentProgramSceneName } = await obs.call(\"GetCurrentProgramScene\");\n    console.log(currentProgramSceneName);*/\n    await obs.disconnect();\n  });\n}\n\n/** Default helper for invoking an action and handling errors. */\nasync function tryCatch(callback) {\n  try {\n    await callback();\n  } catch (error) {\n    // Note: In a production add-in, you'd want to notify the user through your add-in's UI.\n    console.error(error);\n  }\n}\n"
  language: typescript
template:
  content: "<section class=\"ms-font-m\">\n\t<p>This sample shows how to use the Excel API <code>onSelectionChanged</code> event and the OBS WebSocket js API to display an Excel cell's value\n\t\tin OBS.</p>\n</section>\n\n<section class=\"setup ms-font-m\">\n\t<h3>OBS WebSocket Server Settings</h3>\n\t<span class=\"ms-Button-label\">Enter WebSocket Server IP Address</span>\n\t<Input id=\"IP\" class=\"ms-Button\" value=\"localhost\"></Input>\n\t<span class=\"ms-Button-label\">Enter WebSocket Server Port</span><br>\n\t<Input id=\"Port\" class=\"ms-Button\" value=\"4455\"></Input>\n\t<span class=\"ms-Button-label\">Enter WebSocket Server Password</span><br>\n\t<Input type=\"password\" id=\"PW\" class=\"ms-Button\"></Input>\n\t<h3>OBS WebSocket Server Settings</h3>\n\t<span class=\"ms-Button-label\">Enter OBS Scene Name</span>\n\t<Input id=\"Scene\" class=\"ms-Button\" value=\"Example Scene\"></Input>\n\t<span class=\"ms-Button-label\">Enter OBS Source Name</span>\n\t<Input id=\"Source\" class=\"ms-Button\" value=\"Example Source\"></Input>\n\t<button id=\"register-event-handlers\" class=\"ms-Button\">\n\t      <span class=\"ms-Button-label\">Connect to OBS WebSocket Server</span>\n    </button>\n\t<p>The <code>onSelectionChanged</code> events being listened for are:</p>\n\t<ul>\n\t\t<li><code>Worksheet</code></li>\n\t</ul>\n</section>\n\n<section class=\"samples ms-font-m\">\n\t<h3>Try it out</h3>\n</section>\n\n<section class=\"samples ms-font-m\">\n\t<p>The console will log the values reported by the different <code>onSelectionChanged</code> events. Change the\n\t\tcell in the worksheet to see the results.</p>\n</section>"
  language: html
style:
  content: |
    section.samples {
        margin-top: 20px;
    }

    section.samples .ms-Button, section.setup .ms-Button {
        display: block;
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }
  language: css
libraries: |-
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js

  office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
  office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css

  core-js@2.4.1/client/core.min.js
  @types/core-js

  jquery@3.1.1
  @types/jquery@3.3.1

  obs-websocket-js

corrected HTML form