feat(new tool): WebSocket Tester

Fix #928

src/tools/index.ts

@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as websocketTester } from './websocket-tester';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -160,7 +161,15 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+    components: [
+      ipv4SubnetCalculator,
+      ipv4AddressConverter,
+      ipv4RangeExpander,
+      macAddressLookup,
+      macAddressGenerator,
+      ipv6UlaGenerator,
+      websocketTester,
+    ],
   },
   {
     name: 'Math',

src/tools/websocket-tester/index.ts

@@ -0,0 +1,12 @@
+import { Sock } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Websocket tester',
+  path: '/websocket-tester',
+  description: 'Allows to test WebSocket connections',
+  keywords: ['websocket', 'ws', 'tester'],
+  component: () => import('./websocket-tester.vue'),
+  icon: Sock,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/websocket-tester/w-websocket-client.d.ts

@@ -0,0 +1,14 @@
+declare module "w-websocket-client/dist/w-websocket-client.umd.js" {
+    export default class WSC {
+        constructor(options: {
+            url: string
+            token: string
+            open?: () => void
+            close?: () => void
+            message?: (data: any) => void
+            error?: (err: any) => void
+          });
+        
+        send(data: any): void
+    }
+}

src/tools/websocket-tester/websocket-tester.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import WSC from 'w-websocket-client/dist/w-websocket-client.umd.js';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
+
+const url = useQueryParamOrStorage({ name: 'url', storageName: 'ws-tester:url', defaultValue: 'ws://host:port' });
+const token = useQueryParamOrStorage({ name: 'token', storageName: 'ws-tester:token', defaultValue: '*' });
+const logs = ref<string[]>([]);
+const message = ref('');
+const connected = ref(false);
+let wsc: WSC;
+
+function send() {
+  logs.value.push(`Sent: ${message.value}`);
+  wsc.send(message.value);
+}
+function connect() {
+  wsc = new WSC({
+    url: url.value,
+    token: token.value,
+    open() {
+      logs.value.push('WebSocket Connection opened');
+      connected.value = true;
+    },
+    close() {
+      connected.value = false;
+      logs.value.push('WebSocket Connection closed');
+    },
+    message(data: any) {
+      logs.value.push(`Received: ${JSON.stringify(data)}`);
+    },
+    error(err: any) {
+      logs.value.push(`Error: ${err}`);
+    },
+  });
+}
+</script>
+
+<template>
+  <div>
+    <c-card title="Connection">
+      <c-input-text
+        v-model:value="url"
+        placeholder="Enter url of WebSocket server here"
+        label="Url"
+        raw-text
+      />
+      <c-input-text
+        v-model:value="token"
+        placeholder="Enter token here"
+        label="Token"
+        raw-text
+      />
+      <div v-if="!connected" mt-5 flex justify-center>
+        <c-button @click="connect()">
+          Connect
+        </c-button>
+      </div>
+    </c-card>
+    <c-card v-if="connected" title="Send">
+      <c-input-text
+        v-model:value="message"
+        placeholder="Enter message to send here"
+        label="Message"
+        rows="5"
+        autosize
+        raw-text
+        multiline
+        monospace
+      />
+      <div mt-5 flex justify-center>
+        <c-button @click="send()">
+          Send
+        </c-button>
+      </div>
+    </c-card>
+    <c-card title="Logs">
+      <ul>
+        <li v-for="(line, index) in logs" :key="index">
+          {{ line }}
+        </li>
+      </ul>
+    </c-card>
+  </div>
+</template>