.Net6使用SignalR实现前后端实时通信

2024-01-19 03:36

本文主要是介绍.Net6使用SignalR实现前后端实时通信,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

代码部分

  • 后端代码 (Asp.net core web api,用的.net6)
  • Program.cs

代码运行逻辑:
​1. 通过 WebApplication.CreateBuilder(args) 创建一个 ASP.NET Core 应用程序建造器。
2. 使用 builder.Services.AddControllers() 添加 MVC 控制器服务和 builder.Services.AddSignalR() 添加 SignalR 服务。
3. 注册 Swagger 和 Cors 跨域设置的服务,并添加 ChatHub 类作为单例服务。
4. 通过 builder.Build() 构建应用程序。
5. 在 if (app.Environment.IsDevelopment()) 中使用 Swagger 和 SwaggerUI 中间件,只在当前环境下使用。
6. 使用 app.UseAuthorization() 添加授权中间件。
7. 使用 app.UseRouting() 开启路由功能中间件。
8. 使用 app.UseCors(“CorsSingnalR”) 设置跨域策略,使用名为 “CorsSingnalR” 的策略,允许来自任何来源的访问。
9. 使用 app.MapControllers() 将 MVC 控制器添加到请求处理管道中。
10. 使用 app.MapHub(“/chathub”) 添加 SignalR 路由,并将 ChatHub 类注册为路由,在客户端和服务器之间建立 WebSocket 连接
11. 最后,使用 app.Run() 启动应用程序。

using Microsoft.AspNetCore.SignalR;
using PracticeProjects.Logic;var builder = WebApplication.CreateBuilder(args); //创建asp.net core程序建造器,这个建造器允许我们配置应用程序的服务和中间件builder.Services.AddControllers();  //添加mvc控制器服务。用于处理http请求俄响应
builder.Services.AddSignalR();//用来实现实时通信builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();builder.Services.AddSingleton<ChatHub>();
//跨域设置
builder.Services.AddCors(op =>
{op.AddPolicy("CorsSingnalR",set =>{set.SetIsOriginAllowed(origin => true).AllowAnyHeader().AllowAnyMethod().AllowCredentials();});
});
var app = builder.Build();// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{app.UseSwagger();app.UseSwaggerUI();
}app.UseAuthorization();app.UseRouting();//中间件,用于开启路由功能。
app.UseCors("CorsSingnalR");//app.UseRouting(),之后app.UseCors设置跨域策略app.MapControllers();//将MVC控制器添加到请求处理管道中
app.MapHub<ChatHub>("/chathub");//添加SignalR路由;将SignalR的ChatHub类作为路由,在客户端与服务段建立WebSocket连接app.Run();//应用程序启动

ChatController.cs

  • List item
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR;
using PracticeProjects.Logic;
using PracticeProjects.Model;namespace PracticeProjects.Controllers
{[Route("[controller]")][ApiController]public class ChatController : ControllerBase{private readonly ChatHub _chatHubContext;private readonly ILogger<ChatController> _logger;public ChatController(ChatHub chatHubContext, ILogger<ChatController> logger){_chatHubContext = chatHubContext;_logger = logger;}[Route("api/SendMsg")][HttpPost]public async Task<dynamic> SendMessage(ChatModel chat){await _chatHubContext.SendMessage(chat);return "发送成功";}}
}

方法类(ChatHub:继成Hub,Hub是SignalR中用于处理客户端与服务端双向通信的关键组件。)

using Microsoft.AspNetCore.SignalR;
using PracticeProjects.Model;namespace PracticeProjects.Logic
{/// <summary>/// 消息发送/// </summary>public class ChatHub : Hub{public async Task SendMessage(ChatModel chat){if(Clients!=null)await Clients.All.SendAsync("RecieveMessage", chat.name+":"+chat.content);//第一个参数:调用的客户端函数名,第二个参数:客户端函数的参数}}
}

Model类(ChatModel):

namespace PracticeProjects.Model
{public class ChatModel{public string? name { get; set; }public string? content { get; set; }}
}
  • 前端关键部分代码(网上找的代码,用来模拟客户端)
    App.vue
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';import { connection, connect, send, disconnect } from './utils/signalr';const msgInfo = reactive({ name: '张三', content: '' });
const receivemsglist = ref([]);//发送消息
const sendMsg = async () => {await send("SendMessage", msgInfo);//第一个参数:服务端函数名,第二个:函数的参数
}onMounted(async () => {// 建立连接connect('http://localhost:5130/chathub'); // 开始连接await connection.start();// 注册方法(接收服务器推送过来的数据),服务端向客户端发送数据时,使用的方法名为'RecieveMessage'connection.on('RecieveMessage', (res) => {console.log(`【${new Date().toLocaleString()}】:从服务器同步消息成功!`);receivemsglist.value.push(res);});
});// 卸载
onBeforeUnmount(() => {// 断开连接disconnect();
});</script><template><div><a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><!-- <HelloWorld msg="Vite + Vue" /> --><div>姓名:<input type="text" v-model="msgInfo.name"><br>内容:<input type="text" v-model="msgInfo.content"><br><button type="button" @click="sendMsg">发送</button><br><table><tr><th>消息列表:</th></tr><tr v-for="(item, i) in receivemsglist" :key="i"><td>{{ item }}</td></tr></table></div>
</template>

