使用Vue 3与.NET 8.0通过SignalR实现实时通信，并结合JWT身份验证

贰貮

于 2025-04-17 00:10:34 发布

阅读量1.1k

点赞数 26

文章标签： vue.js .net websocket .netcore

本文链接：https://blog.youkuaiyun.com/bazinga_y/article/details/147289254

版权

实时通信是一个非常重要的功能。SignalR是一个强大的库，能够帮助我们轻松实现客户端和服务器之间的实时数据传输。本文将结合你的代码示例，向你展示如何使用Vue 3作为前端框架，ASP.NET Core作为后端框架，通过SignalR实现实时消息通信，并结合JWT（JSON Web Token）进行身份验证。

结合我上篇文章JWT校验，接下来简单描述一下，使用JWT进行SignalR身份验证，业务背景：比如网站登录成功后才能发送实时聊天信息等业务。

目标

用户登录后获取JWT令牌。
使用JWT令牌建立安全的SignalR连接。
实现客户端发送消息到服务器，服务器广播消息到所有客户端。

技术栈

前端：Vue 3 + @microsoft/signalr
后端：ASP.NET Core 8.0 + SignalR + JWT身份验证
数据传输协议：WebSocket（SignalR默认协议）

对Vue.js和ASP.NET Core有一定的了解。
安装了Node.js和Visual Studio或者VS Code等开发环境。

后端Program.cs中添加依赖注入等服务

// 注册身份验证服务。
builder.Services.AddAuthentication(opt =>
{
// DefaultAuthenticateScheme 和 DefaultChallengeScheme：设置默认的身份验证方案为JwtBearer。
    opt.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
    opt.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
}).AddJwtBearer(opt =>
{
    var jwtSetting = builder.Configuration.GetSection("JWTSettingOption").Get<JWTSetting>();
    opt.TokenValidationParameters = new TokenValidationParameters
    {
        ValidateIssuer = false,
        ValidateAudience = false,
        ValidateLifetime = true,
        ValidateIssuerSigningKey = true,
        IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(jwtSetting.SecretKey))
    };
    opt.Events = new JwtBearerEvents
    {
    	// SignalR 当接收到消息时触发。 在SignalR场景下，JWT令牌通常通过查询字符串传递（因为WebSocket协议不支持HTTP头传递令牌）。
		//检查请求路径是否为/SignalRHub/MyHub，如果是，则从查询字符串中提取access_token并赋值给context.Token。
        OnMessageReceived = context =>
        {
            if (context.Request.Path.StartsWithSegments("/SignalRHub/MyHub"))
            {
                var accessToken = context.Request.Query["access_token"];
                if (!string.IsNullOrEmpty(accessToken))
                {
                    context.Token = accessToken;
                }
            }
            return Task.CompletedTask;
        }
    };
});
builder.Services.AddSignalR(); // 注册SignalR服务，net8.0不需下载SignalR包
// CORS的作用：
// CORS（Cross-Origin Resource Sharing）用于解决跨域问题。
// 默认情况下，浏览器会阻止跨域请求。通过配置CORS策略，我们可以允许特定的前端地址访问后端API。
// 配置策略：
// WithOrigins：指定允许的前端地址（例如http://localhost:5173）。
// AllowAnyHeader 和 AllowAnyMethod：允许所有请求头和方法。
// AllowCredentials：允许传递凭据（如cookies或JWT令牌）。
builder.Services.AddCors(options =>
{
    options.AddPolicy("AddCors", policy =>
    {
        policy.WithOrigins("http://localhost:5173") // 指定允许的前端地址  
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 允许凭证传递（如 cookies）
    });
});

var app = builder.Build();

app.UseCors("AddCors"); // 必须在其他中间件之前调用，以确保跨域请求能够正确处理。
app.UseAuthentication(); // 启用身份验证中间件，检查传入的请求是否包含有效的JWT令牌
app.UseAuthorization(); // 启用授权中间件，确保用户具有访问特定资源的权限。

SignalR 的核心概念
Hub：
Hub 是 SignalR 的核心组件，它充当服务器和客户端之间的通信桥梁。
客户端可以调用 Hub 上的方法，Hub 也可以向客户端发送消息。

客户端-服务器交互：
客户端通过 SignalR JavaScript 库（或其他支持的客户端库）与服务器建立连接。
服务器可以通过 Hub 向所有客户端、特定客户端或分组广播消息。

传输方式：
SignalR 自动选择最佳的传输协议（WebSocket、Server-Sent Events 或长轮询）。

依赖注入：
在 .NET Core 和 .NET 8.0 中，SignalR 与依赖注入系统深度集成，方便扩展和管理。

示例代码

创建一个 MyHub 类，继承自 Hub：

using Microsoft.AspNetCore.SignalR;

// 标记该Hub需要身份验证（通过JWT令牌）。
[Authorize]
public class MyHub : Hub
{
    // 广播消息给所有客户端
    public async Task SendMessage(string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }

