Connect from frontend

Makefile

@@ -7,7 +7,7 @@ DOCKER_CMD:=docker run --rm -v $(CARD_TOOLS):/card-tools:ro -v $(PWD):/usr/src/$
 setup := package.json package-lock.json webpack.config.js
 
 JS := $(wildcard js/*.js)
-PY := $(wildcard custom_components/browser_mod/*.py)
+PY := $(wildcard custom_components/browser_mod/*)
 OUTPUT := ../../config/custom_components/browser_mod/__init__.py
 
 build: $(setup) custom_components/browser_mod/browser_mod.js $(OUTPUT)

custom_components/browser_mod/__init__.py

@@ -1,10 +1,13 @@
 import logging
+import voluptuous as vol
+
+from homeassistant.components.websocket_api import websocket_command, result_message, async_register_command
 
 from .mod_view import setup_view
 
 REQUIREMENTS = ["aiofiles"]
 
-FRONTEND_SCRIPT_URL '/browser_mod.js'
+FRONTEND_SCRIPT_URL = '/browser_mod.js'
 
 _LOGGER = logging.getLogger(__name__)
 
@@ -14,5 +17,17 @@ async def async_setup(hass, config):
     setup_view(hass, FRONTEND_SCRIPT_URL)
     _LOGGER.error(f"Registered frontend script")
 
+    async_register_command(hass, handle_connect)
 
     return True
+
+
+
+@websocket_command({
+    vol.Required('type'): 'browser_mod/connect',
+    vol.Required('deviceID'): str,
+})
+def handle_connect(hass, connection, msg):
+    _LOGGER.error(f"Got connection {msg}")
+
+    connection.send_message(result_message(msg['id']))

custom_components/browser_mod/browser_mod.js

@@ -1 +1 @@
-!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){alert("Hello!")}]);
+!function(e){var o={};function n(t){if(o[t])return o[t].exports;var r=o[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=o,n.d=function(e,o,t){n.o(e,o)||Object.defineProperty(e,o,{enumerable:!0,get:t})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,o){if(1&o&&(e=n(e)),8&o)return e;if(4&o&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(n.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&o&&"string"!=typeof e)for(var r in e)n.d(t,r,function(o){return e[o]}.bind(null,r));return t},n.n=function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(o,"a",o),o},n.o=function(e,o){return Object.prototype.hasOwnProperty.call(e,o)},n.p="",n(n.s=0)}([function(e,o,n){"use strict";n.r(o);let t=function(){if(window.fully&&"function"==typeof fully.getDeviceId)return fully.getDeviceId();if(!localStorage["lovelace-player-device-id"]){const e=()=>Math.floor(1e5*(1+Math.random())).toString(16).substring(1);localStorage["lovelace-player-device-id"]=`${e()}${e()}-${e()}${e()}`}return localStorage["lovelace-player-device-id"]}();window.browser_mod=new class{constructor(){window.hassConnection.then(e=>this.connect(e.conn))}connect(e){console.log("Connection opened. Connecting to browser_mod"),this.connection=e.subscribeMessage(e=>this.callback(e),{type:"browser_mod/connect",deviceID:t}),console.log("Connected"),console.log(this.connection)}callback(e){console.log("Got ws message"),console.log(e)}}}]);

js/main.js

@@ -1,2 +1,26 @@
-alert("Hello!")
+import {deviceID} from "/card-tools/deviceId"
+class BrowserMod {
+
+  constructor() {
+    window.hassConnection.then((conn) => this.connect(conn.conn));
+  }
+
+  connect(conn) {
+    console.log("Connection opened. Connecting to browser_mod");
+    this.connection = conn.subscribeMessage((msg) => this.callback(msg), {
+      type: 'browser_mod/connect',
+      deviceID: deviceID,
+      });
+    console.log("Connected");
+    console.log(this.connection);
+  }
+
+  callback(msg) {
+    console.log("Got ws message");
+    console.log(msg);
+  }
+
+}
+
+window.browser_mod = new BrowserMod();