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: 2. Mở Packge Manager Console để add gói SignalR vào project: 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: 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 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: 6. Tạo hàm Send để đăng ký hàm addMessage cho Client:
- Imports Microsoft.VisualBasic
- Imports Microsoft.AspNet.SignalR.Hubs
- Public Class Chat
- Inherits Hub
- Public Sub Send(message As String)
- ' Call the addMessage method on all clients
- Clients.All.addMessage(message)
- End Sub
- End Class
- Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)
- ' Code that runs on application startup
- RouteTable.Routes.MapHubs()
- End Sub
[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] 11. Vậy là xong, chạy để test thử: 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