    // 向调用者发送消息
    public async Task SendToCaller(string message)
    {
        await Clients.Caller.SendAsync("ReceiveMessage", "System", message);
    }

    // 向特定用户发送消息
    public async Task SendToUser(string userId, string message)
    {
        await Clients.User(userId).SendAsync("ReceiveMessage", "Private", message);
    }
}

vue3 示例代码

// 首先需要准备 
npm install @microsoft/signalr 
npm install axios

(1) 模板部分 (template)
功能说明：
输入框：用户可以在这里输入消息，按下回车键后会触发sendMessageOnEnter方法。
登录表单：用户输入用户名和密码，点击“登录”按钮后调用login方法。
消息列表：显示从服务器接收到的所有消息。

<div>
  <h1>SignalR 实时消息</h1>
  <div>
    <input
      type="text"
      v-model="state.userMessage"
      @keypress="sendMessageOnEnter"
      :disabled="!state.isConnected"
      placeholder="等待连接..."
    />
  </div>
  <div>
    <table>
      <tr>
        <td>登录：</td>
        <td><input type="text" v-model="state.userName"/></td>
      </tr>
      <tr>
        <td>密码：</td>
        <td><input type="password" v-model="state.password"/></td>
      </tr>
      <tr>
        <td><button v-on:click="login">登录</button></td>
      </tr>
    </table>
  </div>
  <ul>
    <li v-for="(msg, index) in state.messages" :key="index">{{ msg }}</li>
  </ul>
</div>

(2) 脚本部分 (script)
数据模型 (reactive)

这里定义了应用的状态管理对象state，用于存储用户输入、连接状态、消息列表等信息。

const state = reactive({
  userMessage: '', // 用户输入的消息
  messages: [],    // 接收到的消息列表
  isConnected: false, // 是否已连接到SignalR服务器
  userName: '',    // 用户名
  password: '',    // 密码
  token: '',       // JWT令牌
});

登录逻辑 (login)

功能说明：
检查用户名和密码是否为空。
发送登录请求到后端API。
如果登录成功，保存JWT令牌并调用startSignalRConnection方法启动SignalR连接

const login = async () => {
  if (!state.userName.trim() || !state.password.trim()) {
    alert("用户名和密码不能为空！");
    return;
  }
  try {
    const param = {
      username: state.userName,
      password: state.password,
    };
    await axios.post('https://localhost:7182/api/JWTTest/Login', param)
      .then((response) => {
        if (response.data.code === 200) {
          alert("登录成功");
          state.token = response.data.token; // 存储JWT令牌
          startSignalRConnection();         // 开始SignalR连接
        } else {
          alert("登录失败");
        }
      });
  } catch (error) {
    alert("登录失败");
    console.error("登录失败:", error);
  }
};

SignalR连接初始化 (startSignalRConnection)

功能说明：
配置SignalR连接选项，包括跳过协商、使用WebSocket协议以及通过accessTokenFactory提供JWT令牌。
定义事件监听器，处理连接状态变化（如重连、断开）。
监听ReceiveMessage事件，接收服务器广播的消息。

const startSignalRConnection = async () => {
  try {
    const options = {
      skipNegotiation: true,
      transport: signalR.HttpTransportType.WebSockets,
      accessTokenFactory: () => state.token, // 使用JWT令牌进行身份验证
    };
    connection = new signalR.HubConnectionBuilder()
      .withUrl('https://localhost:7182/SignalRHub/MyHub', options)
      .withAutomaticReconnect()
      .build();

    connection.onreconnecting(() => {
      console.log("SignalR 正在尝试重新连接...");
      state.isConnected = false;
    });

    connection.onreconnected(() => {
      console.log("SignalR 重新连接成功");
      state.isConnected = true;
    });

    connection.onclose(() => {
      console.error("SignalR 连接关闭");
      state.isConnected = false;
    });

    connection.on('ReceiveMessage', (message) => {
      state.messages.push(message); // 接收到服务器推送的消息
    });

    await connection.start();
    console.log("SignalR 连接成功");
    state.isConnected = true;
  } catch (err) {
    console.error("SignalR 连接失败:", err);
  }
};

发送消息 (sendMessageOnEnter)

功能说明：
检查是否按下了回车键以及输入框内容是否为空。
调用SignalR的invoke方法，将消息发送到服务器的SendMessage方法。

const sendMessageOnEnter = async (e) => {
  if (e.key !== 'Enter') return;
  if (!state.userMessage.trim()) return;

  if (!state.isConnected) {
    alert("SignalR 连接未就绪，请稍后再试！");
    return;
  }

  try {
    await connection.invoke('SendMessage', state.userMessage); // 调用服务器方法
    state.userMessage = ''; // 清空输入框
  } catch (err) {
    console.error("发送消息失败:", err);
  }
}