Sử dụng ASP.NET SignalR API để tạo chương trình Chat

Giới thiệu

ASP.NET SignalR API được sử dụng để tạo ra ứng dụng chat, nơi bạn có thể trò chuyện nhóm và trò chuyện riêng tư với người dùng. Bạn cần Visual Studio 2012 Express Development để tạo ra dự án này. Bạn có thể biết thêm chi tiết về http://www.asp.net/signalr

Tạo một dự án ứng dụng web mới trong visual studio và trong Solution Explorer, Kích chuột phải vào Project, chọn Add> New Item và chọn mục SignalR Hub Class. Đặt tên lớp và nhấn nút Add. Nó sẽ thêm lớp Hub, các reference và script yêu cầu.

Bạn có thể xem thêm kịch bản và tham chiếu bằng cách mở rộng nút ‘Scripts’ and ‘References’

Đăng ký URL Hub

Sử dụng SignalR API, chúng ta cần phải đăng ký URL ~/signalr/hubs. Thêm tập tin global.asax trong íolution và trong đăng ký phương thức Application_Start sử dụng lệnh RouteTable.Routes.MapHubs().

  public class Global : System.Web.HttpApplication
 {

    protected void Application_Start(object sender, EventArgs e)
    {
        // Register the default hubs route: ~/signalr/hubs
        RouteTable.Routes.MapHubs();
    }

Lớp Hub

Lớp ChatHub phải được thừa kế từ lớp Microsoft.AspNet.SignalR.Hub. Class Hub cho thấy một số thuộc tính và phương thức. Sử dụng thuộc tính máy khách, bạn có thể giao tiếp với máy khách được kết nối. Bạn có thể nhận được thông tin của máy khách ai đang gọi phương thức sử dụng Context và bạn cũng có thể quản lý các nhóm sử dụng thuộc tính Groups.

public abstract class Hub : IHub, IDisposable
{

  public HubConnectionContext Clients { get; set; }
  public HubCallerContext Context { get; set; }
  public IGroupManager Groups { get; set; }

  public virtual Task OnConnected();
  public virtual Task OnDisconnected();
  public virtual Task OnReconnected();

}

Lớp dẫn xuất có thể ghi đè lên OnConnected, OnDisconnected, rất hữu ích để thực hiện một số hành động trên những sự kiện này. Lớp ChatHub có nguồn gốc từ lớp Hub và chúng ta sẽ thảo luận về phương thức của nó trong phần sắp tới.

public class ChatHub : Hub
 {

    public void Connect(string userName);

    public void SendMessageToAll(string userName, string message);

    public void SendPrivateMessage(string toUserId, string message);

    public override System.Threading.Tasks.Task OnDisconnected();

    .
    .
    .

 }

Máy Khách gọi phương thức Connect khi muốn tham gia phòng chat. Cho gửi tin nhắn trong phòng chat để tất cả các máy khách kết nối, nó gọi SendMessageToAll, Đối với trò chuyện riêng với máy khách gọi phương thức SendPrivateMessage.

Proxy ở phía Máy khách

Thêm trang mới index.html trong Solution và thiết lập các tham chiếu của JQuery, SignalR và sinh tự động các hub.

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

  
 <script src="Scripts/jquery.signalR-1.0.0.js"></script>

  
 <script src="signalr/hubs"></script>

Ở phía máy khách mà bạn cần để tạo ra hub proxy và bắt đầu proxy. Bạn có thể tạo hub proxy sử dụng .connection.yourHubClass và sau đó bắt đầu hub sử dụng phương thức .connection.hub.start().

<script type="text/javascript">

  $(function () {

     // Declare a proxy to reference the hub.
     var chatHub = $.connection.chatHub;

     registerClientMethods(chatHub);

     // Start Hub
     $.connection.hub.start().done(function () {

        registerEvents(chatHub)

     });

  });

 </script>

Import được chú ý ở đây là quy ước đặt tên được sử dụng trong tự động tạo ra quyền hub. Tôi đặt tên lớp của chúng ta là ChatHub tại máy chủ trong trường hợp camel nhưng ở phía máy khách, tôi đang nhận được nó trong trường hợp camel thấp như $$connection.chatHub

Kết nối với Chat Room

Người sử dụng trong phòng chat kết nối với các phòng chat bằng cách thông qua tên của mình và trên các kết nối thành công. Phương thức đầu tiên của chúng ta trong lớp ChatHub là Connect.

public void Connect(string userName)
 {

    var id = Context.ConnectionId;

    if (ConnectedUsers.Count(x => x.ConnectionId == id) == 0)
    {

        ConnectedUsers.Add(new UserDetail { ConnectionId = id, UserName = userName });

        // send to caller
        Clients.Caller.onConnected(id, userName, ConnectedUsers, CurrentMessage);

        // send to all except caller client
        Clients.AllExcept(id).onNewUserConnected(id, userName);

    }

 }

Nhận được id kết nối của máy khách kêu gọi phương thức Connect sử dụng thuộc tính Context.ConnectionId. Kiểm tra id trong danh sách máy khách kết nối hiện tại. Nếu nó không tồn tại thì thêm nó vào danh sách. Bây giờ chúng ta cần phải làm hai bước. Trước tiên chúng ta phải gửi danh sách các máy khách hàng đã kết nối và danh sách bài viết mới cho máy khách muốn kết nối và thứ hai, chúng ta đã thông báo cho máy khách kết nối khác về người tham gia mới.

Vì vậy, chúng ta có thể dễ dàng gọi phương thức phía máy khách muốn kết nối bằng thuộc tính Clients.Caller.

// send to caller
  Clients.Caller.onConnected(id, userName, ConnectedUsers, CurrentMessage);

Thông báo cho máy khách kết nối khác về máy khách mới, nhưng chúng ta không muốn gọi phương thức của máy khách mới được kết nối. Sử dụng thuộc tính AllExcept của Clients, trong đó có thể bao gồm một số máy khách theo mong muốn.

// send to all except caller client
 Clients.AllExcept(id).onNewUserConnected(id, userName);

Xác định/đưa ra các phương thức phía máy khách đang được gọi bằng mã phía máy chủ bằng cách báo cáo Clients.Caller.onConnected (...) và Clients.AllExcept(id).onNewUserConnected(...). Bạn có thể xác định phương thức của bạn sử dụng chatHub.client.yourMethodName tại phía máy khách.

// Calls when user successfully logged in
 chatHub.client.onConnected = function (id, userName, allUsers, messages) {

    .
    .
    .

 }

 // On New User Connected
 chatHub.client.onNewUserConnected = function (id, name) {

    AddUser(chatHub, id, name);
 }

Từ phía máy khách, bạn có thể gọi các phương thức phía máy chủ sử dụng chatHub.server.yourMethod trên trang web.

chatHub.server.connect(name);

Trong chat chính thông điệp nhập bởi người dùng được phát sóng cho tất cả các máy khách được kết nối. Trên máy chủ bên trong lớp ChatHub viết SendMessageToAll và tin nhắn quảng bá sử dụng phương thức Clients.All.messageReceived. messageReceived là một phương thức phía khách hàng.

 public void SendMessageToAll(string userName, string message)
 {
    // store last 100 messages in cache
    AddMessageinCache(userName, message);

    // Broad cast message
    Clients.All.messageReceived(userName, message);
 }

Về phía máy khách tiếp xúc với phương thức messageReceived và trong phương thức này chỉ cần thêm tin trong vùng trò chuyện sử dụng JQuery.

chatHub.client.messageReceived = function (userName, message) {

    AddMessage(userName, message);

Sau khi viết phía máy khách và phương thức phía máy chủ, bây giờ chúng ta phải đăng ký sự kiện click nút về phía máy khách và khi người dùng bấm nút sẽ gọi phương thức phía máy chủ sendMessageToAll, mà phát sóng thông điệp tới máy khách tất cả các kết nối.

$('#btnSendMsg').click(function () {

     var msg = $("#txtMessage").val();
     if (msg.length > 0) {

         var userName = $('#hdUserName').val();

         chatHub.server.sendMessageToAll(userName, msg);

         $("#txtMessage").val(');
     }
 });

Ngắt kết nối

Trên thân của trình duyệt SignalR API gọi phương thức OnDisconnected. Ghi đè lên phương thức này trong lớp ChatHub và trong phương thức này loại bỏ các máy khách bị ngắt kết nối từ danh sách bộ nhớ cache và gửi thông báo cho máy khách kết nối khác.

 public override System.Threading.Tasks.Task OnDisconnected()
 {
     var item = ConnectedUsers.FirstOrDefault(x => x.ConnectionId == Context.ConnectionId);
     if (item != null)
     {
         ConnectedUsers.Remove(item);

         var id = Context.ConnectionId;
         Clients.All.onUserDisconnected(id, item.UserName);

     }

     return base.OnDisconnected();
 }

Nguồn : http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-net-client