• ASP .NET SignalR起步


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

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

    2.添加Startup类,注册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

    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。

    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文件。

    <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。

    <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.运行。通过两个浏览器来测试,可达到如下效果。

  • 相关阅读:
    jdk动态代理
    mysql-索引方案
    闭包的有点以及出现的内存泄露2016/4/12
    表单2016/4/8
    cursor
    同一个事件绑定不同的函数
    a:link visited hover active
    对于属性操作,加入属性,移除属性
    offset获取位置
    清除浮动6中方法
  • 原文地址:https://www.cnblogs.com/heshuaiblog/p/10607251.html
Copyright © 2020-2023  润新知