signalr.js

import * as signalR from '@microsoft/signalr';//如果需要身份验证
//.withUrl('/messageHub', {accessTokenFactory: () => sessionStorage.getItem('token')})
let connection;// 建立连接
async function start(url) {try {connection = new signalR.HubConnectionBuilder().withUrl(url)//跨域需要使用绝对地址.configureLogging(signalR.LogLevel.Information).withAutomaticReconnect() // 设置自动重连机制.build();} catch (err) {console.log(err);setTimeout(start, 10000);//错误重连}
}// 开始signalr连接
const connect = async (url) => {await start(url);console.log(`${new Date().toLocaleString()}:SignalR已连接成功!`);
};// 调用服务端方法 发送消息
async function send(methodName, param) {try {await connection.invoke(methodName, param);} catch (err) { console.error(err); }
}//断开连接
const disconnect = async () => {await connection.stop();console.log(`${new Date().toLocaleString()}:SignalR已断开连接!`);
};export { connection, connect, send, disconnect };

运行测试:

  1. 前后端代码启动
  2. 客户端请求服务端建立websocket连接:
    在这里插入图片描述
  3. 连接建立后,服务端可主动向前端推送消息
    在这里插入图片描述

上传的资源:

SignalR实时通信代码资源

这篇关于.Net6使用SignalR实现前后端实时通信的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/621150

相关文章

C++11右值引用与Lambda表达式的使用

《C++11右值引用与Lambda表达式的使用》C++11引入右值引用,实现移动语义提升性能,支持资源转移与完美转发;同时引入Lambda表达式,简化匿名函数定义,通过捕获列表和参数列表灵活处理变量... 目录C++11新特性右值引用和移动语义左值 / 右值常见的左值和右值移动语义移动构造函数移动复制运算符

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali

Spring Security 单点登录与自动登录机制的实现原理

《SpringSecurity单点登录与自动登录机制的实现原理》本文探讨SpringSecurity实现单点登录(SSO)与自动登录机制,涵盖JWT跨系统认证、RememberMe持久化Token... 目录一、核心概念解析1.1 单点登录(SSO)1.2 自动登录(Remember Me)二、代码分析三、

C#中lock关键字的使用小结

《C#中lock关键字的使用小结》在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时,其他线程无法访问同一实例的该代码块,下面就来介绍一下lock关键字的使用... 目录使用方式工作原理注意事项示例代码为什么不能lock值类型在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时

MySQL 强制使用特定索引的操作

《MySQL强制使用特定索引的操作》MySQL可通过FORCEINDEX、USEINDEX等语法强制查询使用特定索引,但优化器可能不采纳,需结合EXPLAIN分析执行计划,避免性能下降,注意版本差异... 目录1. 使用FORCE INDEX语法2. 使用USE INDEX语法3. 使用IGNORE IND

C# $字符串插值的使用

《C#$字符串插值的使用》本文介绍了C#中的字符串插值功能,详细介绍了使用$符号的实现方式,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录$ 字符使用方式创建内插字符串包含不同的数据类型控制内插表达式的格式控制内插表达式的对齐方式内插表达式中使用转义序列内插表达式中使用

flask库中sessions.py的使用小结

《flask库中sessions.py的使用小结》在Flask中Session是一种用于在不同请求之间存储用户数据的机制,Session默认是基于客户端Cookie的,但数据会经过加密签名,防止篡改,... 目录1. Flask Session 的基本使用(1) 启用 Session(2) 存储和读取 Se

PyCharm中配置PyQt的实现步骤

《PyCharm中配置PyQt的实现步骤》PyCharm是JetBrains推出的一款强大的PythonIDE,结合PyQt可以进行pythion高效开发桌面GUI应用程序,本文就来介绍一下PyCha... 目录1. 安装China编程PyQt1.PyQt 核心组件2. 基础 PyQt 应用程序结构3. 使用 Q

Java Thread中join方法使用举例详解

《JavaThread中join方法使用举例详解》JavaThread中join()方法主要是让调用改方法的thread完成run方法里面的东西后,在执行join()方法后面的代码,这篇文章主要介绍... 目录前言1.join()方法的定义和作用2.join()方法的三个重载版本3.join()方法的工作原

Spring AI使用tool Calling和MCP的示例详解

《SpringAI使用toolCalling和MCP的示例详解》SpringAI1.0.0.M6引入ToolCalling与MCP协议,提升AI与工具交互的扩展性与标准化,支持信息检索、行动执行等... 目录深入探索 Spring AI聊天接口示例Function CallingMCPSTDIOSSE结束语