SignalR .net及时通讯

一：

    通过Nuget下载安装Microsoft.AspNet.SignalR（v2.1.1），注： 这个版本的Framework版本是：V4.5

二：

   配置service端：

    

 1 using System;
 2 using System.Threading.Tasks;
 3 using Microsoft.Owin;
 4 using Owin;
 5 using Microsoft.AspNet.SignalR;
 6 using Newtonsoft.Json;
 7 using Microsoft.AspNet.SignalR.Hubs;
 8 
 9 [assembly: OwinStartup(typeof(Demo.Chat.MyStartup))]
10 namespace Demo.Chat
11 {
12     public class MyStartup
13     {
14         public void Configuration(IAppBuilder app)
15         {
16             app.MapSignalR();
17         }
18       
19 
20     }
21      [HubName("MyChat")]
22     public class MyChat : Hub
23     {
24         public void Send(ShapeModel clientModel)
25         {
26   Clients.AllExcept(clientModel.LastUpdatedBy).sendMessage(clientModel);
27          
28         }
29 
30 
31     }
32 
33     public class ShapeModel
34     {
35         [JsonProperty("content")]
36         public string content { get; set; }
37         [JsonProperty("name")]
38         public string name { get; set; }
39         [JsonIgnore]
40         public string LastUpdatedBy { get; set; }
41     }
42     
43 }

配置client:

 

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width" />
    <title>我的通讯</title>
    <script src="/js/jquery-1.8.2.min.js"></script>
    <script src="/Scripts/json2.js"></script><!--解决IE8一下版本js错误-->
    <script src="/Scripts/jquery.signalR-2.1.1.js"></script>
    <script src="/signalr/hubs" type="text/javascript"></script>
    <style>
        ul {
            list-style:none;
        }
        li {
            width:80%;
        }
        li span {
            float:right;
        }
    </style>
</head>
<body>

        <div>

            <script type="text/javascript">
                Date.prototype.format = function (fmt) {
                    var o = {
                        "M+": this.getMonth() + 1,                 //月份   
                        "d+": this.getDate(),                    //日   
                        "h+": this.getHours(),                   //小时   
                        "m+": this.getMinutes(),                 //分   
                        "s+": this.getSeconds(),                 //秒   
                        "q+": Math.floor((this.getMonth() + 3) / 3), //季度   
                        "S": this.getMilliseconds()             //毫秒   
                    };
                    if (/(y+)/.test(fmt))
                        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                    for (var k in o)
                        if (new RegExp("(" + k + ")").test(fmt))
                            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                    return fmt;
                }
                $(function () {
                    var EFifanChat = $.connection.MyChat;
                    $shape = $("#shape");
                 
                    MyChat.client.sendMessage = function (model) {
                        
                        if (decodeURIComponent(model.content) != "") {
                            var li = ("<li>" + decodeURIComponent(model.name) + "：   <b>" + decodeURIComponent(model.content) + "</b>" + "<span>" + new Date().format("yyyy-MM-dd hh:mm:ss") + "</span></li>")
                            $shape.prepend(li);
                        }
                    };
                    $.connection.hub.start().done(function () {
                        $("#broadcast").click(function () {

                            shapeModel = {
                                content:encodeURIComponent($("#message").val()),
                                name: encodeURIComponent($("#name").val())
                            };
                            $shape.prepend("<li style='color:Red'>" + decodeURIComponent(shapeModel.name) + "：   <b>" + decodeURIComponent(shapeModel.content) + "</b>" + "<span>" + new Date().format("yyyy-MM-dd hh:mm:ss") + "</span>" + "</li>");
                            MyChat.server.send(shapeModel);
                        });

                    });
                });
            </script>
            <input type="hidden" id="name" value="@ViewBag.ClientName" />
            <input type="text" style=" background: none repeat scroll 0 0 #fff; border: 1px solid ; height: 21px; line-height: 21px; outline: 0 none; padding: 6px 0; text-indent: 10px; width: 618px;" id="message" />

            <input type="button" id="broadcast" value="发送" />

            <ul id="shape"></ul>

        </div>
 
</body>
</html>

 运行效果:

posted @ 2014-09-04 15:13  小川丶  阅读(361)  评论(0)    收藏  举报