• 用SignalR 2.0开发客服系统[系列3:实现点对点通讯]


    前言

    交流群:195866844

    目录:

    用SignalR 2.0开发客服系统[系列1:实现群发通讯]

    用SignalR 2.0开发客服系统[系列2:实现聊天室]

    真的很感谢大家的支持,今天发表系列3,我们的正菜马上就要来了..

    开发环境

     开发工具:VS2013 旗舰版

     数据库:未用

     操作系统:WIN7旗舰版

    正文开始

    首先我们来看看实现的效果:

    所用到的方法和类(重要):

    其实细心的朋友应该早就发现了,在上篇博客我们就已经用到了这个方法:

    //调用指定连接对象的JS               
    Clients.Client(连接对象的唯一标识).addMessage("");
    
    //调用指定集合中所有连接对象的JS
    Clients.Clients(集合).addMessage("")

    下面上代码:

    首先实体类:

    很简单,只有一个用户类

    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.Linq;
    using System.Web;
    
    namespace SignalRTest
    {
        /// <summary>
        /// 用户类
        /// </summary>
        public class UserInfo
        {
            [Key]
            public string ContextID { get; set; }
            public string Name { get; set; }
    
        }
    
    }

    Hub的源码(同样,注释很全,我就不单独的拿出来讲了):

    using Microsoft.AspNet.SignalR;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Threading.Tasks;
    using Microsoft.AspNet.SignalR.Hubs;
    using Newtonsoft.Json;
    
    namespace SignalRTest
    {
        [HubName("ptopHub")]
        public class PTPHub : Hub
        {
           public static List<UserInfo> UserList = new List<UserInfo>();
           //public static List<RoomInfo> RoomList = new List<RoomInfo>();
    
            /// <summary>
            /// 重写链接事件
            /// </summary>
            /// <returns></returns>
           public override Task OnConnected()
           {
               // 查询用户。
               var user = UserList.SingleOrDefault(u => u.ContextID == Context.ConnectionId);
    
               //判断用户是否存在,否则添加进集合
               if (user == null)
               {
                   user = new UserInfo()
                   {
                         Name = "",
                         ContextID = Context.ConnectionId
                   };
                   UserList.Add(user);
    
               }
               
               return base.OnConnected();
           }
            /// <summary>
            /// 获取用户名和自己的唯一编码
            /// </summary>
            /// <param name="name"></param>
           public void GetName(string name)
           {
               // 查询用户。
               var user = UserList.SingleOrDefault(u => u.ContextID == Context.ConnectionId);
               if (user != null)
               {
                   user.Name = name;
                   Clients.Client(Context.ConnectionId).showID(Context.ConnectionId);
               }
               
               GetUserList();
           }
            /// <summary>
            /// 重写断开的事件
            /// </summary>
            /// <returns></returns>
           public override Task OnDisconnected()
           {
               var user =UserList.Where(u => u.ContextID == Context.ConnectionId).FirstOrDefault();
    
               //判断用户是否存在,存在则删除
               if (user != null)
               {
                   //删除用户
                   UserList.Remove(user);
    
               }
               //更新所有用户的列表
               GetUserList();
               return base.OnDisconnected();
           }
    
           /// <summary>
           /// 更新所有用户的在线列表
           /// </summary>
           private void GetUserList()
           {
    
               var itme = from a in UserList
                          select new { a.Name, a.ContextID };
               string jsondata = JsonConvert.SerializeObject(itme.ToList());
               Clients.All.getUserlist(jsondata);
    
           }
            /// <summary>
            /// 发送消息
            /// </summary>
            /// <param name="contextID"></param>
            /// <param name="Message"></param>
           public void SendMessage(string contextID, string Message)
           {
               var user = UserList.Where(u => u.ContextID == contextID).FirstOrDefault();
    
               //判断用户是否存在,存在则发送
               if (user != null)
               {
                   //给指定用户发送,把自己的ID传过去
                   Clients.Client(contextID).addMessage(Message + " " + DateTime.Now,Context.ConnectionId);
                   //给自己发送,把用户的ID传给自己
                   Clients.Client(Context.ConnectionId).addMessage(Message + " " + DateTime.Now, contextID);
               }
               else
               {
                   Clients.Client(Context.ConnectionId).showMessage("该用户已离线");
               }
           }
          
        }
    }

    前端HTML+JS(上次有朋友吐槽JS没注释 - -,实在不好意思,呃..这次加上了..):

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>点对点聊天</title>
        <script src="Scripts/jquery-1.10.2.min.js"></script>
        <script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
        <!--这里要注意,这是虚拟目录,也就是你在OWIN Startup中注册的地址-->
        <script src="signalr/hubs"></script>
        <script type="text/javascript">
            var Clients = [];
            $(function () {
                chat = $.connection.ptopHub;
                //注册提示信息方法
                chat.client.showMessage = function (Message) {
                    alert(Message);
                }
                //注册显示信息的方法
                chat.client.addMessage = function (Message,contextID) {
                    if ($.inArray(contextID,Clients) == -1) {
                        AddRoom(contextID);
                    } 
                        $("#" + contextID).find("ul").each(function () {
                            $(this).append('<li>' + Message + '</li>')
                        })
                }
                //注册查询房间列表的方法
                chat.client.getUserlist = function (data) {
                    if (data) {
                        var jsondata = $.parseJSON(data);
                        $("#roomlist").html(" ");
                        for (var i = 0; i < jsondata.length; i++) {
                            var html = ' <li>用户名:' + jsondata[i].Name + '<button roomname="' + jsondata[i].ContextID + '" onclick="PtoPSendStart(this)">与他聊天</button></li>';
                            $("#roomlist").append(html);
                        }
                    }
                }
                //注册显示个人信息的方法
                chat.client.showID = function (data) {
                    $("#ConID").html(data);
                    Clients.push(data);
                }
                // 获取用户名称。
                $('#username').html(prompt('请输入您的名称:', ''));
                //连接成功后获取自己的信息
                $.connection.hub.start().done(function () {
                    chat.server.getName($('#username').html());
                });
    
            });
            //开始聊天
            function PtoPSendStart(data) {
                var val = $(data).attr('roomname');
                AddRoom(val);
            }
            //显示聊天窗口
            function AddRoom(val) {
                Clients.push(val)
                var html = '<div style="float:left; margin-left:30px; border:double" id="' + val + '" roomname="' + val + '"><button onclick="RemoveRoom(this)">退出</button>
                                        ' + val + '房间
                                                    聊天记录如下:<ul>
                                                    </ul>
                                        <input type="text" /> <button onclick="SendMessage(this)">发送</button>
                                        </div>'
                $("#RoomList").append(html);
    
            }
            //发送消息
            function SendMessage(data) {
                var message = $(data).prev().val();
                var room = $(data).parent();
                var username = $("#username").html();
                message = username + ":" + message;
                var roomname = $(room).attr("roomname");
                chat.server.sendMessage(roomname, message);
            }
    
        </script>
    </head>
    <body>
        <div>
            <div>名称:<p id="username"></p></div>
            <div>用户唯一编码:<p id="ConID"></p></div>
        </div>
        <div style="float:left;border:double">
            <div>在线用户列表</div>
            <ul id="roomlist"></ul>
        </div>
        <div id="RoomList">
        </div>
    </body>
    </html>

    至此就完成了基本的点对点聊天的功能,真心很感谢大家的支持,希望能对大家有帮助.

    我的Q :524808775 加我请注明来源 - -,我们共同讨论.

    我会坚持写完本系列..

  • 相关阅读:
    左耳听风-ARTS-第4周(2019/4/21-2019/4/27)
    Java集合总结
    Zuul网关总结
    左耳听风-ARTS-第3周(2019/4/7-2019/4/13)
    左耳听风-ARTS-第2周(2019/3/31-2019/4/6)
    Java泛型相关总结(下)
    左耳听风-ARTS-第1周
    去长江边走走,看看
    第1记
    c#发送邮件
  • 原文地址:https://www.cnblogs.com/GuZhenYin/p/4633205.html
Copyright © 2020-2023  润新知