add websocket support

app/components/input.tsx

@@ -0,0 +1,29 @@
+import { SyntheticEvent } from 'react';
+
+type InputEvent = (event: SyntheticEvent<HTMLInputElement>) => void;
+
+type input = {
+  name: string;
+  value: string;
+  onChange: InputEvent;
+};
+
+export default function Input({ name, value, onChange }: input): JSX.Element {
+  return (
+    <div className='px-4'>
+      <label className='block text-sm font-medium leading-6 text-gray-900'>
+        Websocket Url
+      </label>
+      <div className='relative mt-2 rounded-md shadow-sm'>
+        <input
+          name={name}
+          type='text'
+          defaultValue={value}
+          onChange={onChange}
+          className='block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
+          placeholder='wss://'
+        />
+      </div>
+    </div>
+  );
+}

app/components/socket.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { Websocket } from '../lib/websocket/socket';
+
+type Url = { url: string };
+
+export default function Socket({ url }: Url): React.JSX.Element {
+  const [socket, setSocket] = useState<Websocket>();
+
+  const cleanup = () => {
+    try {
+      console.log('clean up lose connection');
+      console.log(socket);
+
+      socket?.Stop(1000);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const start = () => {
+    try {
+      if (!socket?.Alive()) {
+        socket?.Start(url);
+        setSocket(socket);
+      } else socket?.Stop(1000);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  useEffect(() => {
+    setSocket(new Websocket());
+  }, []);
+
+  return (
+    <div>
+      <button
+        className='border border-blue-600 rounded-md px-4 py-2 my-4'
+        onClick={() => start()}
+      >
+        {socket?.Alive() ? 'Disconnect' : 'Connect'}
+      </button>
+    </div>
+  );
+}

app/lib/websocket/socket.ts

@@ -0,0 +1,28 @@
+import { DEAD, ISocket, LIVE } from '@/app/model/websocket';
+export class Websocket implements ISocket {
+  private socket?: WebSocket;
+
+  Alive(): boolean {
+    return this.socket != null && this.socket.readyState == this.socket.OPEN;
+  }
+
+  Start(url: string): void {
+    if (this.Alive()) throw Error(LIVE);
+
+    this.socket = new WebSocket(url, ['ocpp1.6']);
+    console.log('Websocket connection was successful');
+  }
+
+  Stop(code?: number): void {
+    if (!this.Alive()) throw new Error(DEAD);
+
+    console.log('closing socket');
+    this.socket!.close(code ?? 1000);
+  }
+
+  Send(message: string) {
+    if (!this.Alive()) throw new Error(DEAD);
+
+    this.socket!.send(message);
+  }
+}

app/model/websocket.ts

@@ -0,0 +1,11 @@
+const LIVE = 'web socket client is already initialized';
+const DEAD = 'web socket client is dead, open a new connection';
+
+interface ISocket {
+  Alive(): boolean;
+  Start(url: string, event: CloseEvent): void;
+  Stop(code: number): void;
+}
+
+export type { ISocket };
+export { LIVE, DEAD };

app/page.tsx

@@ -1,5 +1,27 @@
 'use client';
 
+import { SyntheticEvent, useState } from 'react';
+import Websocket from './components/socket';
+import Input from './components/input';
+
 export default function Home() {
-  return <div className='bg-red-600 text-center'>Hello world</div>;
+  const [url, setUrl] = useState(
+    'ws://localhost:8080/ocpp/JwNpTpPxPm/CHR202305102'
+  );
+
+  const onChange = (event: SyntheticEvent<HTMLInputElement>) => {
+    console.log(event.currentTarget.value);
+
+    setUrl(event.currentTarget.value);
+  };
+
+  return (
+    <div className='pt-6 text-center'>
+      <h1 className='text-4xl'>OCPP 1.6-J EVSE Test tool</h1>
+      <div className='w-1/3 mx-auto mt-8'>
+        <Input name='url' value={url} onChange={onChange} />
+        <Websocket url={url} />
+      </div>
+    </div>
+  );
 }

package.json

@@ -9,18 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.2.3",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.3"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/ws": "^8.5.10",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.3"
+    "typescript": "^5"
   }
 }