RT server and signalr

front/src/components/AppTopBar.vue

@@ -25,7 +25,7 @@ const auth = useAuthStore()
       <div id="navbarNav" class="collapse navbar-collapse">
         <ul class="navbar-nav me-auto">
           <li class="nav-item">
-            <RouterLink class="nav-link" active-class="active" to="/">Home</RouterLink>
+            <RouterLink class="nav-link" active-class="active" to="/test">Test</RouterLink>
           </li>
           <li class="nav-item">
             <RouterLink class="nav-link" active-class="active" to="/about">About</RouterLink>

front/src/router/index.ts

@@ -11,6 +11,12 @@ const router = createRouter({
       component: HomeView,
       meta: { requiresAuth: false },
     },
+    {
+      path: '/test',
+      name: 'test',
+      component: () => import('../views/TestView.vue'),
+      meta: { requiresAuth: false },
+    },
     {
       path: '/about',
       name: 'about',

front/src/services/signalr.ts

@@ -0,0 +1,46 @@
+import {
+  HubConnection,
+  HubConnectionBuilder,
+  HubConnectionState,
+} from "@microsoft/signalr";
+
+export class SignalRService {
+  private connection: HubConnection;
+
+  constructor(
+    hubUrl: string,
+  ) {
+    this.connection = new HubConnectionBuilder()
+      .withUrl(hubUrl)
+      .withAutomaticReconnect()
+      .build();
+  }
+
+  async start(): Promise<void> {
+    if (this.connection.state === HubConnectionState.Disconnected) {
+      await this.connection.start();
+    }
+  }
+
+  async stop(): Promise<void> {
+    if (this.connection.state !== HubConnectionState.Disconnected) {
+      await this.connection.stop();
+    }
+  }
+
+  on<T>(event: string, handler: (data: T) => void) {
+    this.connection.on(event, handler);
+  }
+
+  off(event: string) {
+    this.connection.off(event);
+  }
+
+  async invoke<T = void>(method: string, ...args: any[]): Promise<T> {
+    return await this.connection.invoke(method, ...args);
+  }
+
+  get state() {
+    return this.connection.state;
+  }
+}

front/src/services/testHubService.ts

@@ -0,0 +1,21 @@
+import {SignalRService} from "@/services/signalr.ts";
+
+
+const client = new SignalRService(
+  `http://localhost:5039/testhub`,
+);
+
+export const testHubService = {
+  async connect() {
+    await client.start();
+  },
+  /*
+  async joinBoard(boardId: string) {
+    await client.invoke("JoinBoard", boardId);
+  },
+*/
+
+  onTest(callback: (text: string) => void) {
+    client.on<string>("ReceiveText", callback);
+  }
+};

front/src/views/TestView.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import {onMounted, ref} from "vue";
+import {testHubService} from "@/services/testHubService.ts";
+
+const displayText = ref("");
+
+function addText(textToAdd: string): void {
+  displayText.value = displayText.value + textToAdd;
+}
+
+onMounted(async () => {
+  await testHubService.connect();
+
+  testHubService.onTest((text) => {
+    addText(text);
+  })
+})
+</script>
+
+<template>
+<h1>{{ displayText }}</h1>
+</template>