要使用Vue.js與SignalR構建響應式應用,首先需要安裝Vue.js和SignalR庫。然后可以按照以下步驟進行操作:
<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr"></script>
import { HubConnectionBuilder } from '@microsoft/signalr';
export default {
data() {
return {
messages: []
}
},
mounted() {
const connection = new HubConnectionBuilder()
.withUrl('https://example.com/signalr')
.build();
connection.start()
.then(() => console.log('SignalR Connected'))
.catch(err => console.error('SignalR Connection Error: ', err));
connection.on('ReceiveMessage', (message) => {
this.messages.push(message);
});
}
}
<template>
<div>
<ul>
<li v-for="message in messages" :key="message.id">{{ message.text }}</li>
</ul>
</div>
</template>
通過以上步驟,就可以使用Vue.js和SignalR構建一個響應式應用,實時展示服務器發送的消息。在實際應用中,可以根據具體需求進行修改和擴展。