• Vui lòng đọc nội qui diễn đàn để tránh bị xóa bài viết
  • Tìm kiếm trước khi đặt câu hỏi

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

Các bài viết giới thiệu và hướng dẫn dành cho lập trình Web Forms

Điều hành viên: vietluyen

Trả lời
Hình đại diện của người dùng
NoBi
Quản trị
Quản trị
Bài viết: 951
Ngày tham gia: T.Ba 18/03/2008 1:22 pm
Đến từ: Sài Gòn
Has thanked: 50 time
Been thanked: 66 time
Liên hệ:
Liên hệ NoBi

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

Gửi bàigửi bởi NoBi » T.Hai 07/01/2013 4:30 pm

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:
Mã: [Chọn hết] [Mở rộng/Thu hẹp] [Tải về]
  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
GeSHi © Codebox Plus

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:
Mã: [Chọn hết] [Mở rộng/Thu hẹp] [Tải về]
  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
GeSHi © Codebox Plus

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:
Mã: [Chọn hết] [Mở rộng/Thu hẹp] [Tải về]
  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>
GeSHi © Codebox Plus

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 554 lần


:>
Đầu trang
tindl88
Thành viên tâm huyết
Thành viên tâm huyết
Bài viết: 363
Ngày tham gia: T.Bảy 26/04/2008 6:10 pm
Has thanked: 16 time
Been thanked: 10 time

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

Gửi bàigửi bởi tindl88 » T.Hai 01/04/2013 3:39 am

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
Đầu trang
moon_solo1987
Thành viên chính thức
Thành viên chính thức
Bài viết: 27
Ngày tham gia: CN 30/03/2008 11:28 am

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

Gửi bàigửi bởi moon_solo1987 » T.Năm 13/03/2014 9:12 pm

thank, mình đang cần tìm hiểu về cái này ^.^
Đầu trang
tivanvodich
Bài viết: 2
Ngày tham gia: T.Năm 24/09/2015 5:04 pm
Liên hệ:
Liên hệ tivanvodich

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

Gửi bàigửi bởi tivanvodich » T.Năm 24/09/2015 5:09 pm

Rất hay, đáng để đọc
Đầu trang
Trả lời

Quay về “[ASP.NET] Bài viết giới thiệu, hướng dẫn”

Đang trực tuyến

Đang xem chuyên mục này: Không có thành viên nào trực tuyến. và 1 khách