当前位置： 移动技术网 > IT编程>开发语言>.net > 详解在ASP.NET Core下使用SignalR技术

详解在ASP.NET Core下使用SignalR技术

2017年12月08日  | 移动技术网IT编程  | 我要评论

西安美食排行榜,郸城县刘太行,北京门牌制作

一、前言

上次我们讲到过如何在asp.net core中使用websocket 。这次的主角是signalr它为我们提供了简化操作websocket的框架。

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 core 1.0.x 版本中并没有包含signalr，但是signalr技术计划集成在asp.net core 1.2版本中，并且它的开发团队还要使用typescript对它的javascript客户端进行重写，服务端方面也会贴近asp.net core的开发方式，比如会集成到asp.net core依赖注入框架中。

目前的情况就是在1.0中无法使用signalr技术，本文实现的demo都是在1.1下进行的。

三、集成signalr

当然asp.net core 1.2离正式发布还有一段时间，目前想集成signalr都不是现成的方案，我们要通过手动的方式集成signalr。

要在asp.net core中使用signalr，要先引用microsoft.aspnetcore.signalr.server 、 microsoft.aspnetcore.websockets 的nuget package包。

当然上面也说过目前没有asp.net core没有集成signalr，所以nuget上也找不到signalr的程序包，想添加引用我们就得去myget上去找找。

1.添加nuget源

在程序根目录新建一个命为nuget.config的文件内容如下：

<?xml version="0" encoding="utf-8"?>
<configuration>
  <packagesources>
    <clear/>
      <add key="aspnetcidev" value="https://dotnetmygetorg/f/aspnetcore-ci-dev/api/v3/indexjson"/>
      <add key="apinugetorg" value="https://apinugetorg/v3/indexjson"/>
  </packagesources>
</configuration>

当然我们也可以通过在visual studio中设置 nuget packages的源，来引用这个程序集。

2.在project.json添加引用

"microsoftaspnetcoresignalrserver": "0-*",
"microsoftaspnetcorewebsockets": "0-*"

可以注意到signalr的版本是0.2.0的alpha版本，所以后续版本可能变化也会比较大！ 听说是好重写的。

值得注意的是，signalr目前只能在asp.net core 1.1及以上版本上使用，在这个文章中我使用的.net core sdk版本为 1.0.0-preview2-003131 ，所以引用有问题的同学可以尝试把coreapp版本改为1.1，所有aspnetcore的程序集也都改变为1.1的版本。

3.添加配置代码

我们需要在startup类中的 configureservices方法中添加如下代码：

public void configureservices(iservicecollection services)
{
   servicesaddsignalr(options => 
   {
     optionshubsenabledetailederrors = true;
   });
}

在startup类中的configure方法中添加如下代码：

appusewebsockets();
appusesignalr();

4.添加一个hub类

这里我们只实现一个小demo，一个简单的聊天室，多个人进入可以看到各自发送的信息：

public class chathub : hub
{
    public static list<string> connectedusers;

    public void send(string originatoruser, string message)
    {
      clientsallmessagereceived(originatoruser, message);
    }

    public void connect(string newuser)
    {
      if (connectedusers == null)
        connectedusers = new list<string>();

      connectedusersadd(newuser);
      clientscallergetconnectedusers(connectedusers);
      clientsothersnewuseradded(newuser);
    }
}

5.客户端支持

在wwwroot目录下创建一个名为chat.html的html静态文件，内容如下：

<!doctype html>
<html>
<head>
  <title>awesome chat application</title>
  <meta charset="utf-8" />
</head>
<body>
  <style type="text/css">
    userlistdiv{ float: right; }
  </style>
  <ul id="messages"></ul>
  <input type="text" id="messagebox" />
  <input type="button" id="sendmessage" value="send message!" />
  <div class="userlistdiv">
    <ul id="userlist"> </ul>
  </div>
 
  <script src="http://ajaxaspnetcdncom/ajax/jquery/jquery-minjs"></script>
  <script src="http://ajaxaspnetcdncom/ajax/signalr/jquerysignalr-minjs"></script>
  <script src="signalr/hubs"></script>
  <script src="chatjs"></script>
</body>
</html>

同目录下建立一个chat.js添加要实现功能的脚本：

var username = prompt("enter your name: ");
var chat = $connectionchathub;
chatclientmessagereceived = function (originatoruser, message) {
  $("#messages")append('<li><strong>' + originatoruser + '</strong>: ' + message);
};
chatclientgetconnectedusers = function (userlist) {
  for (var i = 0; i < userlistlength; i++)
    adduser(userlist[i]);
};
chatclientnewuseradded = function (newuser) {
  adduser(newuser);
}
$("#messagebox")focus();
$("#sendmessage")click(function () {
  chatserversend(username, $("#messagebox")val());
  $("#messagebox")val("");
  $("#messagebox")focus();
});
$("#messagebox")keyup(function (event) {
  if (eventkeycode == 13)
    $("#sendmessage")click();
});
function adduser(user){
  $("#userlist")append('<li>' + user + '</li>');
}
$connectionhublogging = true;
$connectionhubstart()done(function () {
  chatserverconnect(username);
});

最后我们来运行它吧：

四、最后

附上一个可用的demo：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网