Trang 1 trên 1

Tạo ứng dụng Chat trên Website với SignalR

Đã gửi: T.Hai 07/01/2013 4:30 pm
gửi bởi NoBi
Tên bài viết: Tạo ứng dụng Chat trên Website với SignalR
Tác giả: NoBi
Cấp độ bài viết: Trung bình
Tóm tắt: Bạn muốn nhúng vào website mình 1 module cho phép thành viên chat với nhau (như facebook), hoặc muốn làm 1 module thông báo (notify) tức thời...?! Bài viết sau sẽ hướng dẫn bạn cách dùng SignalR để tạo ra ứng dụng như vậy 1 cách đơn giản nhất.


Chúng ta cùng bắt tay vào làm từng bước một:
1. Tạo Website, ở đây mình chọn empty website để dể theo dõi:
1.png
Tạo Website

2. Mở Packge Manager Console để add gói SignalR vào project:
2.png

3. Mở cửa sổ Extension Manager (trong menu Tools) để kiểm tra xem máy có cài Nuget Package Manager chưa? Nếu chưa có bạn cài nó vào:
3.png
Extension Manager

4. Sau khi đã cài Nuget Package Manager rồi, ở cửa sổ Packge Manager Console ta chạy dòng lệnh install gói SignalR vào: Install-Package Microsoft.AspNet.SignalR -pre
4.png
Install-Package Microsoft.AspNet.SignalR -pre

5. Sau khi cài đặt xong, chúng ta bắt tay tạo 1 lớp Chat trên Server để đăng ký sử dụng:
5.png

6. Tạo hàm Send để đăng ký hàm addMessage cho Client:
  1. Imports Microsoft.VisualBasic
  2. Imports Microsoft.AspNet.SignalR.Hubs
  3.  
  4. Public Class Chat
  5.     Inherits Hub
  6.  
  7.     Public Sub Send(message As String)
  8.         ' Call the addMessage method on all clients            
  9.         Clients.All.addMessage(message)
  10.     End Sub
  11.  
  12. End Class

6.png

7. Thêm file Global.asax cho project (nếu đã có rồi thì khỏi cần)
7.png
Global.asax

8. Đăng ký để mỗi khi chạy project, nó sẽ sinh ra script để lắng nghe sự kiện từ Client:
  1. Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)
  2.         ' Code that runs on application startup
  3.         RouteTable.Routes.MapHubs()
  4.     End Sub

8.png

9. Tạo 1 trang aspx để làm Client (ở đây bạn có thể tạo trang html cũng được):
9.png

10. Thêm code javascript và html vào như sau:
  1. <head runat="server">
  2.     <title>Test Notify</title>
  3.     <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
  4.     <script src="Scripts/jquery.signalR-1.0.0-rc1.min.js" type="text/javascript"></script>
  5.     <script type="text/javascript" src='<%= ResolveClientUrl("~/signalr/hubs") %>'></script>
  6.     <script type="text/javascript">
  7.         $(function () {
  8.             // Proxy created on the fly          
  9.             var chat = $.connection.chat;
  10.  
  11.             // Declare a function on the chat hub so the server can invoke it          
  12.             chat.client.addMessage = function (message) {
  13.                 $('#messages').append('<li>' + message + '</li>');
  14.             };
  15.  
  16.             // Start the connection
  17.             $.connection.hub.start().done(function () {
  18.                 $("#broadcast").click(function () {
  19.                     // Call the chat method on the server
  20.                     chat.server.send($('#msg').val());
  21.                 });
  22.             });
  23.         });
  24.     </script>
  25. </head>
  26. <body>
  27.     <div>
  28.         <input type="text" id="msg" />
  29.         <input type="button" id="broadcast" value="broadcast" />
  30.         <ul id="messages">
  31.         </ul>
  32.     </div>
  33. </body>
  34. </html>

10.png

11. Vậy là xong, chạy để test thử:
11.png


Bài viết này mình viết lại theo http://signalr.net/ một cách đơn giản nhất để các bạn nắm được cách làm việc của nó. Các bạn có thể vào trang trên xem hướng dẫn nâng cao để phục vụ cho mục đích sử dụng của mình.
Mình kèm theo mã nguồn để dành cho những bạn "làm biếng" muốn xem thành quả ngay :D. Có thắc mắc gì chúng ta thảo luận tiếp bên dưới nhé!
MyNotify.rar
Mã nguồn Project
(519.69 KiB) Đã tải 495 lần

Re: Tạo ứng dụng Chat trên Website với SignalR

Đã gửi: T.Hai 01/04/2013 3:39 am
gửi bởi tindl88
Ngày càng nhiều công nghệ mới theo bắt mệt.
Cái này hay, đọc tới câu "mã nguồn để dành cho những bạn "làm biếng" muốn xem thành quả ngay" thấy buồn cười kinh :))

Tìm hiều về SignalR

Re: Tạo ứng dụng Chat trên Website với SignalR

Đã gửi: T.Năm 13/03/2014 9:12 pm
gửi bởi moon_solo1987
thank, mình đang cần tìm hiểu về cái này ^.^

Re: Tạo ứng dụng Chat trên Website với SignalR

Đã gửi: T.Năm 24/09/2015 5:09 pm
gửi bởi tivanvodich
Rất hay, đáng để đọc