ASP.NET Core 2.2 WebApi 系列【九】使用SignalR
程序员文章站
2022-06-14 19:12:00
1.添加 SignalR 客户端库 右键点击项目->然后选择“添加” >“客户端库” 提供程序选择:unpkg ,库选择:@aspnet/signalr@1.1.4 选择“选择特定文件” ,展开“dist/browser” 文件夹,然后选择“signalr.js” 和“signalr.min.js” ......
1.添加 signalr 客户端库
右键点击项目->然后选择“添加” >“客户端库”
提供程序选择:unpkg ,库选择:@aspnet/signalr@1.1.4
选择“选择特定文件” ,展开“dist/browser” 文件夹,然后选择“signalr.js” 和“signalr.min.js”
选择指定位置安装即可
2.定义hub集线器
创建messagehub 并继承hub。hub类管理连接、组和消息
using system.collections.generic; using system.threading.tasks; using microsoft.aspnetcore.signalr; namespace netcorewebapi.signalr { /// <summary> /// message集线器 /// </summary> public class messagehub : hub { /// <summary> /// 存放已连接信息 /// </summary> public static readonly dictionary<string, string> connections = new dictionary<string, string>(); /// <summary> /// 发送消息 /// </summary> /// <param name="loginno"></param> /// <param name="message"></param> /// <returns></returns> public async task sendmessage(string loginno, string message) { connections.trygetvalue(loginno, out string clientid); //receivemessage 客户端接受方法 await clients.client(clientid).sendasync("receivemessage", message); } /// <summary> /// 客户端登录成功保存用户账号和客户端id /// </summary> /// <param name="loginno"></param> public void sendlogin(string loginno) { //判断用户有没有登陆过(没登陆过插入用户名和id,登陆过修改用户名和id) if (!connections.containskey(loginno)) { connections.add(loginno, context.connectionid); } else { connections[loginno] = context.connectionid; } } } }
3.配置signalr
我们需要在startup.cs启动类的configureservices中注册signalr服务
services.addsignalr();
设置signalr路由
//设置signalr路由,指向自定义类messagehub app.usesignalr(route => { route.maphub<messagehub>("/messagehub"); });
注意:usesignalr 必须在 usemvc 之前调用!
4.编写signalr 客户端代码
引用signalr.js类库文件到html中
<!doctype html> <html> <head> </head> <body> <div style="text-align: center;margin-top: 5%"> <input type="text" id="message" placeholder="消息" /> <button type="button" id="sendbtn">发送</button> </div> <script src="../resources/lib/signalr/dist/browser/signalr.js"></script> </body> </html> <script> var connection = new signalr.hubconnectionbuilder() //配置路由 .withurl("/messagehub") //日志信息 .configurelogging(signalr.loglevel.information) //创建 .build(); //接受消息 connection.on("receivemessage", (message) => { alert("收到消息===>" + message); }); //发送消息 document.getelementbyid("sendbtn").addeventlistener("click", function () { var message = document.getelementbyid('message').value; connection.invoke("sendmessage", "tenghao510@qq.com", message).catch(err => console.error(err.tostring()) ); }); //开始连接 connection.start().then(e => { connection.invoke("sendlogin", "tenghao510@qq.com").catch(err => console.error(err.tostring()) ); }).catch(err => console.error(err.tostring())); </script>
5.运行程序
打开html页面,f12在 console 看到打印以下信息说明连接成功。
输入文字,点击发送按钮。(我这里是alert,如有其它需求,可在接收消息回调里面处理逻辑)
6.从控制器发布消息
将消息从外部发送到 hub。当使用控制器时,需要注入一个 ihubcontext 实例。
using microsoft.aspnetcore.mvc; using microsoft.aspnetcore.signalr; using netcorewebapi.signalr; namespace netcorewebapi.controllers { /// <summary> /// signalr推送 /// </summary> [route("api/hub")] [apicontroller] public class hubcontroller : controller { private readonly ihubcontext<messagehub> _hubcontext; /// <summary> /// 构造函数 /// </summary> /// <param name="hubclients"></param> public hubcontroller(ihubcontext<messagehub> hubclients) { _hubcontext = hubclients; } /// <summary> /// 测试signalr推送 /// </summary> /// <param name="loginno"></param> [httpget] [route("pushmsg")] public void pushmsg(string loginno) { if (string.isnullorwhitespace(loginno)) { //给所有人推送消息 _hubcontext.clients.all.sendasync("receivemessage", "这是控制器发送的消息"); } else { //给指定人推送 messagehub.connections.trygetvalue(loginno, out string id); _hubcontext.clients.client(id).sendasync("receivemessage", "这是控制器发送的消息"); } } } }
调用接口测试
下一篇: 巴山剑场在哪里?历史上真的有巴山剑场吗?
推荐阅读
-
ASP.NET Core 2.2 WebApi 系列【六】泛型仓储模式
-
ASP.NET Core 2.2 WebApi 系列【三】AutoFac 仓储接口的依赖注入
-
ASP.NET Core 2.2 WebApi 系列【四】集成Swagger
-
ASP.Net Core 2.2 MVC入门到基本使用系列 (二)
-
ASP.Net Core 2.2 MVC入门到基本使用系列 (一)
-
asp.net core系列 37 WebAPI 使用OpenAPI (swagger)中间件
-
ASP.NET Core 2.2 WebApi 系列【八】统一返回格式(返回值、模型验证、异常)
-
ASP.NET Core 2.2 WebApi 系列【九】使用SignalR
-
ASP.NET Core 2.2 WebApi 系列【三】AutoFac 仓储接口的依赖注入
-
ASP.NET Core 2.2 WebApi 系列【六】泛型仓储模式