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:
- Tạo Website
- Extension Manager
- Install-Package Microsoft.AspNet.SignalR -pre
- 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
- Global.asax
- 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]
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
. Có thắc mắc gì chúng ta thảo luận tiếp bên dưới nhé!
