简易聊天室转：忘了...
以下为自动创建代理hub方式
使用NuGet引用:Microsoft.AspNet.SignalR
什么时候使用 generated proxy 如果你要给客户端的方法注册多个事件处理器，那么你就不能使用 generated proxy。如果你不使用 generated proxy ，那么你就不能引用 "signalr/hubs" URL。 客户端设置 首先需要引用jQuery，SignalR，signalr/hubs <script src="Scripts/jquery-1.10.2.min.js"></script> <script src="Scripts/jquery.signalR-2.1.0.min.js"></script> <script src="signalr/hubs"></script> 如何引用动态的 generated proxy ASP.NET MVC 4 or 5 Razor <script src="~/signalr/hubs"></script> ASP.NET MVC 3 Razor <script src="@Url.Content("~/signalr/hubs")"></script> ASP.NET Web Forms <script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script> /signalr/hubs 是 SignalR 自动生成的，当你启动调试的时候会在Script Documents 看到它
=====================================以下为例子===============================================
1、右键=》添加项目=》OWIN Startup class=》Startup.cs
添加Startup类
using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(Demo_SignalR_2._4._0.Models.Startup))] namespace Demo_SignalR_2._4._0.Models { public class Startup { public void Configuration(IAppBuilder app) { // 有关如何配置应用程序的详细信息，请访问 https://go.microsoft.com/fwlink/?LinkID=316888 app.MapSignalR(); } } }
2、右键=》新建项目=》SignalR Hub Class (v2)=》ChatHub.cs
添加ChatHub类
using System; using System.Collections.Concurrent; using System.Collections.Generic; using System.Linq; using System.Web; using Microsoft.AspNet.SignalR; using Microsoft.AspNet.SignalR.Hubs; namespace Demo_SignalR_2._4._0.Models { [HubName("chat")] public class ChatHub : Hub { public static ConcurrentDictionary<string, string> OnLineUsers = new ConcurrentDictionary<string, string>(); [HubMethodName("send")] public void Send(string message) { string clientName = OnLineUsers[Context.ConnectionId]; message = HttpUtility.HtmlEncode(message).Replace(" ", "<br/>").Replace(" ", "<br/>"); Clients.All.receiveMessage(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), clientName, message); } [HubMethodName("sendOne")] public void Send(string toUserId, string message) { string clientName = OnLineUsers[Context.ConnectionId]; message = HttpUtility.HtmlEncode(message).Replace(" ", "<br/>").Replace(" ", "<br/>"); Clients.Caller.receiveMessage(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), string.Format("您对 {1}", clientName, OnLineUsers[toUserId]), message); Clients.Client(toUserId).receiveMessage(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), string.Format("{0} 对您", clientName), message); } /// <summary> /// 服务器接口推送 /// </summary> /// <param name="message"></param> public static void ServerPush(string message) { IHubContext context = GlobalHost.ConnectionManager.GetHubContext<ChatHub>(); context.Clients.All.ServerPush(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), message); } public override System.Threading.Tasks.Task OnConnected() { string clientName = Context.QueryString["clientName"].ToString(); OnLineUsers.AddOrUpdate(Context.ConnectionId, clientName, (key, value) => clientName); Clients.All.userChange(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), string.Format("{0} 加入了。", clientName), OnLineUsers.ToArray()); return base.OnConnected(); } public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled) { string clientName = Context.QueryString["clientName"].ToString(); Clients.All.userChange(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), string.Format("{0} 离开了。", clientName), OnLineUsers.ToArray()); OnLineUsers.TryRemove(Context.ConnectionId, out clientName); return base.OnDisconnected(stopCalled); } } }
例子：聊天室
创建Index.aspx页
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="Scripts/jquery-3.3.1.min.js"></script> <script src="Scripts/jquery.signalR-2.4.0.min.js"></script>
//这个很重要 <script src="signalr/hubs" type="text/javascript"></script> <style type="text/css"> #chatbox { 100%; height: 500px; border: 2px solid blue; padding: 5px; margin: 5px 0px; overflow-x: hidden; overflow-y: auto; } .linfo { } .rinfo { text-align: right; } </style> <script type="text/javascript"> $(function () { var clientName = $("#clientname").val(); var eChatBox = $("#chatbox"); var eUsers = $("#users"); var chat = $.connection.chat; $.connection.hub.qs = { "clientName": clientName }; chat.state.test = "test"; //聊天 chat.client.receiveMessage = function (dt, cn, msg) { console.log(dt); console.log(cn); console.log(msg); var clsName = "linfo"; if (cn == clientName || cn.indexOf("您对") >= 0) clsName = "rinfo"; eChatBox.append("<p class='" + clsName + "'>" + dt + " <strong>" + cn + "</strong> 说：<br/>" + msg + "</p>"); eChatBox.scrollTop(eChatBox[0].scrollHeight); } //更新下拉 chat.client.userChange = function (dt, msg, users) { eChatBox.append("<p>" + dt + " " + msg + "</p>"); eUsers.find("option[value!='']").remove(); for (var i = 0; i < users.length; i++) { if (users[i].Value == clientName) continue; eUsers.append("<option value='" + users[i].Key + "'>" + users[i].Value + "</option>") } } //服务器推送 chat.client.ServerPush = function (dt, msg) { eChatBox.append("<p>" + dt + " " + msg + "</p>"); eChatBox.scrollTop(eChatBox[0].scrollHeight); } $.connection.hub.start().done(function () { $("#btnSend").click(function () { var toUserId = eUsers.val(); if (toUserId != "") { chat.server.sendOne(toUserId, $("#message").val()) .done(function () { //alert("发送成功！"); $("#message").val("").focus(); }) .fail(function (e) { alert(e); $("#message").focus(); }); } else { chat.server.send($("#message").val()) .done(function () { //alert("发送成功！"); $("#message").val("").focus(); }) .fail(function (e) { alert(e); $("#message").focus(); }); } }); }); }); </script> </head> <body> <form id="form1" runat="server"> <h3>大众聊天室</h3> <div id="chatbox"> </div> <div> <span>聊天名称：</span> <asp:TextBox ID="clientname" runat="server" ReadOnly="true" style="300px;" ></asp:TextBox> <span>聊天对象：</span> <select id="users" name="names"> <% foreach (var item in OnLineUsers) {%> <option value="<%= item.Value %>"><%= item.Text %></option> <%} %> </select> </div> <div> <textarea id="message" name="message" rows="5" style=" 50%;"></textarea> <input type="button" value="发送消息" id="btnSend" /> </div> </form> </body> </html>
Index.cs
using Demo_SignalR_2._4._0.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace Demo_SignalR_2._4._0 { public partial class Index : System.Web.UI.Page { public List<SelectListItem> OnLineUsers = new List<SelectListItem>(); protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { clientname.Text = "聊客-" + Guid.NewGuid(); this.Title = clientname.Text; } var onLineUserList = ChatHub.OnLineUsers.Select(u => new SelectListItem() { Text = u.Value, Value = u.Key }).ToList(); onLineUserList.Insert(0, new SelectListItem() { Text = "-所有人-", Value = "" }); OnLineUsers = onLineUserList; } } public class SelectListItem { public string Text { get; set; } public string Value { get; set; } } }
服务器推送：页面 ToServer.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace Demo_SignalR_2._4._0 { public partial class ToServer : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string msg = Request["msg"]; if (!string.IsNullOrWhiteSpace(msg)) { Models.ChatHub.ServerPush("服务器端推送接口:" + msg); } } } }
Index.aspx 为简易聊天室 ToServer.aspx 为服务器端接口