BootstrapSignalR 实现Web多丁聊天室

Bootstrap 1

ASP .NET SignalR 是一个ASP .NET 下的类库,可以当ASP .NET
的Web项目蒙实现实时通信。什么是实时通信的Web呢?就是深受客户端(Web页面)和劳务器端能够互相关照信息和调用方法,当然就是实时操作的。

 

密切研讨下,它就是Client调用Server的不二法门,Server调用Client的情势。

 

着力代码:

WebSockets是HTML5提供的初的API,可以以Web网页与服务器端间建立Socket连接,当WebSockets可用时(即浏览器补助Html5)SignalR使用WebSockets,当不辅助时SignalR将以其余技术来保证达到平效果。

SignalR 将与客户端举行实时通信带来吃了ASP .NET
。当然如此既好用,而且为发生足的增添性。在此以前用户需刷新页面或应用Ajax轮询才可以落实的实时显示数据,现在若以SignalR,就足以略实现了。

JS

SignalR当然为提供了非凡简单易用的高阶API,使服务器端能够么或批量调用客户端上的JavaScript函数,并且特别
方便地拓展连续管理,例如客户端连接到服务器端,或断开连接,客户端分组,以及客户端授权,使用SignalR都非常容易实现。

 

 

           //接收数据
            var con = $.connection.myhub;

            con.client.receiveMessage = function (name, message) {

                $("#message").append("<li><b>" + name + "</b>Say:" + message + "</li>");
            }




            //发送数据
            $.connection.hub.start().done(function () {

                $("#send").click(function () {

                    con.server.sendMessage($("#name").val(),$("#txt").val());
                });

            });
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />

    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.6.4.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.js"></script>
    <script src="/signalr/hubs"></script>

</head>
<body style="padding-top:40px;">
    <div class="container">
        <div class="jumbotron">
            <ul id="message" style="height:400px;overflow-y:scroll;"></ul>
        </div>
        <input id="name" type="email" class="form-control" style="margin-bottom:5px;">
        <input id="txt" type="email" class="form-control" style="margin-bottom:5px;">
        <button id="send" type="button" class="btn btn-primary btn-block">Send</button>

    </div>


    <script type="text/javascript">
        $(function () {

            //接收数据
            var con = $.connection.myhub;
            con.client.receiveMessage = function (name, message) {

                $("#message").append("<li><b>" + name + "</b>Say:" + message + "</li>");
            }




            //发送数据
            $.connection.hub.start().done(function () {

                $("#send").click(function () {

                    con.server.sendMessage($("#name").val(),$("#txt").val());
                });

            });
        })
    </script>

</body>
</html>

 

 

2.NuGet安SignalR,这一个暴发您不少凭借项,我们一直装MicroSoft.AspNet.Signalr

 

说了这样多,其实可以大概的道,SignalR就是客户端调用劳动端的主意,服务端再失去调整用客户端的法门,本文实现的凡选拔SignalR实现Web三人口拉,页面搭建用之Bootstrap,先看下力量图

 

 

Bootstrap 2

5.新建Html页面,你莫看错,就是Html页面

1.新建Web应用程序,Empty空模板

 

namespace WebApplication2
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // 有关如何配置应用程序的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkID=316888
            app.MapSignalR();
        }
    }
}

 

 

做到这里就是坏功告成了,假若没起职能的言辞,我说下可能会见拧的地点, var
con = $.connection.myhub; 这么些myhub一定即便和Hub.cs的 [HubName(“myhub”)]
对应。

C#

namespace WebApplication2.hubs
{
    [HubName("myhub")] 
    public class MyHub : Hub
    {
        public void SendMessage(string name, string message)
        {
            Clients.All.receiveMessage(name, message);
        }
    }
}

4.假如SignalR组件安装完成将来,项目右键新建起,会多来SignalR这无异桩,新建
SignalR集线器类

 

Bootstrap 3

Bootstrap 4

namespace WebApplication2.hubs
{
    [HubName("myhub")] //这个HubName很重要
    public class MyHub : Hub
    {
        public void SendMessage(string name, string message)
        {
            Clients.All.receiveMessage(name, message);
        }
    }
}

 

 

3.类增长新建起,OWIN
Startup类,Startup是次启动的入门点,我们在这路注册Signalr

相关文章