VUE SignalR W/ JQuery -Projekt - SignalR -Ereignisse funktionieren nur auf manueller Aktualisierung im Dev -Server
Posted: 10 Apr 2025, 13:19
Ich habe ein Basar -Problem mit meinem Projekt im Zusammenhang mit den SignalR -Ereignissen und JQuery. Für den Anfang ist mein Client -Projekt mit Vue 3 (W/Komposition -API), Vite, Pinia, SignalR W/JQuery und TypeScript erstellt. Dies stammt aus der Datei von SignalRStore.ts < /code>. Wenn ich es von npm run serve ausführe, repariert die Aktualisierung nicht und der Fehler bleibt bestehen. Ich bin mir nicht sicher, ob es sich um ein Initialisierungsauftragsproblem oder ein Pinia -Statusproblem oder ein JQuery -Referenzproblem usw. handelt. Ich bin mir bewusst, dass der $ nicht definiert ist. eine Geschäft Aktion. Ich bin mir nicht sicher, ob dies der richtige Weg ist, aber es macht für mich Sinn.
SignalRStore.ts
app.vue
Code: Select all
MyTitle
Code: Select all
// SignalRStore.ts
import { defineStore } from 'pinia'
// eslint-disable-next-line @typescript-eslint/no-explicit-any
declare const $: any
export const useSignalRStore = defineStore('SignalRStore', {
state: () => {
return {
isConnected: false,
}
},
actions: {
async setConnected(value: boolean) {
this.isConnected = value
},
async startSignalR() {
const signalRConnection = $.hubConnection({ ** backend url **})
signalRConnection.reconnecting(() => {
this.isConnected = false
console.log('SignalR Reconnecting...')
})
signalRConnection.reconnected(() => {
this.isConnected = true
console.log('SignalR Reconnected')
})
signalRConnection.disconnected(() => {
console.log('SignalR Disconnect: ' + $.hubConnection.lastError)
this.isConnected = false
})
signalRConnection.stateChanged((state: object) => {
console.log('state changed: ' + JSON.stringify(state))
this.isConnected = false
})
signalRConnection
.start({ withCredentials: false })
.done(() => {
this.isConnected = true
console.log('Now connected, connection ID=')
})
.fail(() => {
this.isConnected = false
console.log('Could not connect')
})
},
},
})
Code: Select all
// App.vue
import { onBeforeMount } from 'vue'
import { RouterView } from 'vue-router'
import { useSignalRStore } from './stores/SignalRStore'
const signalRStore = useSignalRStore()
signalRStore.startSignalR()