使用SignalR构建聊天应用程序

SignalR是面向ASP.NET开发人员的开源库。 这等效于Socket.IO用于Node.js（如果需要，您可以在Stack Overflow上进行比较 ）。 SignalR可用于为您的应用程序提供实时Web功能。 通常，如果您喜欢Ember和JavaScript，则可能会倾向于选择Socket.IO并坚持使用JavaScript。 我选择SignalR的原因之一是它具有更扩展的文档和一些参考资源。 此外，您可以免费获得ASP.NET world的所有好处。

在本文中，我将向您展示如何使用SignalR构建简单的聊天应用程序。 如果尚未完成，建议您阅读上一篇名为“ 使用Socket.IO的聊天应用程序 ”，以更全面地了解这些主题，然后比较两种方法的优缺点。

ember-cli入门

我们将首先创建一个新的Ember应用程序，然后使用ember-cli 。 首先，让我们安装一些依赖项：

$ ember new chatr
$ ember install semantic-ui-ember

在这里，我们将安装语义UI ，这是一个开发框架，可以使用人类友好的HTML帮助创建美观，响应式的布局。 它与Bootstrap非常相似，它将帮助我们确定网站的布局和主题。 完成后，我们必须将其导入到应用程序中。

现在， Brocfile.js添加到Brocfile.js文件中：

app.import('bower_components/semantic-ui/dist/semantic.css');
app.import('bower_components/semantic-ui/dist/semantic.js');

现在，我们准备创建路线并添加一些模板。 为此，请执行以下命令：

$ ember g route chat

这将创建我们的Ember路线app/routes/chat.js和模板app/templates/chat.hbs 。 在向模板添加任何内容之前，我们将使用一些Ember组件来封装模板并使它们可重用。 让我们从chat-room组件开始：

$ ember g component chat-room
$ ember g component chat-userlist
$ ember g component chat-area
$ ember g component chat-useritem

如您所见，我们有很多组件。 每个组件都有一个关联的模板文件（ app/templates/components/chat-room.hbs ）和一个Ember组件脚本文件（ app/components/chat-room.js ）。 这样，我们可以隔离聊天功能，从而易于测试和推理。 此时，我们可以将chat-room添加到我们的聊天路由中：

{
     {#chat-room
  users=room.users
  messages=room.messages
  topic=room.topic
  onSendChat="sendChat"}}{
     {/chat-room}}

users ， messages和topic是我们传递给组件的数据，而onSendChat是由组件触发的操作。 如果您想加深这些概念，可以阅读Ember指南以获得更多信息 。

最后，我们需要一个Ember控制器（以处理聊天路由的逻辑）和一些Ember模型。 为此，请执行以下命令：

$ ember g controller chat
$ ember g model chat-room
$ ember g model chat-user
$ ember g model chat-message

模型是从Ember.Object继承的有用类。 他们将保存我们的数据并提供与模板的数据绑定。 控制器执行相同的操作，控制器装饰模型并也可以处理用户操作。

打开app/controllers/chat.js文件，并向其中添加以下代码：

export default Ember.Controller.extend({
  initRoom: function(users, messages, topic) {
    var room = Room.create({
      users: users,
      messages: messages,
      topic: topic
    });

    this.set('room', room);
  },

  addMessage: function(msg) {
    var room = this.get('room');
    room.get('messages').addObject(msg);
  },

  userJoin: function(user) {
    var room = this.get('room');
    room.get('users').addObject(user);
  },

  actions: {
    sendChat: function(msg) {
      // use these methods here to test if they are working
      //this.addMessage('ME', msg);
      //this.userJoin(msg);
    }
  }
});

addMessage()和userJoin()是在需要添加新聊天消息或新用户时可以调用的辅助方法。 sendChat是用户要发送消息时触发的动作处理程序。 initRoom()是用于设置绑定的构造函数。 您可以在我们的聊天路线的setupController()挂钩中使用空数据调用它，以测试一切是否正常运行。

现在，通过添加以下代码来编辑app/routes/chat.js文件：

export default Ember.Route.extend({
  setupController: function(controller) {
    // use this method to test everything is working when data is bound.
    //controller.initRoom([],[], 'hello world');
  }
});

使用SignalR构建服务器端

我们在使用SignalR时需要使用的另一个有用的工具是Visual Studio 。 下载之后，打开它并创建一个新的Empty Web Application项目，并使用“程序包管理器控制台”安装所需的程序包：

Install-Package Microsoft.AspNet.Signalr

该命令将安装SignalR及其所有依赖项，包括“ Microsoft.Owin”。 然后，我们继续创建OWIN启动类以引导我们的服务器。 为此，我们将在App_Start/Startup.cs文件中包含以下代码：

