SignalR简单例子及入口app.MapSignalR()

最新推荐文章于 2024-08-25 20:50:48 发布

Andrewniu

最新推荐文章于 2024-08-25 20:50:48 发布

阅读量3.7k

点赞数

分类专栏： C#基础类 SignalR知识总结

C#基础类同时被 2 个专栏收录

233 篇文章 14 订阅

订阅专栏

SignalR知识总结

18 篇文章 1 订阅

订阅专栏

本系列教程使用工具
开发工具：VS2015
.NET版本：4.5
SignalR 版本：2.x系列

开发(点击下载源码）
创建空Asp.Net Web项目，在程序包管理器控制台中输入如下命令，安装SignalR:
[csharp] view plain copy
print ?
1. <span style="font-size:14px;">install-package Microsoft.AspNet.SignalR</span>

install-package Microsoft.AspNet.SignalR

 
 
在项目中右击，选择添加|SignalR Hub Class(V2),命名为“ChatHub”，代码如下：
 
  
    
     
     [csharp] 
     view plain 
      copy 
      
      print 
     ? 
     
    
  
  using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using Microsoft.AspNet.SignalR;  
  
namespace SignalRChat  
{  
    public class ChatHub : Hub  
    {  
        public void Send(string name,string message)  
        {  
            Clients.All.broadcastMessage(name, message);  
        }  
    }  
}

using System; using System.Collections.Generic; using System.Linq; using System.Web; using Microsoft.AspNet.SignalR; namespace SignalRChat { public class ChatHub : Hub { public void Send(string name,string message) { Clients.All.broadcastMessage(name, message); } } }

在项目中右击，选择添加|OWIN Startup类，命名为“Startup”,代码如下：

[csharp] view plain copy

print ?

using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// 有关如何配置应用程序的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkID=316888
app.MapSignalR();
}
}
}

using System; using System.Threading.Tasks; using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(SignalRChat.Startup))] namespace SignalRChat { public class Startup { public void Configuration(IAppBuilder app) { // 有关如何配置应用程序的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkID=316888 app.MapSignalR(); } } }


在项目中添加html页面，命名为“index.html”,代码如下：
 
  
   
    
    [html] 
    view plain 
     copy 
     
     print 
    ? 
    
   
  <!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <title>SignalR Simple Chat</title>  
    <meta charset="utf-8" />  
    <style type="text/css">  
        .container{  
            background-color:#99CCFF;  
            border:thick solid #808080;  
            padding:20px;  
            margin:20px;  
        }  
    </style>  
</head>  
<body>  
    <div class="container">  
        <input type="text" id="message" />  
        <input type="button" id="sendmessage" value="send" />  
        <input type="hidden" id="displayname"/>  
        <ul id="discussion">  
        </ul>  
    </div>  
    <script src="Scripts/jquery-1.6.4.min.js"></script>  
    <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>  
    <script src="signalr/hubs"></script>  
    <script>  
        $(function () {  
            //声明hub代理  
            var chat = $.connection.chatHub;  
            //创建hub调用的broadcast函数  
            chat.client.broadcastMessage = function (name, message) {  
                //获得发送人的名字和消息  
                var encodedName = $('<div/>').text(name).html();  
                var encodedMsg = $('<div/>').text(message).html();  
                //将接收的信息添加到页面上  
                $('#discussion').append('<li><strong>' + encodedName  
                    + '</strong>:  '+encodedMsg+'</li>');  
            };  
            //获得当前用户的名字  
            $('#displayname').val(prompt('Enter your name:', ''));  
            //将焦点设置在信息框  
            $('#message').focus();  
            //启动链接  
            $.connection.hub.start().done(function () {  
                $('#sendmessage').click(function () {  
                    //调用hub的Send方法  
                    chat.server.send($('#displayname').val(), $('#message').val());  
                    //清理输入框，并将焦点重新设置在输入框中  
                    $('#message').val('').focus();  
                });  
            });  
        });  
    </script>  
</body>  
</html>

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>SignalR Simple Chat</title> <meta charset="utf-8" /> <style type="text/css"> .container{ background-color:#99CCFF; border:thick solid #808080; padding:20px; margin:20px; } </style> </head> <body> <div class="container"> <input type="text" id="message" /> <input type="button" id="sendmessage" value="send" /> <input type="hidden" id="displayname"/> <ul id="discussion"> </ul> </div> <script src="Scripts/jquery-1.6.4.min.js"></script> <script src="Scripts/jquery.signalR-2.2.1.min.js"></script> <script src="signalr/hubs"></script> <script> $(function () { //声明hub代理 var chat = $.connection.chatHub; //创建hub调用的broadcast函数 chat.client.broadcastMessage = function (name, message) { //获得发送人的名字和消息 var encodedName = $('<div/>').text(name).html(); var encodedMsg = $('<div/>').text(message).html(); //将接收的信息添加到页面上 $('#discussion').append('<li><strong>' + encodedName + '</strong>: '+encodedMsg+'</li>'); }; //获得当前用户的名字 $('#displayname').val(prompt('Enter your name:', '')); //将焦点设置在信息框 $('#message').focus(); //启动链接 $.connection.hub.start().done(function () { $('#sendmessage').click(function () { //调用hub的Send方法 chat.server.send($('#displayname').val(), $('#message').val()); //清理输入框，并将焦点重新设置在输入框中 $('#message').val('').focus(); }); }); }); </script> </body> </html>

运行，程序，效果如下图，到此为止一个简单的SignalR程序完成了。

本系列教程使用工具
开发工具：VS2015
.NET版本：4.5
SignalR 版本：2.x系列
开发(点击下载源码）
创建空Asp.Net Web项目，在程序包管理器控制台中输入如下命令，安装SignalR:
[csharp] view plain copy

<span style="font-size:14px;">install-package Microsoft.AspNet.SignalR</span>

在项目中右击，选择添加|SignalR Hub Class(V2),命名为“ChatHub”，代码如下：
[csharp] view plain copy

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name,string message)
        {
            Clients.All.broadcastMessage(name, message);
        }
    }
}

在项目中右击，选择添加|OWIN Startup类，命名为“Startup”,代码如下：
[csharp] view plain copy

using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SignalRChat.Startup))]

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

在项目中添加html页面，命名为“index.html”,代码如下：
[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>SignalR Simple Chat</title>
    <meta charset="utf-8" />
    <style type="text/css">
        .container{
            background-color:#99CCFF;
            border:thick solid #808080;
            padding:20px;
            margin:20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="send" />
        <input type="hidden" id="displayname"/>
        <ul id="discussion">
        </ul>
    </div>
    <script src="Scripts/jquery-1.6.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
    <script src="signalr/hubs"></script>
    <script>
        $(function () {
            //声明hub代理
            var chat = $.connection.chatHub;
            //创建hub调用的broadcast函数
            chat.client.broadcastMessage = function (name, message) {
                //获得发送人的名字和消息
                var encodedName = $('<div/>').text(name).html();
                var encodedMsg = $('<div/>').text(message).html();
                //将接收的信息添加到页面上
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>: '+encodedMsg+'</li>');
            };
            //获得当前用户的名字
            $('#displayname').val(prompt('Enter your name:', ''));
            //将焦点设置在信息框
            $('#message').focus();
            //启动链接
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    //调用hub的Send方法
                    chat.server.send($('#displayname').val(), $('#message').val());
                    //清理输入框，并将焦点重新设置在输入框中
                    $('#message').val('').focus();
                });
            });
        });
    </script>
</body>
</html>

运行，程序，效果如下图，到此为止一个简单的SignalR程序完成了。