Building Web Apps with SignalR, Part 1

In the first installment of app-building with SignalR, learn how to build a real-time chat application.

More on this topic:

Are you sick of that dreaded page refresh? Want to turn your Web application up to 11? If you've answered yes to either question, SignalR is for you. With SignalR, you can provide content to your users in real-time, all from ASP.NET. Most importantly, it's compatible with browsers ranging all the way back to IE6! SignalR uses WebSockets on supported browsers and will fall back to server-side events, Forever Frame, or AJAX long polling if needed. This means you can use a single library and not have to worry about that minutia.

There are two approaches you can use with SignalR to achieve real-time communications: a persistent connection or a hub. The persistent connection API allows you to keep open a persistent connection between the client and server to send and receive data. The hub API is an abstraction above the persistent connection API, and is suitable for remote procedure calls (RPC).

This article will focus on the persistent connection API. I believe the best way to learn a new technology is to build something useful with it, so we'll create a chat client using SignalR. To get started, create a new C# ASP.NET MVC 4 project from Visual Studio 2012, then select the Web API option for your project type. Next, install the Microsft SignalR pre-release NuGet package through the NuGet Package Manager (Figure 1).


[Click on image for larger view.]
Figure 1. Installing the SignalR pre-release NuGet package.

In order to support IE 6 and 7, install the JSON-js-json2 NuGet Package as well, as shown inFigure 2.


[Click on image for larger view.]
Figure 2. JSON2 NuGet package installation.

Without further ado, let's get started on this app. First create a new folder in the project named Chat. Then create a new class named ChatConnection within the Chat directory that inherits from PersistentConnection. You'll need to add a using statement for the Microsoft.AspNet.SignalR namespace.

Now open up the RouteConfig class under the App_Start folder in the project. Add a using statement for the Microsoft.Asp.Net.Signal namespace to the RouteConfig class:

using Microsoft.AspNet.SignalR;

Next, register the ChatConnection class to the "chat" route in the RegisterRoutes method in the RouteConfig class:

RouteTable.Routes.MapConnection<ChatConnection>("chat","chat/{*operation}");

Your completed RouteConfig class should resemble Listing 1.

Now to create the ChatData data structure that will be used to interchange data between the client and the server. Create a new class named ChatData with Message and Name string data type properties:

namespace VSMSignalRSample.Chat
{
public class ChatData
{
public string Name { get; set; }
public string Message { get; set; } public ChatData()
{
} public ChatData(string name, string message)
{
Name = name;
Message = message;
}
}
}

Now it's time to finish implementing the ChatConnection class, which will receive and broadcast chat messages. Add using statements for the System.Threading.Tasks and Newtonsoft.Json namespaces. Next, add a private Dictionary<string, string> to store the clients that connect to the chat room:

private Dictionary<string, string> _clients = new Dictionary<string, string>();

The PersistentConnection base class includes functionality for dealing asynchronously with a few critical server-side events such as a new connection, disconnection, reconnection and data retrieval. Let's implement the OnConnectedAsync event handler first. When a new user first joins the room, they're added to the _clients Dictionary object, which will be used to map the user's chosen chat name with their connectionId. Then a broadcast message is sent to all users, letting them know a new user has joined the chat room:

protected override Task OnConnectedAsync(IRequest request, string connectionId)
{
_clients.Add(connectionId, string.Empty);
ChatData chatData = new ChatData("Server", "A new user has joined the room.");
return Connection.Broadcast(chatData);
}

Now it's time to tackle data retrieval from a connected client through the OnReceivedAsync event handler. First, the JSON data object from the client is desterilized into a ChatData object through JSON.NET. Then the user's name is stored in the _clients dictionary. Finally, the user's ChatData is broadcast to all users:

protected override Task OnReceivedAsync(IRequest request, string connectionId, string data)
{
ChatData chatData = JsonConvert.DeserializeObject<ChatData>(data);
_clients[connectionId] = chatData.Name;
return Connection.Broadcast(chatData);
}

The last event to handle is client disconnection, via the OnDisconnectedAsync method. When a user disconnects, he or she is removed from the _clients dictionary. Then a message is broadcast to all users, letting them know a user has left the room:

protected override Task OnDisconnectAsync(IRequest request, string connectionId)
{
string name = _clients[connectionId];
ChatData chatData = new ChatData("Server", string.Format("{0} has left the room.", name));
_clients.Remove(connectionId);
return Connection.Broadcast(chatData);
}

Now it's time to create the client-side JavaScript that will communicate with the persistent chat connection to display incoming chat messages and chat room events to the user. Create a new JavaScript file named ChatR.js within the Scripts folder. The first step is to retrieve the server chat connection object through the SignalR JavaScript plug-in:

var myConnection = $.connection("/chat");

Next, the received event is set up to display a received chat message as a new list item element in the messages unordered list DOM element:

myConnection.received(function (data) {
$("#messages").append("<li>" + data.Name + ': ' + data.Message + "</li>");
});

After that, the error handler for the connection is set up to display a console warning. This is mainly to ease debugging of the chat connection:

myConnection.error(function (error) {
console.warn(error);
});

Lastly, a connection is initiated to the chat server and a continuation is set up to handle the message send button-click event. Within the button-click event handler, the user's name and message are retrieved from the name and message text boxes, respectively. Then the user's name and message are sent to the chat server as a JSON object, as shown in Listing 2.

Now it's time to set up the UI for the Web application. Add a new MVC View class to the Home directory, named ChatR, that binds to the Chat.ChatData model. In the bottom of the view add a script reference to the ~/Sciprts/ChatR.js script created earlier:

