欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.NET Core 2.2 WebApi 系列【九】使用SignalR

程序员文章站 2023-11-10 21:53:10
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” 

选择指定位置安装即可

ASP.NET Core 2.2 WebApi 系列【九】使用SignalR

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 看到打印以下信息说明连接成功。

 ASP.NET Core 2.2 WebApi 系列【九】使用SignalR

 输入文字,点击发送按钮。(我这里是alert,如有其它需求,可在接收消息回调里面处理逻辑)

ASP.NET Core 2.2 WebApi 系列【九】使用SignalR 

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 系列【九】使用SignalR