使用Signalr构建聊天应用程序

>本教程演示了使用SignalR构建一个简单的聊天应用程序，该应用程序是ASP.NET开发人员的开源库。 SignalR提供了实时Web功能，类似于Node.js的socket.io。 虽然socket.io可能是Ember等JavaScript框架的首选，但Signalr提供了广泛的文档并利用ASP.NET生态系统的好处。 本教程假设熟悉ember.js。

密钥概念：

• signalr：一个强大的库，用于在ASP.NET应用程序中添加实时功能。 它简化了构建Interactive Web应用程序的过程。
• ember.js组件：可重复使用的UI元素，这些元素封装功能并改善代码组织。 本教程利用聊天室，用户列表，聊天区域和各个用户项目的组件。
• >ember控制器和模型：分别管理应用程序逻辑和数据绑定，提供了一种结构化方法来处理聊天数据。>
• > Signalr Hubs：服务器端组件，可促进服务器与客户端之间的通信。 本教程使用“大厅”集线器来管理用户连接和消息。>
CORS（交叉原始资源共享）：
• 解决服务器和客户端驻留在不同域上时的潜在问题。 适当的CORS配置对于成功的通信至关重要。> Ember CLI开始：

>

创建一个新的Ember应用程序：

1. 安装依赖项：ember new chatr（语义UI提供了一个响应式布局框架）。
2. 导入语义UI：将以下行添加到ember install semantic-ui-ember>：
>
3. 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 g component chat-room
ember g component chat-userlist
ember g component chat-area
ember g component chat-useritem
ember g controller chat
ember g model chat-room
ember g model chat-user
ember g model chat-message

组件集成到

路由的模板（
5. ）中：chat-room> chat app/templates/chat.hbs 使用SignalR（使用Visual Studio）：

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

服务器端开发：>

>在Visual Studio中创建一个新的空Web应用程序。

1. 安装SignalR软件包：
2. Install-Package Microsoft.AspNet.Signalr创建OWIN启动类（
）：
3. > App_Start/Startup.cs

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

创建大厅集线器（

）：此中心处理用户连接，消息广播和用户管理。 （为简洁而省略了实施详细信息，但原始响应提供了代码。）>
4. 与Ember和Signalr：Lobby.cs

1. >使用Bower安装Signalr： bower install signalr --save
>导入信号将您的ember应用程序（
2. >）：> Brocfile.js

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

在

>中包含signalr hubs脚本：
3. > app/index.html

ember g route chat
ember g component chat-room
ember g component chat-userlist
ember g component chat-area
ember g component chat-useritem
ember g controller chat
ember g model chat-room
ember g model chat-user
ember g model chat-message

>创建一个Ember Initializer来管理SignalR连接（
4. ）：（为简洁而省略了实现详细信息，但原始响应提供了代码。）此初始化程序使用实用程序类来简化Signalr交互。 >

   app/initializers/signalr.js SignalRConnection处理CORS：安装

   nuget软件包，并在文件中配置CORS中间件，以允许您的Ember应用程序中的跨域请求。 （实施详细信息在原始响应中。）
>

5. Microsoft.Owin.CorsStartup.cs结论：

此修订的响应提供了该过程的更简洁，更结构化的概述，突出了使用SignalR和Ember构建实时聊天应用程序所涉及的关键组件和步骤。 原始响应包含每个组件的详细代码片段，此处省略了此处的简洁性，但在原始输出中很容易获得。 请记住要查阅原始响应以完成完整的代码实施。

>

以上是使用Signalr构建聊天应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！