public class Startup {
  public void Configuration(IAppBuilder app) {
    app.MapSignalR();
  }
}

就是运行基于OWIN的Web服务器。 我们将SignalR中间件添加到OWIN，但是您可以根据需要添加其他中间件（例如身份验证或Web API）。 现在可以通过按F5键来启动我们的SignalR应用程序。 我们没有托管任何数据，因此浏览器不会显示任何对我们有用的信息。 该JavaScript代码由SignalR动态生成，并可供我们的Ember应用程序使用。 它为我们提供了JavaScript方法，这些方法将进一步在服务器端调用方法。

创建大厅中心

集线器类用于与客户端通信。 它可以在客户端上调用方法，并定义从客户端调用的方法。 每当新客户端连接或对服务器进行方法调用时，SignalR都会创建一个新的Hub类。 现在，让我们看看如何创建大厅Hub：

public class Lobby : Hub {
    private IChatRRepository _repository;

    public Lobby(IChatRRepository repository) {
      _repository = repository;
    }

    public void Join(string name) {
      ChatUser currentUser = new ChatUser(name, Context.ConnectionId);
      _repository.AddUser(currentUser);

      var users = _repository.Users.ToList();
      var topic = "Welcome to EmberJS on SignalR";

      Clients.Caller.lobbyEntered(topic, users);
    }

    public void SendChat(string msg) {
      ChatUser user = _repository.GetUserById(Context.ConnectionId);
      Clients.All.chatSent(user.Name, msg);
    }

    public override Task OnDisconnected(bool stopCalled) {
      _repository.RemoveUser(Context.ConnectionId);
      return base.OnDisconnected(stopCalled);
    }
  }

根据每个客户端请求，SignalR实例化一个新的Hub实例。 集线器不维护任何客户端状态。 因此，我们需要某种数据库来跟踪客户端状态。 IChatRepository接口通过提供诸如AddUser() ， RemoveUser()和Users()来检索所有用户，从而为我们提供了所需的状态。 可以从客户端调用Hub方法，并且Hub类可以使用Clients属性调用客户端方法。

在下面，您可以找到一个列表，该列表指定哪些客户端将接收该方法调用：

• Clients.All.someMethod() ：所有连接的客户端
• Clients.Caller.someMethod() ：仅主叫客户端
• Clients.Others.someMethod() ：除调用Clients.Others.someMethod()所有客户端
• Clients.Client(Context.ConnectionId).someMethod() ：特定的客户端

如您所见，它具有直观的API。 someMethod()是动态调度的，因此可以是任何东西。 有关Hubs API的更多信息，请参阅指南 。

回到我们的示例，我们有两个Hub方法： Join()和SendChat() 。 客户端连接时，它将使用username调用Join() 。 我们将用户添加到我们的仓库和呼叫lobbyEntered()的方法Clients.Caller 。

客户端发送聊天消息时，将调用SendChat()方法。 我们从存储库中检索调用方，并通过调用Clients.All.chatSent()方法将消息广播到所有连接的客户端。 反过来，它在所有连接的客户端上调用chatSent()方法。

最后，有些方法（例如OnConnected()和OnDisconnected()可以重写，以便在用户连接/断开连接时得到通知。 有关SignalR API的更多信息，请参阅《 SignalR指南》 。

使用Ember在客户端上设置SignalR

现在，让我们回到客户端应用程序并集成SignalR。 首先，使用Bower安装SignalR：

$ bower install signalr --save

接下来，将其导入我们的应用程序。 为此，请再次打开Brocfile.js文件并添加以下行：

app.import('bower_components/signalr/jquery.signalR.js');

最后，在您的app/index.html页面中包含http://localhost:/signalr/hubs脚本：

在此阶段中，请注意元素的顺序，这很重要，因为SignalR是作为jQuery插件导出的。 因此，我们需要首先包含jQuery（在assets/vendor.js内部），然后在/signalr/hubs包含动态脚本文件，最后在它之上包含我们的应用程序（ assets/chatr.js ）。

使用Ember初始化程序将SignalR注入聊天路由

当我们的应用程序启动时，我们必须创建一个SignalR连接，然后在我们的控制器中使用它。 这里的架构取决于您。 我们将使用Ember初始化程序将SignalR注入到我们的路由中。 让我们看看如何使用先前引用的ember-cli创建它。

$ ember g initializer signalr

现在让我们初始化SignalR并将其注入到我们的路由中。 以下代码片段进入app/initializer/signalr.js文件：

import SignalRConnection from 'chatr/utils/net/chatr-realtime';

