C#使用SignalR实现与前端vue实时通信

C#后端

1、安装SignalR包

首先确保项目中已安装 SignalR 相关包。可以通过 NuGet 包管理器安装:

cs 复制代码
dotnet add package Microsoft.AspNetCore.SignalR

2、配置SignalR

在 Startup.cs 文件中配置 SignalR

cs 复制代码
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.SignalR;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSignalR();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseRouting();

        app.UseEndpoints(endpoints =>
                         {
                             endpoints.MapHub<ChatHub>("/chatHub");
                         });
    }
}

3、创建Hub类

创建一个msgHub类来处理客户端的连接和消息传递

cs 复制代码
using Microsoft.AspNetCore.SignalR;

public class ChatHub : Hub
{
    public async Task SendMessage(string user, string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }




 /// <summary>
 /// 将客户端加入指定分组
 /// </summary>
 /// <param name="groupName"></param>
 /// <returns></returns>
 public async Task JoinGroup(string groupName)
 {
     // 将客户端加入指定分组
     await Groups.AddToGroupAsync(Context.ConnectionId, groupName);
    

 }
 /// <summary>
 /// 将客户端从指定分组移出
 /// </summary>
 /// <param name="groupName"></param>
 /// <returns></returns>
 public async Task LeaveGroup(string groupName)
 {
     await Groups.RemoveFromGroupAsync(Context.ConnectionId, groupName);
    

 }
 /// <summary>
 ///  分组发送消息
 /// </summary>
 /// <param name="user"></param>
 /// <param name="message"></param>
 /// <returns></returns>
 public async Task SendMessageToOneGroup( string user, object message)
 {
     await Clients.Group("One").SendAsync(HubsConstant.DisplayReceive, user, message);
 }
 
    
}

客户端Vue连接

1、安装依赖

确保你的 Vue.js 项目中安装了必要的依赖:

Vue.js:确保你有一个 Vue.js 项目。

SignalR 客户端库:安装 SignalR 客户端库。

可以通过 npm 安装 SignalR 客户端库:

bash 复制代码
npm install @microsoft/signalr

2、修改 src/main.js 文件

确保在 Vue.js 应用中全局引入 SignalR:

全局引用

javascript 复制代码
import Vue from 'vue';
import App from './App.vue';
import { HubConnectionBuilder } from '@microsoft/signalr';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

// 创建 SignalR 连接
let connection = new HubConnectionBuilder()
  .withUrl('http://localhost:5000/chatHub')
  .build();

connection.on('ReceiveMessage', (user, message) => {
  console.log(`${user}: ${message}`);
  // 更新 UI
});

connection.start().catch(err => console.error(err));

页面引用

javascript 复制代码
import { HubConnectionBuilder } from '@microsoft/signalr';

3、页面index.vue使用

javascript 复制代码
<template>
    
</template>


<script>

import { HubConnectionBuilder } from '@microsoft/signalr';
export default {
    name: "WebSocketTest",
    
  mounted() {
      this.start();
  },
  beforeDestroy() {
      this.leaveGroup();
  },
    methods: {
      async start() {
        try {
          this.connection = new HubConnectionBuilder()
              .withUrl('http://localhost:8888/msgHub')
              .configureLogging(1)
              .build();

          // 处理连接状态变化
          this.connection.onclose(async () => {
            await this.start();
          });

          // 监听服务器发送的消息
          this.connection.on('DisplayReceive', (user, message) => {
            console.log('Received message:', user, message);
           
           
          await this.connection.start();
          console.log('Connection started');

          // 加入分组
          await this.connection.invoke('JoinGroup', 'One').catch(err => console.error('Error joining group:', err));
        } catch (err) {
          console.error('Error while starting connection:', err);
          setTimeout(() => this.start1(), 5000);
        }
      },
      
      async leaveGroup() {
          //移出分组
        await this.connection.invoke('LeaveGroup', 'One').catch(err => console.error('Error leaving group:', err));
        await this.connection.stop();
        },
     

    
    }
}
</script>
相关推荐
阿芯爱编程4 小时前
2025前端面试题
前端·面试
江沉晚呤时4 小时前
在 C# 中调用 Python 脚本:实现跨语言功能集成
python·microsoft·c#·.net·.netcore·.net core
Oberon4 小时前
Avalonia硬配.NET Framework 4.8
c#·.net·avalonia·.net framework
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴6 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
喵叔哟7 小时前
3. 【Blazor全栈开发实战指南】--Blazor是什么?为什么选择Blazor?
c#·.netcore
chao_7897 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript