文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Asp.net如何通过SignalR2进行实时聊天

2023-06-30 16:48

关注

本篇内容主要讲解“Asp.net如何通过SignalR2进行实时聊天”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Asp.net如何通过SignalR2进行实时聊天”吧!

一:什么是signalR

Asp.net SignalR是微软为实现实时通信的一个类库。

一般情况下,signalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务器通信,随着Html5中WebSockets出现,SignalR也支持WebSockets通信。

另外SignalR开发的程序不仅仅限制于宿主在IIS中,也可以宿主在任何应用程序,包括控制台,客户端程序和Windows服务等,另外还支持Mono,这意味着它可以实现跨平台部署在Linux环境下。

SignalR将整个信息的交换封装起来,客户端和服务器都是使用JSON来沟通的,在服务端声明的所有Hub信息,都会生成JavaScript输出到客户端,.NET则依赖Proxy来生成代理对象,而Proxy的内部则是将JSON转换成对象。

客户端和服务端的具体交互情况如下图所示:

Asp.net如何通过SignalR2进行实时聊天

1、SignalR传输方式

1、HTML5 传输

这种传输方式当然是需要对HTML5兼容支持。如果客户端不支持HTML5 标准,那么你可以使用其他方式。

2、Comet 传输

下面的传输方式都是建立在Comet Web应用模型上。这种传输方式会在浏览器或者其他客户端保持一个长连接的HTTP请求,服务器可以利用这个请求将数据推送到客户端,而不用等客户端单独去请求数据。

2、SignalR连接模式

下面的图展示了Hub和持久连接的关系,让你对底层的传输技术一目了然。

Asp.net如何通过SignalR2进行实时聊天

二、服务端

原文参考:教程:通过 SignalR 2 进行实时聊天

使用vs2012创建一个新的ASP.NET Web Application项目。

Asp.net如何通过SignalR2进行实时聊天

1、添加服务端Hub

解决方案中添加SignalR Hub类选项,然后创建文件ChatHub.cs。此步骤将创建ChatHub.cs类文件并添加一组脚本文件和 SignalR 支持到项目的程序集引用。

注意:可以使用NuGet命令 install-package Microsoft.AspNet.SignalR 来引用SignalR到项目中

Asp.net如何通过SignalR2进行实时聊天

然后在ChatHub类中输入下面这段代码。

using Microsoft.AspNet.SignalR;namespace WebApplication2{    public class ChatHub : Hub    {        //定义可以被网页脚本访问的公共方法        public void Send(string name, string message) //在客户端可以使用hub.server.send()方法调用。        {            // 客户端通过调用broadcastMessage来获取服务端数据            Clients.All.broadcastMessage(name, message);//在客户端通过hub.client.broadcastMessage=function(){…}定义这个回调函数。        }    }}

ChatHub类中,可以看到它继承自Microsoft.AspNet.SignalR.Hub类。从Hub类派生出类是构建SignalR应用程序的有用方式。在这个类(ChatHub)中定义的公共方法可以被网页内的脚本访问。

在这段代码中(ChatHub类),客户端通过调用ChatHub.Send方法,并把名称和消息内容做为参数传递给ChatHub。而ChatHub则通过Clients.All.broadcastMessage方法把该消息广播给所有客户端。

Send方法演示了几个Hub概念:

2、添加OWIN 启动类

Solution Explorer中,右击项目,然后添加一个名为StartupOWIN 启动类,然后输入下面这段代码。

using Microsoft.Owin;using Owin;[assembly: OwinStartup(typeof(WebApplication2.Startup))]namespace WebApplication2{    public class Startup    {        public void Configuration(IAppBuilder app)        {            app.MapSignalR();        }    }}

三、客户端

在项目中添加一个静态网页文件,并命名为index.html,然后右击该网页文件,并选择Set As Start Page,在Index.html中输入下面的代码,注意引用正确的文件名。

<!DOCTYPE html><html><head>    <title>SignalR Simple Chat</title>    <style type="text/css">        .container {            background-color: #99CCFF;            border: thick solid #808080;            padding: 20px;            margin: 20px;        }    </style></head><body>    <div class="container">        <input type="text" id="message" />        <input type="button" id="sendmessage" value="Send" />        <input type="hidden" id="displayname" />        <ul id="discussion"></ul>    </div>    Reference the jQuery library.     <script src="Scripts/jquery-1.12.4.js"></script>    Reference the SignalR library.     <script src="Scripts/jquery.signalR-2.4.1.js"></script>    Reference the autogenerated SignalR hub script.     <script src="signalr/hubs"></script>    Add script to update the page and send messages.    <script type="text/javascript">        $(function () {            // 1、声明一个代理,用于引用服务端hub            var chat = $.connection.chatHub;            // 2、创建一个回调函数,让Hub调用它来广播消息。            chat.client.broadcastMessage = function (name, message) {                // Html编码形式显示名称和消息                var encodedName = $('').text(name).html();                var encodedMsg = $('').text(message).html();;                // 将消息添加到页面。                $('#discussion').append('' + encodedName                    + ':  ' + encodedMsg + '');            };            // 获取用户名            $('#displayname').val(prompt('Enter your name:', ''));            // 将初始焦点设置为消息输入框。            $('#message').focus();            // 3、开始连接和发送消息            $.connection.hub.start().done(function () {                $('#sendmessage').click(function () {                    // 在Hub上调用Send方法.                    chat.server.send($('#displayname').val(), $('#message').val());                    // 清除文本框并为下一个注释重置焦点。                    $('#message').val('').focus();                });            });        });    </script></body></html>

客户端通过jquery.signalR.jssignalr/hubs来与服务器进行通信,首先它要声明一个代理来引用集线器。

var chat = $.connection.chatHub

请注意:在JavaScript中,对服务器类及其成员的引用必须是camelCase形式。本例中将C#服务端的ChatHub类在JavaScript中的引用为chatHub。

然后它要再定义一个回调函数,这个回调函数主要是为了让服务器进行调用,从而将数据推送到客户端。

chat.client.broadcastMessage = function (name, message) {    //TODO:接收服务器推送的消息};

而下面的代码则是为了确保在将消息发送到服务器之前已经与服务器建立了连接。.done 函数表示连接成功后为发送的按钮绑定一个单击事件。

// 与服务器建立连接后才能发送消息到服务器$.connection.hub.start().done(function () {    $('#sendmessage').click(function () {        // 调用服务器端的ChatHub.Send方法,把消息发送到服务器        chat.server.send("name", "message");    });});

保存项目,并按F5运行,就可以实现B/S模式下的即时通讯。

四、运行结果

项目运行起来后,同时用多个浏览器打开的,输入各自的姓名之后,就能够实现即时通讯了。回到我们的vs,还能够看到自动生成的hubs脚本文件,如下图所示。

Asp.net如何通过SignalR2进行实时聊天

Asp.net如何通过SignalR2进行实时聊天

三个不同的浏览器中的运行方式。 当 Tom、 Anand 和 Susan 发送消息时,所有浏览器实时更新:

Asp.net如何通过SignalR2进行实时聊天

在ServerHub重写一个 OnConnected 方法来监控客户端的连接情况,程序运行的时候web页面就使用$.connection.hub.start() 与signalR服务开始建立连接了,在调试的时候可以在输入中看到 "客户端连接成功!"

public override Task OnConnected(){    System.Diagnostics.Trace.WriteLine("客户端连接成功!");    return base.OnConnected();}

Asp.net如何通过SignalR2进行实时聊天

五、一对一聊天实例

Clients.Client(connectionId).addMessage() 此方法的作用就是客户端注册addMessage方法,向指定连接Id的客户端发送消息。一对一的聊天发送的消息也必须回发给自己,所以连接的Id可以通过Context.ConnectionId来获取。当然不用Client.Client(Context.ConnectionId) ,也可以使用Client.Caller()方法直接发送。

Client.Clients(IList connectionIds) 这个方法的意思就是想一组string 的几个ConnectionId发送消息。类似于QQ上@好友的那种功能。 

using Microsoft.AspNet.SignalR;using Microsoft.AspNet.SignalR.Hubs;using Newtonsoft.Json;using System;using System.Collections.Generic;using System.ComponentModel.DataAnnotations;using System.Linq;using System.Threading.Tasks;namespace WebApplication2{    [HubName("UserHub")]    public class UserHub : Hub    {        #region 字段        public static List users = new List();        #endregion 字段        #region 方法        //获取所有用户在线列表        private void GetUsers()        {            var list = users.Select(s => new { s.Name, s.ConnectionID }).ToList();            string jsonList = JsonConvert.SerializeObject(list);            Clients.All.getUsers(jsonList);        }        //登记名字        public void LoginIn(string name)        {            //查询用户            var user = users.SingleOrDefault(u => u.ConnectionID == Context.ConnectionId);            if (user != null)            {                user.Name = name;//登记名字                Clients.Client(Context.ConnectionId).showId(Context.ConnectionId);            }            GetUsers();        }        //发送消息        [HubMethodName("sendMessage")]        public void SendMessage(string connectionId, string message)        {            Clients.All.hello();            var user = users.Where(s => s.ConnectionID == connectionId).FirstOrDefault();            if (user != null)            {                Clients.Client(connectionId).addMessage(message + "" + DateTime.Now, Context.ConnectionId);                //给自己发送,把用户的ID传给自己                Clients.Client(Context.ConnectionId).addMessage(message + "" + DateTime.Now, connectionId);            }            else            {                Clients.Client(Context.ConnectionId).showMessage("该用户已离线");            }        }        ///         /// 重写连接事件        ///         ///         public override Task OnConnected()        {            //查询用户            var user = users.Where(w => w.ConnectionID == Context.ConnectionId).SingleOrDefault();            //判断用户是否存在,否则添加集合            if (user == null)            {                user = new User("", Context.ConnectionId);                users.Add(user);            }            return base.OnConnected();        }        public override Task OnDisconnected(bool stopCalled)        {            var user = users.Where(p => p.ConnectionID == Context.ConnectionId).FirstOrDefault();            //判断用户是否存在,存在则删除            if (user != null)            {                //删除用户                users.Remove(user);            }            GetUsers();//获取所有用户的列表            return base.OnDisconnected(stopCalled);        }        #endregion 方法    }    public class User    {        #region 构造函数        public User(string name, string connectionId)        {            this.Name = name;            this.ConnectionID = connectionId;        }        #endregion 构造函数        #region 属性        [Key]        public string ConnectionID { get; set; }        public string Name { get; set; }        #endregion 属性    }}

到此,相信大家对“Asp.net如何通过SignalR2进行实时聊天”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