ASP.NET SignalR 系列（三）之代码实现

 说在前头：

因SignalR默认采用camel的编码规范，故前端调用后端的对象或者方法时，首字母均需要小写

创建集线器

 

 

创建完，文件中默认创建了一个不带参数Hello方法的示例，我们修改一下，带个参数。这个参数就是接收我们要发送的内容

/// <summary>
/// 示例，参数可以多个
/// </summary>
/// <param name="content">广播的内容</param>
public void Hello(string content)
{
   Clients.All.show(content);
}

 

 在Startup.cs文件中注册集线器

using Microsoft.Owin;
using Owin;

[assembly: OwinStartupAttribute(typeof(SignalRDemo.Startup))]
namespace SignalRDemo
{
    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR(); //声明注册集线器映射
        }
    }
}

这样，服务端的准备工作就已经完成了。接下来是前端

 

 

新建一个index.html文件，引用如下脚本

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.3.0.min.js"></script>
<script src="~/signalr/hubs"></script>

脚本的引用顺序必须按上面的顺序来

第三个，hubs为虚拟的脚本地址，固定写法。这个脚本会在页面浏览时自动生成js内容。不可删除。

编写页面布局

<div>
    <input type="text" id="content" placeholder="发送内容" class="input"/> &nbsp;&nbsp;<input type="button" value="发送" class="btn btn-sm btn-info"/>
    <div>
        <h4>接收到的信息：</h4>
        <ul id="dataContainer">
        
        </ul>
    </div>
</div>

接下来，重点了，就是前端js的编写，连接服务端集线器，直接上代码

<script language="javascript">
    $(function() {
        var chat = $.connection.demoHub; //连接服务端集线器，demoHub为服务端集线器名称，js上首字母须改为小写（系统默认）
        //定义客户端方法，此客户端方法必须与服务端集线器中的方法名称、参数均一致。
        //实际上是服务端调用了前端的js方法（订阅）
        //若多个参数，服务端也需要一致

        chat.client.show=function(content) {
            var html = '<li>' + htmlEncode(content) + "</li>";
            $("#dataContainer").append(html);
        }

        //定义推送
        $.connection.hub.start()
            .done(function() {
                $("#btn_send").click(function() {
                    chat.server.hello($("#content").val());  //将客户端的content内容发送到服务端
                    $("#content").val("");
                });
            });


    });
    //编码
    function htmlEncode(value) {
        var encodedValue = $('<div />').text(value).html();
        return encodedValue;
    }
</script>

 

 

 演示：

 

 

选择一个页面后，发送内容，两个页面同时订阅到

 

下面说说原理：

当我点击发送时，执行了前端定义的click事件，即下面的方法

 $("#btn_send").click(function() {
                    chat.server.hello($("#content").val());  //将客户端的content内容发送到服务端
                    $("#content").val("");
                });

1、通过 chat.server对象，调用服务端定义的Hello方法，此时，你发现首字母大小写不同（原因见最上面红色字体）。
2、服务端的Hello方法接收到推送的content内容时，执行了 Clients.All.show(content)方法。该方法通过Clients对象，向所有的连接的前端请求执行了show方法，并且将content内容传递到前端。后面会讲述服务端Clients对象

3、前端的show方法接收到服务端发送过来的content内容，执行了前端对应的方法进行html渲染。

这样3个步骤，完成整个 前端--服务端---所有订阅的前端 的过程

 

需要注意的几个点：

1、前端调用后端的对象和方法的首字母大小写问题

2、后端调用前端的js方法时，大小写与前端js定义的保持一致，名称一致。

3、定义推送是，start表示开启集线器连接，这个必须要有。done是指从前端做推送。当然也可以是从其他服务端推送，后面会讲到。

4、客户端的参数个数可自定义

本章结束！