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

ASP .NET SignalR起步

程序员文章站 2022-07-11 09:22:05
在网站开发中,时常需要使用消息推送功能,http协议是无状态连接,我们需要一个类似桌面程序中socket保持服务器和客户端连接的技术。signalr就是这样一个技术,他能保持网站页面和服务器的一个长连接,时刻监听服务器端的信息。实现一个简单的signalr功能步骤如下。 1.新建一个.net项目,使 ......

在网站开发中,时常需要使用消息推送功能,http协议是无状态连接,我们需要一个类似桌面程序中socket保持服务器和客户端连接的技术。signalr就是这样一个技术,他能保持网站页面和服务器的一个长连接,时刻监听服务器端的信息。实现一个简单的signalr功能步骤如下。

1.新建一个.net项目,使用nuget引用signalr。会在script文件下生成jquery.signalr-2.2.0.js文件。

 

ASP .NET SignalR起步

ASP .NET SignalR起步

 

2.添加startup类,注册signalr。

ASP .NET SignalR起步
 1 using microsoft.owin;
 2 using owin;
 3 
 4 [assembly: owinstartup(typeof(vipsignalr.startup))]
 5 
 6 namespace vipsignalr
 7 {
 8     public class startup
 9     {
10         public void configuration(iappbuilder app)
11         {
12             app.mapsignalr();
13         }
14     }
15 }
view code

 

3.添加集线器类chathub.cs

ASP .NET SignalR起步
using microsoft.aspnet.signalr;

namespace vipsignalr
{
    public class chathub : hub
    {
        public void send(string name, string message)
        {
            clients.all.receivemessage(name, message);
        }
    }
}
view code

 

4.添加前台消息发送和接受的代码

(1)新建一个页面。

(2)添加html。

ASP .NET SignalR起步
your name: <input type="text" id="nametxt"/><br />
message: <input type="text" id="messagetxt" /><br />
<input type="button" id="sendbtn" value="发送" /><br />

消息记录:<br/>
<div id="msgdiv"></div>
view code

(3)引用js文件。

ASP .NET SignalR起步
<script src="~/scripts/jquery-1.6.4.js"></script>
<script src="~/scripts/jquery.signalr-2.2.0.js"></script>
<script src="~/signalr/hubs"></script>
view code

其中/signalr/hubs是通过chathubs.cs生成的js文件,可在浏览器resource查看。我们通过这个js文件使用在chathubs.cs中定义的方法。

(4)使用signalr。

ASP .NET SignalR起步
<script>
    $(function () {
        // 引用自动生成的集线器代理
        //名称和hub类相同,首字母小写
        var chat = $.connection.chathub;

        //接受消息,方法名称和参数和hub类中动态解析方法名相同
        chat.client.receivemessage = function (name, message) {
            var msg = "<div>" + name + ": " + message + "</div>";
            $("#msgdiv").append(msg);
        }

        // 集成器连接开始
        $.connection.hub.start().done(function () {
            $('#sendbtn').click(function () {
                //发送消息,方法名和参数和hub类对应,首字母小写
                chat.server.send($("#nametxt").val(), $('#messagetxt').val());
            });
        });
    });
</script>
view code

 

5.运行。通过两个浏览器来测试,可达到如下效果。

ASP .NET SignalR起步