@{
ViewBag.Title = "Chat";
} <h2>Chat</h2> @using (Html.BeginForm()) {
@Html.EditorForModel(); <input id="send" value="send" type="button" />
<ul id="messages" style="list-style:none;"></ul>
} @section Scripts { <script src="~/Scripts/ChatR.js"></script> }

Now, add a controller action method named ChatR to the HomeController that returns a new view bound to an empty Chat.ChatData object:

public ActionResult ChatR()
{
var vm = new Chat.ChatData();
return View(vm);
}

That's it: sit back, relax and invite a few friends to try out your new chat app, shown in Figure 3.


[Click on image for larger view.]
Figure 3. The completed real-time chat application.

As you can, see SignalR is quite easy to work with and the PersistentConnection API is very flexible. With SignalR, you can tackle a plethora of real-time Web app use cases from business to gaming. Stay tuned for the next installment, which covers how to use the SignalR Hub API to create a dynamic form.

More on this topic:

About the Author

Eric Vogel is a Sr. Software Developer at Kunz, Leigh, & Associates in Okemos, MI. He is the president of the Greater Lansing User Group for .NET. Eric enjoys learning about software architecture and craftsmanship, and is always looking for ways to create more robust and testable applications. Contact him at vogelvision@gmail.com.

Building Web Apps with SignalR, Part 1的更多相关文章

  1. Building Modern Web Apps-构建现代的 Web 应用程序

    Building Modern Web Apps-构建现代的 Web 应用程序 视频长度:1 小时左右 视频作者:Scott Hunter 和 Scott Hanselman 视频背景:Visual ...

  2. Isomorphic JavaScript: The Future of Web Apps

    Isomorphic JavaScript: The Future of Web Apps At Airbnb, we’ve learned a lot over the past few years ...

  3. Why mobile web apps are slow

    http://sealedabstract.com/rants/why-mobile-web-apps-are-slow/ I’ve had an unusual number of interest ...

  4. Isomorphic JavaScript: The Future of Web Apps(译)

                                                                                                 Isomorp ...

  5. appium(4)-Automating mobile web apps

    Automating mobile web apps If you’re interested in automating your web app in Mobile Safari on iOS o ...

  6. 在线文档预览方案-office web apps续篇

    上一篇在线文档预览方案-office web apps发布后收到很多网友的留言提问,所以准备再写一篇,一来介绍一下域控服务器安装,总结一下大家问的多的问题,二来宣传预览服务安装与技术支持的事情. 阅读 ...

  7. 安装部署完office web apps 后,无法浏览Word

    安装部署完office web apps 后,在sharepoint 2010浏览器中浏览Word提示:“由于出现意外错误,Word Web App 无法打开此 文档 进行查看. 要查看此 文档,请在 ...

  8. 在线文档预览方案-office web apps

    最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫.只能考虑 ...

  9. 免费电子书:Azure Web Apps开发者入门

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:之前介绍过微软正在逐步出版一个名为Azure Essential的入门系列教程,最近刚 ...

随机推荐

  1. apply 与arguments的用法

    一个小练习: 用一个 函数来代替console.log()的功能 function log(a){ console.log.apply(null,arguments);//arguments 是传的实 ...

  2. SKNode类

    继承自 UIResponder:NSObject 符合 NSCodingNSCopyingNSObject(NSObject) 框架  /System/Library/Frameworks/Sprit ...

  3. CI框架源代码阅读笔记5 基准測试 BenchMark.php

    上一篇博客(CI框架源代码阅读笔记4 引导文件CodeIgniter.php)中.我们已经看到:CI中核心流程的核心功能都是由不同的组件来完毕的.这些组件类似于一个一个单独的模块,不同的模块完毕不同的 ...

  4. 设计模式(二)工厂模式Factory (创建型)

    工厂模式分为三种:简单工厂模式 (Simple Factory) .工厂方法模式(Factory Method).抽象工厂模式(Abstract Factory) //举例:发送邮件和短信的例子 /* ...

  5. 第一章 工欲善其事 必先利其器—Android SDK工具(3)

    1.3没有真机一样开发--Android模拟器 有些时候,我们手头上可能并没有符合要求的Android设备.那么这时候我们是不是对调试或者开发就一筹莫展了呢?当然不是.由于我们有Android模拟器. ...

  6. linux经常使用命令

    linux经常使用命令 pwd 查看当前工作文件夹的绝对路径 cat input.txt 查看input.txt文件的内容 ls 显示当前文件夹下全部的文件及子文件夹 rm recommender-d ...

  7. VC2010对Excel的操作

    1. 创建新的C++工程 创建基于对话框的MFC程序 2. 添加库.添加Excel类库 在工程名上右键,选择“添加”—“类”(或者点击菜单栏的“项目”->“添加类”),选择“TypeLib中的M ...

  8. 逆拓扑排序 HDU2647Reward

    这个题如果用邻接矩阵的话,由于n比较大,会超内存,所以选用邻接表的形式.还有就是这个题有那个等级的问题,一级比一级的福利高,所以不能直接拓扑排序,而是反过来,计算出度,找出度为0的顶点,然后更新出度数 ...

  9. 转载-- C/S 与 B/S 区别

    C/S 与 B/S 区别   C/S结构,即Client/Server(客户机/服务器)结构,是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了系统的通讯开销,可 ...

  10. pointer-events属性

    pointer-events的风格更像JavaScript,它能够: 1.阻止用户的点击动作产生任何效果.阻止缺省鼠标指针的显示3.阻止CSS里的hover和active状态的变化触发事件4.阻止Ja ...