SignalR在线聊天

今天得知一个超简单的类库可以帮你实现简单的在线聊天功能。
很急躁啊，立马上菜吧

简介

ASP .NET SignalR 是一个ASP .NET 下的类库，可以在ASP .NET 的Web项目中实现实时通信。什么是实时通信的Web呢？就是让客户端（Web页面）和服务器端可以互相通知消息及调用方法，当然这是实时操作的。

WebSockets是HTML5提供的新的API，可以在Web网页与服务器端间建立Socket连接，当WebSockets可用时（即浏览器支持Html5）SignalR使用WebSockets，当不支持时SignalR将使用其它技术来保证达到相同效果。

SignalR当然也提供了非常简单易用的高阶API，使服务器端可以单个或批量调用客户端上的JavaScript函数，并且非常 方便地进行连接管理，例如客户端连接到服务器端，或断开连接，客户端分组，以及客户端授权，使用SignalR都非常 容易实现。

作用

SignalR 将与客户端进行实时通信带给了ASP .NET 。当然这样既好用，而且也有足够的扩展性。以前用户需要刷新页面或使用Ajax轮询才能实现的实时显示数据，现在只要使用SignalR，就可以简单实现了。

最重要的是您无需重新建立项目，使用现有ASP .NET项目即可无缝使用SignalR。

1. 新建一个asp.net web项目，命名为SignalChat。

     2. 添加Signal库到SignalChat项目中。
   使用vs中的NuGet包管理器直接安装。

    3.  建立一个集线器（Hubs）类来推送更新内容到客户端。

    在解决方案资源管理器中，右击项目，选择添加—-新建项，选择SignalR集线器类（v2），命名为ChatHub.cs并添加，如下图：
 

编辑你的ChatHub文件，删除Hello方法并且添加Send方法，如下面代码：
public class ChatHub : Hub
{

        public void Send(string name, string message)

        {

            // Call the broadcastMessage method to update clients.

            Clients.All.broadcastMessage(name, message);

        }

    }

1. 建立一个.Net开放Web 接口（OWIN）启动类来配置应用程序项—-O下图：
   
   .csdn.net/20160406174741871)

在网页中使用SignalR jQuery库发送和显示更新消息
添加index.aspx
`<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”index.aspx.cs” Inherits=”SignalChat.index” %>

<title>SignalR Simple Chat</title>

<style type='text/css'>


    .container {

        background-color: #99CCFF;

        border: thick solid #808080;

        padding: 20px;

        margin: 20px;

    }
    .backg{
        background-color:burlywood;
    }

</style>

<div class="backg">
    <h2>SunshineCart 服务大厅</h2>


<div class='container'>

    <input type='text' id='message' />

    <input type='button' id='sendmessage' value='Send' />

    <input type='hidden' id='displayname' />

    <input type='hidden' id="time" />

    <ul id='discussion'>

    </ul>

</div>
 </div>
<!--Script references. -->

<!--Reference the jQuery library. -->

<script src='scripts/jquery-1.10.2.min.js' ></script>

<!--Reference the SignalR library. -->

<script src='scripts/jquery.signalR-2.1.2.min.js'></script>

<!--Reference the autogenerated SignalR hub script. -->

<script src='signalr/hubs'></script>

<!--Add script to update the page and send messages.-->

<%--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>--%>

<script type='text/javascript'>

    $(function () {

        // Declare a proxy to reference the hub.

        var chat = $.connection.chatHub;

        // Create a function that the hub can call to broadcast messages.

        chat.client.broadcastMessage = function (name, message,time) {

            // Html encode display name and message.

            var encodedName = $('<div />').text(name).html();

            var encodedMsg = $('<div />').text(message).html();

            var encodeDateTime = $('<div/>').text(time).html();



            // Add the message to the page.

            $('#discussion').append('<li><strong>' + encodedName

                + '</strong>:&nbsp;&nbsp;' + encodedMsg + encodeDateTime+'</li>');

        };

        // Get the user name and store it to prepend to messages.

        $('#displayname').val(prompt('Enter your name:', ''));

        // Set initial focus to message input box. 

        $('#message').focus();

        // Start the connection.

        $.connection.hub.start().done(function () {




           $('#sendmessage').click(function () {

                // Call the Send method on the hub.

                chat.server.send($('#displayname').val(), $('#message').val());

                // Clear text box and reset focus for next comment.

                $('#message').val('').focus();

            });

        });

    });

   //$( function currentTime() {
   //     var d = new Date(), str = '';
   //     str += d.getFullYear() + '年';
   //     str += d.getMonth() + 1 + '月';
   //     str += d.getDate() + '日';
   //     str += d.getHours() + '时';
   //     str += d.getMinutes() + '分';
   //     str += d.getSeconds() + '秒';
   //     return str;
   //}
   // );
   // setInterval(function () { $('#time').html(currentTime) }, 1000);

</script>

`