• 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

Moderator: vietluyen

User avatar
NoBi
Quản trị
Quản trị
Posts: 959
Joined: Tue 18/03/2008 1:22 pm
Location: Sài Gòn
Has thanked: 53 times
Been thanked: 66 times
Contact:

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

Postby NoBi » Mon 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:
  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:
[vbnet]Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)
' Code that runs on application startup
RouteTable.Routes.MapHubs()
End Sub[/vbnet]
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:
[javascript]<head runat="server">
<title>Test Notify</title>
<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.signalR-1.0.0-rc1.min.js" type="text/javascript"></script>
<script type="text/javascript" src='<%= ResolveClientUrl("~/signalr/hubs") %>'></script>
<script type="text/javascript">
$(function () {
// Proxy created on the fly
var chat = $.connection.chat;

// Declare a function on the chat hub so the server can invoke it
chat.client.addMessage = function (message) {
$('#messages').append('<li>' + message + '</li>');
};

// Start the connection
$.connection.hub.start().done(function () {
$("#broadcast").click(function () {
// Call the chat method on the server
chat.server.send($('#msg').val());
});
});
});
</script>
</head>
<body>
<div>
<input type="text" id="msg" />
<input type="button" id="broadcast" value="broadcast" />
<ul id="messages">
</ul>
</div>
</body>
</html>[/javascript]
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) Downloaded 614 times


:>

tindl88
Thành viên tâm huyết
Thành viên tâm huyết
Posts: 363
Joined: Sat 26/04/2008 6:10 pm
Has thanked: 16 times
Been thanked: 10 times

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

Postby tindl88 » Mon 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

moon_solo1987
Thành viên chính thức
Thành viên chính thức
Posts: 27
Joined: Sun 30/03/2008 11:28 am

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

Postby moon_solo1987 » Thu 13/03/2014 9:12 pm

thank, mình đang cần tìm hiểu về cái này ^.^

tivanvodich
Posts: 2
Joined: Thu 24/09/2015 5:04 pm
Contact:

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

Postby tivanvodich » Thu 24/09/2015 5:09 pm

Rất hay, đáng để đọc


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

Who is online

Users browsing this forum: No registered users and 1 guest