Add MVP websocket connectrion

src/App.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import WallboxConfig from './lib/WallboxConfig.svelte'
-  import ConnectButton from './lib/ConnectButton.svelte'
+  import WallboxSimulator from './lib/wallbox-simulator/WallboxSimulator.svelte'
 
   let webSocketUrl: string;
 </script>
@@ -11,7 +11,7 @@
     <WallboxConfig bind:connectionUrl={webSocketUrl} />
   </p>
   <p>
-    <ConnectButton bind:connectionUrl={webSocketUrl}/>
+    <WallboxSimulator bind:webSocketUrl={webSocketUrl} />
   </p>
 </main>
 

src/lib/ConnectButton.svelte → src/lib/wallbox-simulator/ConnectButton.svelte

@@ -1,8 +1,24 @@
 <script lang="ts">
+  import { connectStation, disconnectStation } from './websocket';
+
   export let connectionUrl: string = 'not provided';
+  export let webSocket: WebSocket;
 
   let connectionState: 'disconnected' | 'connecting' | 'connected' | 'error' = 'disconnected';
   let buttonText: string;
+  let errorMessage: string;
+
+  const setConnectionState = (connected: boolean) => {
+    connected ? connectionState = 'connected' : connectionState = 'disconnected';
+  }
+
+  const setErrorMessage = (message: string) => {
+    errorMessage = message;
+  }
+
+  const addLogMessage = (message: string) =>  {
+    console.log(message);
+  }
 
   $: {
     switch (connectionState) {
@@ -23,11 +39,15 @@
   const connect = () => {
     if (connectionState === 'disconnected') {
       connectionState = 'connecting';
-      alert(`Connecting to: ${connectionUrl}`)
-    } else if (connectionState === 'connecting') {
-      connectionState = 'connected';
-    } else {
-      connectionState = 'disconnected';
+      webSocket = connectStation(
+        webSocket,
+        connectionUrl,
+        setConnectionState,
+        setErrorMessage,
+        addLogMessage
+      );
+    } else if (connectionState === 'connected') {
+      webSocket = disconnectStation(webSocket, setConnectionState);
     }
   }
 </script>

src/lib/wallbox-simulator/WallboxSimulator.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import ConnectButton from './ConnectButton.svelte'
+
+  export let webSocketUrl = 'wss://connection/string...'
+  let webSocket: WebSocket;
+</script>
+
+<p>
+  <ConnectButton bind:connectionUrl={webSocketUrl} bind:webSocket={webSocket}/>
+</p>

src/lib/wallbox-simulator/ocpp-messages/bootNotification.ts

@@ -0,0 +1,37 @@
+export function BootNotification(websocket) {
+  if (!websocket || !websocket.send) {
+    console.warn(
+      "No websocket connection found for sending BootNotification... aborting."
+    );
+    return;
+  }
+
+  var BN = JSON.stringify([
+    2,
+    randomMessageId(),
+    "BootNotification",
+    {
+      chargingStation: {
+        serialNumber: "SOME-serial-NUMBER-123",
+        model: "MGWB Fake",
+        vendorName: "Unicorn GmbH",
+        firmwareVersion: "1.2.3",
+      },
+      reason: "PowerUp",
+    },
+  ]);
+
+  console.log("Sending BootNotification.");
+  websocket.send(BN);
+  console.log("BootNotification sent!");
+}
+
+function randomMessageId() {
+  const allowedChars =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let id = "";
+  for (var i = 0; i < 36; i++) {
+    id += allowedChars.charAt(Math.floor(Math.random() * allowedChars.length));
+  }
+  return id;
+}

src/lib/wallbox-simulator/websocket.ts

@@ -0,0 +1,64 @@
+import { BootNotification } from "./ocpp-messages/bootNotification";
+
+export function disconnectStation(websocket, setConnectionState) {
+  if (websocket) {
+    websocket.close(3001);
+    setConnectionState(false);
+    console.log("Disconnected!");
+  } else {
+    console.log("Can't disconnect - no websocket connection found...");
+  }
+  return websocket;
+}
+
+export function connectStation(
+  websocket,
+  connectionString,
+  setConnectionState,
+  setErrorMessage,
+  addLogMessage
+) {
+  setErrorMessage("");
+
+  if (websocket) {
+    websocket.close(3001);
+    setConnectionState(false);
+  }
+  websocket = new WebSocket(connectionString, ["ocpp2.0"]);
+
+  websocket.onopen = function (authorizationData) {
+    setConnectionState(true);
+
+    addLogMessage({
+      source: "CS simulator",
+      payload: "Websocket connection opened successfully!",
+    });
+    sessionStorage.setItem("LastAction", "BootNotification");
+    BootNotification(websocket);
+  };
+
+  websocket.onerror = function (errorEvent) {
+    if (errorEvent.target.readyState === 3) {
+      setErrorMessage("The connection was closed or could not be established.");
+      addLogMessage({
+        source: "CS simulator",
+        payload: "The connection was closed or could not be established.",
+      });
+    }
+    setConnectionState(false);
+  };
+
+  websocket.onclose = function () {
+    addLogMessage({
+      source: "CS simulator",
+      payload: "Websocket connection closed.",
+    });
+    setConnectionState(false);
+  };
+
+  websocket.onmessage = function (event) {
+    addLogMessage({ source: "CPO backend", payload: event.data });
+  };
+
+  return websocket;
+}