实现服务器端与客户端的实时通信 SignalR(1)

一、本文出处：SignalR 实例介绍 （建议看原著里面有DEMO下载）

二、这篇文章介绍如何利用 VS2012 创建一个简单的实时聊天系统，建好后的样子如下（模拟三个在线用户）：

　　  

三、Demo 创建

　　　1、新建项目以及新建完成后的目录结构如下图所示：

　　　　       

2、 安装 SignalR 程序包，该包实现了服务端与客户端的通信。

　　　　工具----> NuGet 程序包管理器----> 程序包管理器控制台 执行命令行：install-package Microsoft.AspNet.SignalR

　　　　

　　　安卓成功后的目录结构如下图所示，红色框内为新增加的文件：

　　　　

　　3、添加类用于接收客户端的信息以及广播收到的信息，该类的名字命名为： ChatHub.cs，该类继承自 Hub 类，并在该类中添加如下代码：　　　　

　　　　

public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }

　　4、添加启动类用于配置路由，该类的名字命名为：Startup.cs，并在该类中添加如下代码：　　

　　　　

using Microsoft.Owin;
using Owin;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

[assembly: OwinStartup(typeof(WebTM.Startup))]
namespace WebTM
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}

　　5、添加HTML页面用于发送以及接受消息,该HTML页面的名字命名为：WebChat.Html ，代码如下：

　　　　HTML：

 用户名：<strong><label id="displayname"></label></strong>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />

        <ul id="discussion" style="list-style:none;">
        </ul>
    </div>

　　　　样式：　　　　　　　　

 .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }

　　　　脚本：

 　　<script src="Scripts/jquery-1.6.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
    <script src="Signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            var chat = $.connection.chatHub;
            chat.client.broadcastMessage = function (name, message) {
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };

            $('#displayname').text(prompt('输入您的名字:', ''));
            if ($('#displayname').text() === "")
                $('#displayname').text(new Date().getTime());
            $('#message').focus();

            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub.
                    chat.server.send($('#displayname').text(), $('#message').val());
                    // Clear text box and reset focus for next comment.
                    $('#message').val('').focus();
                });
            });
        });
     </script>

在 JS 脚本中，有三个需要注意的地方（上方代码加红加粗处）：

• 第一个加红加粗处的JS脚本为自动生成的脚本，千万不可忘记添加，另外名字也不可以随便更改。而且必须在 Jquery 与 Signalr 脚本之后。
• 第二个加红加粗处是初始化连接交换类 ChatHub ，但是此处要小写。
• 第二个加红加粗处是调用交换类的公共方法 Send，该方法名也要小写。

第一个加红加粗的JS脚本是在系统启动后，Signalr脚本调用执行 Startup 类下的配置方法而生成的。

　

另外可以在类 ChatHub 加属性如下：

这样可以在第二个加红加粗处使用：ChatHub，在第三个加红加粗处使用 Send。

6、运行该HTML页面，复制到不同标签页，模拟多个用户在线聊天。