SignalR – Web thời gian thực với .NET


Nửa đêm loay hoay không ngủ được, nên chăng viết 1 bài giết thời gian.

Nhớ lại cách đây khoảng 1 năm, mình lọ mọ viết một trang mạng xã hội, giống giống FB. Lúc đấy cú lắm không biết làm sao để có notification xịn như FB, cứ comment hay làm gì nó lại báo mình luôn. Thèm thế. Và giờ ta có SignalR, comes to rescue!

SignalR là gì

SignalR là 1 thư viện viết cho .NET giúp xây dựng các ứng dụng web sử dụng tương tác thời gian thực giữa người dùng với máy chủ.

Mô hình bình thường của web là client gửi request đến server, nhưng giờ ta có 1 cách thức nữa để tương tác: server “push” trực tiếp dữ liệu về client, theo thời gian thực. Ngoài ra, mô hình này cũng giúp ta xây dựng ứng dụng bất đồng bộ lên đến hàng nghìn kết nối 1 lúc với máy chủ.

Nó hoạt động dư lào

Có 4 giao thức mà lần lượt signalR sẽ sử dụng, tùy theo từng trường hợp (sự hỗ trợ từ server và client):

  1. WebSockets (chỉ chạy trên server ASP.NET 4.5 / IIS 8)
  2. Server Sent Events
  3. Forever Frame
  4. Ajax Long Polling

Trong đó, cách 4 là cách thường dùng trong những trường hợp thế này từ trước đến giờ. Cách 1 WebSockets mình chưa được thử do điều kiện không cho phép :)

Đầu tiên Client sẽ gửi request đến cho server, rồi server tùy tình hình sẽ gửi trả lại giao thức phù hợp. Ví dụ như IIS 6 thì chẳng bao giờ cần thử WebSockets vì có bao giờ hỗ trợ đâu. Client nhận được sẽ tiến hành “thử” kết nối đến server, khi tạo được kết nối rồi sẽ duy trì nó.

Demo cho dễ hiểu

Lưu ý đây chỉ là bài “preview”, không phải hướng dẫn chi tiết. Nếu có điều kiện mình sẽ đi sâu vào sau.

Mình làm demo chương trình chat client-client trên VS11 Beta + MVC 4, các bạn dùng VS2010 và MVC3 cũng không gặp vấn đề gì. Yêu cầu các bạn có kiến thức cơ bản về ASP.NET MVC.

Đầu tiên bạn tạo 1 web project. Từ cửa sổ Package Console Manager gõ

Install-Package SignalR

Vậy là cài xong SignalR qua Nuget, nó đã tự động add reference thư viện SignalR và SignalR.Hosting.AspNet. Bây giờ ta tiến hành thực hiện demo.

Thêm 1 class Chat vào project và kế thừa class Hub của SignalR. Hub đóng vai trò như 1 cái … Hub, trung chuyển data cho các clients.

    public class Chat : Hub
    {
        public void Connect(string name)
        {
            Clients.clientConnected(name + " connected.");
        }

        public void Send(string name, string message)
        {
            Clients.broadcast(name + " @" + DateTime.Now.ToShortTimeString() + ": " + message);
        }
    }

Vậy là xong phần Server. Chi tiết mình sẽ giải thích sau. Mở file Index.cshtml, sửa lại như sau:

@{
 ViewBag.Title = "Home Page";
 }
 @section Header
 {
 <script src="~/Scripts/jquery.signalR.min.js" type="text/javascript"></script>
 <script src="~/signalr/hubs" type="text/javascript"></script>
 <script type="text/javascript">
 var chat = $.connection.chat;
 chat.broadcast = function (message) {
 $('#messages').prepend('<p>' + message + '</p>');
 };
chat.clientConnected = function (message) {
 $('#messages').prepend('<p>' + message + '</p>');
 };
// Start the connection
 $.connection.hub.start().done(function () {
 chat.connect($('#name').val());
 $('form').submit(function () {
 chat.send($('#name').val(), $('#messagebox').val());
 $('#messagebox').val('').focus();
 return false;
 })
 });
 </script>
 }
 <h3>Chit chat</h3>
 <form>
 <div id="connect-div">
 <input type="text" id="name" placeholder="Your name" />
 </div>
 <div id="chat-div">
 <input type="text" id="messagebox" placeholder="Message" />
 <input type="submit" id="send" value="Send" />
 </div>
 </form>
 <div id="messages"></div>

Có thể thấy có sự tương đồng trong code giữa client và server:

  1. Client và server tương tác với nhau qua 1 hub tên là “Chat”.
  2. Client phát sinh hành động “send” thì server sẽ nhận được data tương ứng.
  3. Server truyền lại data qua method “broadcast”. Tất cả clients đều nhận được.

Và đây là kết quả:

Thử chạy trên 2 browser, chat rất mượt, hầu như không lag :)

Nói chung, thư viện SignalR mở ra 1 tương lai tươi sáng cho web tương tác, hứa hẹn cho nhiều trò vui ứng dụng công nghệ này.

7 thoughts on “SignalR – Web thời gian thực với .NET

  1. Mình cũng đang làm về phần này và thấy khá là ok với lib này , chứ code real time = nodejs với nowjs mình chưa làm. Cái này kết hợp no sql nữa thì ngon !

    • Chào bạn.

      Mình cũng đang nghiên cứu về mảng này. Bạn có thể giải thích dõ hơn về 4 giao thực mà signarl sử dụng được không.

      Việc sử dụng các giao thức này có hạn chế gì không. Ví dụ có bị tường lửa, các phần mềm diệt virus chặng không.

    • Chào bạn.

      Mình cũng đang tìm hiểu thằng này. Hiện tại việc tại ra một ứng dụng chat thì không có gì phức tạp nhưng các vấn đề như bảo mật, cơ chế bất đồng bộ. Các clientId, group client mình vẫn chưa hiểu dõ.

      Bạn có thể chia sẻ thêm được không.

      Nếu có thể xin pm sky: humg.thongit để trao đổi cho tiện

      Xin cảm ơn.

  2. Anh có biết về kỹ thuật long polling và xây dựng ứng dụng tương tác dựa trên http long polling. Có thể chỉ dùm em với.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s