export function initialize(container, application) {
  var realtime = new SignalRConnection('http:/localhost:/signalr');
  
  application.register('realtime:signalr', realtime, { instantiate: false });

  application.inject('route:chat', 'signalr', 'realtime:signalr');
}

SignalRConnection是SignalRConnection的包装类，它肯定会使我们的生活更轻松。 我们创建它，并使用依赖注入将其注入聊天路由。 同样， 如果您需要更多信息，请参阅完整的Ember指南 。

您可以检出SignalRConnection类以了解其实现方式。 这里有两种有趣的方法：

configureHubs(ctrl) {
  this.OnLobby = new LobbyCallbacks(this, ctrl);

  var lobby = Ember.$.connection.lobby;

  lobby.client['lobbyEntered'] = this.OnLobby['lobbyEntered'];
  lobby.client['chatSent'] = this.OnLobby['chatSent'];
}

在开始SignalR连接之前，我们需要设置服务器可以在大厅集线器上调用的客户端方法。 Ember.$.connection是我们的SignalR连接，而Ember.$.connection.lobby是我们的大厅枢纽。 这些是在动态生成的SignalR代码中定义的。 我们通过将方法分配给我们的大厅中心上的client属性（即Ember.$.connection.lobby.client属性）来设置方法。

在我们的示例中，它们在LobbyCallbacks类中定义：

start(name) {
  var self = this;

  var hub = Ember.$.connection.hub;

  hub.error(function(reason) {
    console.log('connection error: ' + reason);
  });

  return hub.start({
    withCredentials: false
  }).then(function() {
    console.log('connected');
    Ember.$.connection.lobby.server.join(name);
  });
}

定义客户端方法后，我们可以使用此方法启动应用程序。 首先，我们获得对Ember.$.connection.hub的引用，在这里我们设置error钩子以获取有关任何连接错误的通知。 最后，我们运行一个start调用以启动连接，并有一个诺言。

连接后，我们称为Ember.$.connection.lobby.server.join() 。 此方法将在服务器端Lobby Hub上调用Join()方法。 有关SignalR客户端API的更多信息，请访问SignalR指南 。

与CORS打交道

此时，我们可以从Ember应用程序连接到服务器。 但是，我们可能会遇到一些浏览器错误，如下所示：

XMLHttpRequest cannot load http://localhost:53246/signalr/negotiate?clientProtocol=1.5&connectionData=%5B%7B%22name%22%3A%22lobby%22%7D%5D&_=1433597715652. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.56.103:4200' is thus, so not allowed access.

此错误可能是由于您的服务器和客户端位于不同的域中引起的。 您需要允许服务器上的CORS绕过它。 因此，让我们在Visual Studio软件包管理器控制台上安装软件包：

Install-Package Microsoft.Owin.Cors

然后，配置Owin中间件以允许跨域请求（编辑App_Start/Startup.cs文件）：

public void Configuration(IAppBuilder app) {
  app.Map("/signalr", map =>
  {
    var corsPolicy = new CorsPolicy
    {
      AllowAnyHeader = true,
      AllowAnyMethod = true
    };

    // Add the domain where your client is hosted on.
    corsPolicy.Origins.Add("http://192.168.56.103:4200");
    map.UseCors(new CorsOptions
    {
      PolicyProvider = new CorsPolicyProvider {
      PolicyResolver =
        r => Task.FromResult(corsPolicy)
      }
    });

    map.RunSignalR(config);
  });
}

结论

在本文中，我们已经看到了如何通过几个简单的步骤将SignalR与Ember粘合在一起并创建聊天应用程序。 如果您想看到它的实际效果，可以在chatembar上观看一个有趣的现场演示 ，如果您想动手做项目，则可以在GitHub上找到完整的源代码，包括客户端和服务器端 。 此外，您可以参考另一个使用SignalR的协作聊天应用程序的出色示例，称为JabbR 。

我强烈建议您加深一些要点，我没有机会在本文中介绍：OWIN和身份验证。 好消息是SignalR不需要任何特殊的授权，因为它可以与现有的ASP.NET身份验证解决方案（例如ASP.NET Identity）一起使用。

如果您想了解更多，这里有一些有关Owin，SignalR和ASP.NET Identity的有用资源：

• 使用ASP.NET Web API 2，Owin和身份的基于令牌的身份验证
• 向现有的ASP.NET MVC应用程序中添加最少的OWIN身份验证
• ASP.NET Identity推荐资源
• 这是Owin Stuff的事吗？
• Katana项目入门
• Nancy：轻便，低礼仪的框架，用于在.Net和Mono上构建基于HTTP的服务

From: https://www.sitepoint.com/building-chat-application-signalr/