0

0

SignalR实现实时Web聊天的实例代码

零下一度

零下一度

发布时间:2018-05-25 16:12:29

|

3519人浏览过

|

来源于php中文网

原创

本篇文章主要介绍了asp.net signalr来做实时web聊天实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本章和大家分享的内容是使用Signal R框架创建个简易的群聊功能,主要讲解如何在.Net的MVC中使用这个框架,由于这个项目有官方文档(当然全英文),后面也不打算写分享篇了,主要目的是让朋友们在需要使用Web实时通信的时候有更多一种解决方案,毕竟这是微软主推的一种解决方案之一。

SignalR网上简介

ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程。实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据。

SignalR当然也提供了非常简单易用的高阶API,使服务器端可以单个或批量调用客户端上的JavaScript函数,并且非常 方便地进行连接管理,例如客户端连接到服务器端,或断开连接,客户端分组,以及客户端授权,使用SignalR都非常 容易实现。

SignalR将与客户端进行实时通信带给了ASP .NET 。当然这样既好用,而且也有足够的扩展性。以前用户需要刷新页面或使用Ajax轮询才能实现的实时显示数据,现在只要使用SignalR,就可以简单实现了。最重要的是您无需重新建立项目,使用现有ASP .NET项目即可无缝使用SignalR。

群聊实例效果

咋们先来看看测试用例的效果吧,效果图:

界面及其简单,样式这里就不考虑了,主要是展示其用法,这里涉及到的功能有:

1. 统计在线人数量

2. 显示在线人数的昵称和连接方式(本测试用例支持webSockets和longPolling(长连接))

3. 群聊信息

MVC中如何使用SignalR

首先,我们平常做法创建MVC的Web项目,然后通过Nuget控制台命令: Install-package Microsoft.AspNet.SignalR 加入SignalR的依赖,自动添加的包如下:

 
 
 
 

并且自动往MVC项目中的Script文件夹中增加相关的js文件:

jquery.signalR-2.2.2.min.js

jquery.signalR-2.2.2.js

然后,我们需要在项目一级目录创建一个文件名称为Startup.cs的类,里面主要内容补全不下:

[assembly: OwinStartup(typeof(Stage.Api.Extend.Startup))]
namespace Stage.Api.Extend
{
  public class Startup
  {
    public void Configuration(IAppBuilder app)
    {
      app.MapSignalR("/chat", new Microsoft.AspNet.SignalR.HubConfiguration
      {
        EnableDetailedErrors = true,
        EnableJavaScriptProxies = true
      });
    }
  }
}

首先我们从上往下分析注意点:

1.  OwinStartup(Type) 构造函数传递的是一个类型,而这个类型对应的就是我们创建的Startup类,这个通过这个构造函数类标记起始位置;

2.  namespace Stage.Api.Extend 是我项目的命名空间,这个可以随便定义;

3.  public void Configuration(IAppBuilder app) 函数是固定必须的,这里程序会首先进入这个方法执行里面的逻辑代码;

4.  app.MapSignalR 是扩展的IAppBuilder接口方法,他有多种表现形式,这里我选择的是 public static IAppBuilder MapSignalR(this IAppBuilder builder, string path, HubConfiguration configuration); ,这里看有点类似于咋们MVC的路由,这里主要注意的是这个Path参数,在前端页面的时候需要用到这个路径;

DirCMS内容管理系统6.0
DirCMS内容管理系统6.0

DirCMS内容管理系统,是国内自主研发的一款功能强大而又不失小巧简洁的由PHP+Mysql架构的内容管理系统。DirCMS代码全部开源,便于使用者二次开发或定制;并采用简洁的模板标签技术,使制作模板更加容易,一般情况下,用DirCMS架构一个企业站只需半天时间即可,真正实现功能的简洁,实用,强大,灵活。可广泛应用于架构各类门户站,下载站,企业站,工作室等站点。

下载

到这里后台需要的配置其实已经就完成了,下面是具体需要操作的业务逻辑处理类,新建一个类(这里我取名为ChatHub)并继承Hub(这是SignalR框架提供),然后里面的逻辑代码如下:

public class ChatHub : Hub
  {
    //
    public int Num = 10001;
    public static List _Users = new List();

    /// 
    /// 添加聊天人
    /// 
    /// 
    public void AddUser(MoHubUser user)
    {

      user.Id = Context.ConnectionId;
      if (!_Users.Any(b => b.Id == user.Id))
      {
        _Users.Add(user);
      }

      //Clients.All.newUser(user);
      Clients.All.userList(_Users);
    }

    /// 
    /// 发送信息
    /// 
    /// 
    /// 
    public void SendAll(MoHubUser user, string message)
    {
      Clients.All.addNewMessageToPage(user, message);
    }

    /// 
    /// 某个聊天人退出是,通知所有在线人重新加载聊天人数
    /// 
    /// 
    /// 
    public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled)
    {
      var user = _Users.SingleOrDefault(x => x.Id == Context.ConnectionId);
      if (user != null)
      {
        _Users.Remove(user);
        Clients.All.userList(_Users);
      }
      return base.OnDisconnected(stopCalled);
    }
  }

