标签:
新建MVC项目
如果没有Signale需要使用NuGet安装Signalr
namespace SignaLrDemo { public class ChatHub : Hub { public void Send(string name,string message) { Clients.All.broadcastMessage(name, message); } } }
<html> <head> <meta name="viewport" content="width=device-width" /> <title>临时聊天工具</title> <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/jquery.signalR-2.0.0.js"></script> <script src="signalr/hubs" type="text/javascript"></script> <script type="text/javascript"> $(function () { // 定义一个代理, 以引用 Hub var chat = $.connection.chatHub; //服务器上的集线器类调用这个函数来推送内容并更新到每个客户端【从后台接到消息,然后添加到面板上】 chat.client.broadcastMessage = function (name, message) { var encodedName = $(‘<div />‘).text(name).html(); var encodedMsg = $(‘<div />‘).text(message).html(); $(‘#discussion‘).append(‘<li><strong>‘ + encodedName + ‘</strong>: ‘ + encodedMsg + ‘</li>‘); }; //输入名字 $(‘#displayname‘).val(prompt(‘请输入您的名字:‘, ‘‘)); $(‘#message‘).focus(); //打开链接 $.connection.hub.start().done(function () { $(‘#sendmessage‘).click(function () { // 在Hub中调用 Send 方法 chat.server.send($(‘#displayname‘).val(), $(‘#message‘).val()); $(‘#message‘).val(‘‘).focus(); }); }); }); </script> <style type="text/css"> .container { background-color: yellowgreen; border: thick solid #0000ff; padding: 20px; margin: 20px; } </style> </head> <body> <div class="container"> <input type="text" id="message" /> <input type="button" id="sendmessage" value="发送" /> <input type="hidden" id="displayname" /> <ul id="discussion"></ul> </div> </body> </html>
标签:
原文地址:http://www.cnblogs.com/xiaoyaodijun/p/4326070.html