.net mvc使用SignalR实时推送消息

mac2025-09-02  10

最近简单研究了一下SignalR,写个小经验,不足之处请见谅! 1、创建一个mvc项目,添加Microsoft.AspNet.SignalR包,完成之后在scripts文件夹中会自动添加signalR的js文件(与自己添加的NuGet包版本有关) 2,创建Startup.cs文件,我创建在了App_Start文件夹下,代码如下

using System.Collections.Generic; using System.Linq; using System.Web; using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(SignalRTest.Startup))] namespace SignalRTest { public class Startup { public void Configuration(IAppBuilder app) { app.MapSignalR(); } } }

3、创建Hub集线器类

using Microsoft.AspNet.SignalR; using Microsoft.AspNet.SignalR.Hubs; using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace SignalRTest.Hubs { [HubName("chatHub")] public class ChatHub:Hub { /// <summary> /// 静态用户列表 /// </summary> private IList<string> userList = UserInfo.userList; /// <summary> /// 用户的connectionID与用户名对照表 /// </summary> private readonly static Dictionary<string, string> _connections = new Dictionary<string, string>(); /// <summary> /// 用户上线函数,用户上线之后将用户姓名和ConnectionId绑定,实际使用中可以用唯一的标识来绑定ConnectionId /// </summary> /// <param name="name"></param> public void SendLogin(string name) { IHubContext chat = GlobalHost.ConnectionManager.GetHubContext<ChatHub>(); if (!userList.Contains(name)) { userList.Add(name); //这里便是将用户id和姓名联系起来 _connections.Add(name, Context.ConnectionId); } else { //每次登陆id会发生变化 _connections[name] = Context.ConnectionId; } //新用户上线,服务器广播该用户名 Clients.All.loginUser(userList); //通知用户上线 chat.Clients.All.senloginuser(name); } /// <summary> /// 发送给指定接受者 /// </summary> /// <param name="sendname">发送者</param> /// <param name="toName">接受者</param> /// <param name="content">发送内容</param> public void CallOne(string sendname, string toName, string content) { IHubContext chat = GlobalHost.ConnectionManager.GetHubContext<ChatHub>(); //根据username获取对应的ConnectionId var connectionId = _connections[toName]; chat.Clients.Client(connectionId).add("来自用户" + sendname + " " + content); } /// <summary> /// 全员广播 /// </summary> /// <param name="message"></param> public void sendmessage(string message) { IHubContext chat = GlobalHost.ConnectionManager.GetHubContext<ChatHub>(); chat.Clients.All.sendallmessage(message); } /// <summary> /// 除了自己广播所有人 /// </summary> /// <param name="name"></param> /// <param name="message"></param> public void sendallother(string name,string message) { IHubContext chat = GlobalHost.ConnectionManager.GetHubContext<ChatHub>(); var connectionId = _connections[name]; chat.Clients.AllExcept(connectionId).addotherMessage(message); } } public class UserInfo { public static IList<string> userList = new List<string>(); } }

4、我这里是通过后端调用来发送信息。因为在实际项目中大多数情况可能是后端处理数据时需要向客户端推送消息,也可以在客户端直接调用后台方法(视图js代码中有体现)

public ActionResult show() { return View(); } //给指定用户推送 public ActionResult ToSingleSend(string sendname, string toname,string content) { ChatHub s = new ChatHub(); s.CallOne(sendname, toname, "【"+sendname+"】"+"对"+toname+"说:"+content); return Json(new { code=0,msg="success"}); } //给所有用户推送 public ActionResult ToAllSend(string content) { ChatHub s = new ChatHub(); s.sendmessage( "全员广播:" + content); return Json(new { code=0,msg="success"}); } //除自己外的所有人推送 public ActionResult ToOtherSend(string name,string content) { ChatHub s = new ChatHub(); s.sendallother(name,"除"+name+"之外所有人听清楚:" + content); return Json(new { code=0,msg="success"}); }

5、前端页面

@{ Layout = null; } <script src="~/Scripts/jquery-3.3.1.min.js"></script> <script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script> <script src="~/signalr/hubs"></script> <h1>signalR演示</h1> <input type="hidden" id="displayname" /> <h2 id="thisname"></h2><br /> <select id="username" style="width:153px;"></select> <input type="text" style="width:153px;" id="content" placeholder="要说的话" /> <input id="send" type="button" value="发送" /> &nbsp;&nbsp; <input type="button" id="allsend" value="发送给所有人" /> &nbsp;&nbsp; <input type="button" id="othersend" value="除自己外的所有人" /> <div> <h1 id="messgae"></h1> </div> <script type="text/javascript"> $(function () { $.connection.hub.logging = true; //前端Hub的使用,注意的是,Hub的名字是WorkflowHub,这里使用时首字母小写 var work = $.connection.chatHub; $('#displayname').val(prompt('请输入昵称:', '')); $('#thisname').text('当前用户:' + $('#displayname').val()); //监听点对点消息,对应后端ChatHub集线器中CallOne方法里的add函数 work.client.add = function (message) { $('#messgae').append(message + '</br>') //alert(message); } //监听全员广播消息,对应后端ChatHub集线器中sendmessage方法里的sendallmessage函数 work.client.sendallmessage = function (message) { $('#messgae').append(message + '</br>') } //监听除自己外的广播消息,对应后端ChatHub集线器中sendallother方法里的addotherMessage函数 work.client.addotherMessage = function (message) { $('#messgae').append(message + '</br>') } //后端SendLogin调用后,产生的loginUser回调 work.client.loginUser = function (userlist) { reloadUser(userlist); }; //新用户上线 work.client.senloginuser = function (message) { $('#messgae').append(message + '已上线</br>') }; //hub连接开启 $.connection.hub.start().done(function () { var username = $('#displayname').val(); //发送上线信息 work.server.sendLogin(username); //发送给指定用户 $('#send').click(function () { //var friend = $('#username').val(); 调用后端函数,发送指定消息 //work.server.sendByGroup(username, friend); var username = $('#displayname').val(); var friend = $('#username').val(); var content = $('#content').val(); $.ajax({ type: 'get', async: false, data: { sendname: username, toname: friend, content: content }, url: '/home/ToSingleSend', dataType: 'json', success: function (data) { console.log(data); } }); }); }); //全员广播 $("#allsend").click(function () { var content = $('#content').val(); //可以前端直接调用后端方法 //work.server.sendmessage(content); //通过后台触发。有时后端在处理数据时某些情况下需要提醒客户端可以采用这种方式 $.ajax({ type: 'get', async: false, data: { content: content }, url: '/home/ToAllSend', dataType: 'json', success: function (data) { console.log(data); } }); }); //除自己以外的所有人 $("#othersend").click(function () { var content = $('#content').val(); var name = $('#displayname').val(); //可以前端直接调用后端方法 //work.server.sendallother(name,content); //通过后台触发。有时后端在处理数据时某些情况下需要提醒客户端可以采用这种方式 $.ajax({ type: 'get', async: false, data: {name:name, content: content }, url: '/home/ToOtherSend', dataType: 'json', success: function (data) { console.log(data); } }); }); }); //重新加载用户列表 var reloadUser = function (userlist) { $("#username").empty(); for (i = 0; i < userlist.length; i++) { $("#username").append("<option value=" + userlist[i] + ">" + userlist[i] + "</option>"); } } </script>

6、开始测试,我用三个浏览器来模拟 输入名称来模拟用户登录,并显示用户上线提醒 发送指定人员消息 发送全员信息 发送给除自己外的所有人 以上是自己查询相关资料总结的一些简单的使用 推荐:分组群发消息

最新回复(0)