上面的3个方法分别做了:添加聊天人到List,发送信息到客户端,某个连接失效后通知各个有效的聊天人重新加载信息;这里值得关注的是通过重新 public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled) 方法来实现捕获并移除失效连接(这里是聊天人的信息);整篇测试用例通过Context.ConnectionId来保证连接的唯一性,只要有新的链接请求,那么服务端就会分配一个唯一串给这个链接,当客户端关闭页面或关闭链接这个是有就能在OnDisconnected方法中捕获到这个失效的链接的ConnectionId,这样就达到了移除失效聊天人的要求了;为了代码的方便性,这里创建了一个聊天人信息类:

public class MoHubUser
  {

    public string Id { get; set; }
    public string NickName { get; set; }
    public string TransportMethod { get; set; }
  }

到这里后台的聊天室代码就完成了就是这么简单;我们再来看试图中如何来写代码,这里我先给出我的html布局代码:

 @{
  ViewBag.Title = "神牛聊天室 - SignalR";
}

@ViewBag.Title 在线人数:0


      @**@

      客户端这里写法大致有两种选择,一种直接使用生成的代理来操作,一种不用自动生成的代理采用手动创建代理的方式;为了内容的简洁性,这里只简单讲解下自动生成的代理方式,而更多的是分享手动创建代理链接的方式;

      使用生成的代理获取链接

      首先,我们需要通过Script标签来jquery0一下自动生成代理的路径: ,注意啦这里的路径/chat对应的就是咋们在前面Startup.cs文件中配置 app.MapSignalR("/chat" 路径,而后面/hubs固定的写法(至少目前我还没更多的试验过),只有先应用了这个~/chat/hubs,才能在后面使用生成的代理,先上段代码:

      var chat = $.connection.chatHub;
          chat.client.newUser = function (user) {
            $("#users").append(' 
    • ' + user.NickName + '[' + user.TransportMethod + ']
    • '); }; chat.client.userList = function (users) { console.log(users); $("#sapnUserTotal").html(users.length); $.each(users, function (i, item) { $("#users").append('
    • [' + item.TransportMethod + '] ' + item.NickName + '(' + item.Id + ')
    • '); }); }; chat.client.addNewMessageToPage = function (user, message) { console.log(user); $("#discussion").append('
    • ' + user.NickName + '[' + user.TransportMethod + ']

      ' + message + '

    • '); }; //connection.hub.start({ transport: ['webSockets', 'longPolling'] }).done(function () { // my.TransportMethod = connection.hub.transport.name; // chat.server.addUser(my); // $('#sendmessage').click(function () { // //console.log(chat); // var content = $.trim($('#message').val()); // if (content.length <= 0) { $('#message').val('').focus(); return; } // chat.server.sendAll(my, content); // $('#message').val('').focus(); // }); //}).fail(function () { // alert("链接聊天室失败,请重新刷新页面。"); //});

      咋们逐步来解析下代码注意点:

      1.  var chat = $.connection.chatHub; 这里的chatHub对应的就是咋们创建的并继承Hub的ChatHub类,由于jsjquery1开头都是小写,所以这里是chatHub,这句活就表示链接到咋们后端了ChatHub类了,然后就可以使用里面的方法啦(这种有点类似于早期的webform中某种ajax请求的写法)

      2. 通过chat.client.xxx来接收服务端通知的消息,而这个xxx对应的方法名称和咋们后端的Clients.All.xxx,本章实例对应的是:chat.client.userList = function (users){}对应Clients.All.userList(_Users);这样后端就能直接通知客户端的对应方法了;注意这里我后端Clients.All用的是通知全部客户端的意思,如果您需要通知指定的链接需要用到的是: T Client(string connectionId); 方法

      3. chat.client是后端调用客户端,那相对的chat.server就是客户端请求服务端,和上面一样通过chat.server.xxx来指定请求的服务端方法,注意这个时候服务端方法指的是继承类Hub的子类的公共方法(本篇对应的是:chat.server.sendAll(my, content)对应ChatHub.cs文件中的 public void SendAll(MoHubUser user, string message) 函数)

      4.  connection.hub.start({ transport: ['webSockets', 'longPolling'] }) 来指定运行的交互协议

      以上就是使用生成代理的方式,按照上面的注意点来写应该不是问题;

      使用手动创建反向代理来链接

      不采用生成的代码的方式,我们只需要修改前端就行了,后台代码不用变或设置不用变动;首先我们把上面说的Script引用自动代理的代码去掉,因为这个时候不需要了,我们还是先上代码:

      var my = { NickName: "神牛001", TransportMethod: "" };
          var connection = $.hubConnection("/chat/hubs");
          var chat = connection.createHubProxy('chatHub');
      
          chat.on("userList", function (users) {
            console.log(users);
            $("#sapnUserTotal").html(users.length);
            $("#users").html("");
            $.each(users, function (i, item) {
              $("#users").append(' 
    • [' + item.TransportMethod + '] ' + item.NickName + '(' + item.Id + ')
    • '); }); }); chat.on("addNewMessageToPage", function (user, message) { console.log(user); $("#discussion").append('
    • ' + user.NickName + '[' + user.TransportMethod + ']

      ' + message + '

    • '); var p = document.getElementById('discussion'); //p.scrollTop = p.scrollHeight; p.scrollTop = 999999; }); var nickName = prompt("请输入一个昵称:", my.NickName); my.NickName = nickName.length > 0 ? nickName : my.NickName; $('#displayname').val(nickName); $('#message').focus(); connection.start({ transport: ['webSockets', 'longPolling'] }).done(function () { my.TransportMethod = connection.transport.name; //console.log(my.TransportMethod); chat.invoke("addUser", my); $('#sendmessage').click(function () { var content = $.trim($('#message').val()); if (content.length <= 0) { $('#message').val('').focus(); return; } chat.invoke("sendAll", my, content); $('#message').val('').focus(); }); });

      同样列出如下注意点:

      1.  var connection = $.hubConnection("/chat/hubs"); 创建链接,这里的path同样对应后端的 app.MapSignalR("/chat" ,路径保持一致

      2.  var chat = connection.createHubProxy('chatHub'); 来创建反向代理链接,这里的name:chatHub对应的是后端的ChatHub类名称

      3. 通过on("xxx",function(){})函数来绑定服务端通知客户端的事件,xxx对应Clients.All.xxx中的xxx

      4.  connection.start({ transport: ['webSockets', 'longPolling'] }) 来设置允许的链接方式,并开始链接

      5. connection.transport.name来获取链接的方式名称,默认start不设置的话有这么几种:webSockets,foreverFrame,serverSentEvents,longPolling

      6. chat.invoke("xxx", param1, param2)通过invoke来映射继承类Hub的类的公共方法,这里实例对应的是: chat.invoke("sendAll", my, content) 对应 public void SendAll(MoHubUser user, string message)

      热门AI工具

      更多
      DeepSeek
      DeepSeek

      幻方量化公司旗下的开源大模型平台

      豆包大模型
      豆包大模型

      字节跳动自主研发的一系列大型语言模型

      通义千问
      通义千问

      阿里巴巴推出的全能AI助手

      腾讯元宝
      腾讯元宝

      腾讯混元平台推出的AI助手

      文心一言
      文心一言

      文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

      讯飞写作
      讯飞写作

      基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

      即梦AI
      即梦AI

      一站式AI创作平台,免费AI图片和视频生成。

      ChatGPT
      ChatGPT

      最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

      相关专题

      更多
      俄罗斯Yandex引擎入口
      俄罗斯Yandex引擎入口

      2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

      178

      2026.01.28

      包子漫画在线官方入口大全
      包子漫画在线官方入口大全

      本合集汇总了包子漫画2026最新官方在线观看入口,涵盖备用域名、正版无广告链接及多端适配地址,助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

      35

      2026.01.28

      ao3中文版官网地址大全
      ao3中文版官网地址大全

      AO3最新中文版官网入口合集,汇总2026年主站及国内优化镜像链接,支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

      79

      2026.01.28

      php怎么写接口教程
      php怎么写接口教程

      本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程,助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

      2

      2026.01.28

      php中文乱码如何解决
      php中文乱码如何解决

      本文整理了php中文乱码如何解决及解决方法,阅读节专题下面的文章了解更多详细内容。

      4

      2026.01.28

      Java 消息队列与异步架构实战
      Java 消息队列与异步架构实战

      本专题系统讲解 Java 在消息队列与异步系统架构中的核心应用,涵盖消息队列基本原理、Kafka 与 RabbitMQ 的使用场景对比、生产者与消费者模型、消息可靠性与顺序性保障、重复消费与幂等处理,以及在高并发系统中的异步解耦设计。通过实战案例,帮助学习者掌握 使用 Java 构建高吞吐、高可靠异步消息系统的完整思路。

      8

      2026.01.28

      Python 自然语言处理(NLP)基础与实战
      Python 自然语言处理(NLP)基础与实战

      本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

      24

      2026.01.27

      拼多多赚钱的5种方法 拼多多赚钱的5种方法
      拼多多赚钱的5种方法 拼多多赚钱的5种方法

      在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

      122

      2026.01.26

      edge浏览器怎样设置主页 edge浏览器自定义设置教程
      edge浏览器怎样设置主页 edge浏览器自定义设置教程

      在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

      72

      2026.01.26

      热门下载

      更多
      网站特效
      /
      网站源码
      /
      网站素材
      /
      前端模板

      精品课程

      更多
      相关推荐
      /
      热门推荐
      /
      最新课程
      ASP.NET参考手册
      ASP.NET参考手册

      共0课时 | 0人学习

      传播智客ASP.NET中级系列视频教程
      传播智客ASP.NET中级系列视频教程

      共33课时 | 6.4万人学习

      传播智客ASP.NET高级系列视频教程
      传播智客ASP.NET高级系列视频教程

      共34课时 | 6.2万人学习

      关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
      php中文网:公益在线php培训,帮助PHP学习者快速成长!
      关注服务号 技术交流群
      PHP中文网订阅号
      每天精选资源文章推送

      Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号