Đếm số ngươi Online website với SignalR

SignalR là một thư viện cho phép các lập trình viên .Net đơn giản hóa việc xây dựng các chức năng xử lý real-time trong quá trình phát triển ứng dụng. Nó cho phép server đẩy nội dung tới client một cách tức thì ngay khi có sự kiện xẩy ra, chứ không phải server đợi client yên cầu rồi trả về nội dung tương ứng như giao thức HTTP truyền thống.

Các bạn có thể xem chi tiết hơn về SignalR tại: http://signalr.net/

Trong ví dụ này mình làm một chức năng nhỏ đó là đếm số người online trên website với SignalR, ngay khi có người connect vào website, server sẽ nhận biết và trả về client ngay lập tức.

 

1. Cài đặt SignalR

Đâu tiên các bạn cần chạy nuget command sau để cài đặt SignalR vào project (Tool -> NuGet Package Manager -> Package Manager Console)

Install-Package Microsoft.AspNet.SignalR -Version 2.2.2

 

2. Tạo class CounterHub.cs

- Trong project, tạo folder Hubs, trong folder Hubs tạo mới class CounterHub.cs

using Microsoft.AspNet.SignalR;

namespace thuyvk.com.Hubs
{
    public class CounterHub : Hub
    {
        private static int counter = 0;

        public override System.Threading.Tasks.Task OnConnected()
        {
            counter = counter + 1;
            Clients.All.UpdateCount(counter);
            return base.OnConnected();
        }

        public override System.Threading.Tasks.Task OnReconnected()
        {
            counter = counter + 1;
            Clients.All.UpdateCount(counter);
            return base.OnReconnected();
        }

        public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled)
        {
            counter = counter - 1;
            Clients.All.UpdateCount(counter);
            return base.OnDisconnected(stopCalled);
        }


    }
}

 

3. _Layout.cshtml

- Ở page Layout chúng ta cần đưa thư viện javascript của SignalR và viết hàm Javascript để update số người online được Server trả về.

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

    <script src="@Url.Content("~/Scripts/jquery.signalR-2.2.2.js")"></script>
    <script src="@Url.Content("~/signalr/hubs")"></script>
    <script>
        $(function () {
            //setup hubs
            var counterHub = $.connection.counterHub;
            $.connection.hub.start().done(function () {
                //do something after hub connected
            });
            //function receive data from server. server call in on code behind
            counterHub.client.UpdateCount = function (count) {
                $('#UserOnline').text(count);
            }
        });
    </script>

 

4. Index.cshtml

- Chúng ta cần thêm một thẻ html vơi id="UserOnline" để hiển thị số người online, ở ví dụ này mình sẽ để ở Index page

<h2>User Online Counter With SignalR</h2>
<h1 class="text-warning"><span id="UserOnline">0</span> Online</h1>

5. Startup.cs

- Cuối cùng ta cần gọi hàm app.MapSignalR(); trong Startup.cs

using Microsoft.Owin;
using Owin;

[assembly: OwinStartupAttribute(typeof(UserOnlineCounter.Startup))]
namespace UserOnlineCounter
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            //add this
            app.MapSignalR();
        }
    }
}

 

Bây giờ các bạn chạy project, mở page với nhiều trình duyệt khác nhau sẽ thấy số người online thay đổi ngay lập tức.

Các bạn có thể download ví dụ ở link dưới đây.

Download Source

Related Post


Sử dụng Bundling và Minification trong Web Forms để tối ưu thời gian tải trang
Friday, May 26, 2017
Bundling và Minification là hai công nghệ được sử dụng trong Asp.Net 4.5 để cải thiện và tối ưu thời gian tải trang của bạn. Bundling và Minification tối ưu thời gian tải bằng cách nhóm các file css & js lại với nhau (Bundling) , và tiến hành loại bỏ các khoảng trống, xuống dòng, comment để giảm kích thước file (Minification)...
Sử dụng Log4Net để ghi log trong Asp.Net
Monday, February 13, 2017
Log4Net là một thư viện mã nguồn mở, nó được thiết kế một cách linh hoạt với nhiều cách ghi log và định dạng log khác nhau. Bên cạnh đó sử dụng Log4Net cũng không ảnh hưởng đáng kể đến performance của hệ thống, hỗ trợ rất đắc lực cho chúng ta trong những trường hợp ghi log lỗi hệ thống, giúp nhanh chóng tìm ra lỗi để đưa ra cách khắc phục .
Search

Category

Blog Archive

Đăng ký nhận bài mới

Facebook Page