Real-Time Applications with SignalR and Vue.js

Step 1:```csharp(C#)
using Microsoft.AspNetCore.SignalR; 
public class ChatHub: Hub
{
     public async Task SendMessage(string user, string message)
     {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
```
Step 2: Vue.js Frontend
1. Create a new Vue.js project:
```
vue create real-time-chat-app
```
2. Install the SignalR client library for Vue.js:
```
npm install @microsoft/signalr
```
3. Implement the chat functionality in your Vue.js component:
```Vue
<template>
<div>
<div>
<input v-model="user" placeholder="Username" />
<input	v-model="message"	@keyup.enter="sendMessage"	placeholder="Type	a message" />
</div>
<div>
<div v-for="(msg, index) in messages" :key="index">
{{ msg.user }}: {{ msg.text }}
</div>
</div>
</div>
</template>
<script>
import * as signalR from "@Microsoft/signalr";
export default { 
data() { return {
user: "",
message: "",
messages: [],
};
},
created() {
this. Connection = new signalR.HubConnectionBuilder()
.withUrl("/chatHub")
.build();


this.connection.on("ReceiveMessage", (user, message) => { this.messages.push({ user, text: message });
});
this.connection.start().catch((err) => console. Error(err));
},
methods: { sendMessage() {
this.connection.invoke("SendMessage", this.user, this. Message); this. Message = "";
},
},
};
</script>
```
Step 3: Running the Application
1. Start the SignalR server:
```
dotnet run
```
2. Start the Vue.js development server:
```
npm run serve
```