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

时间：2022-04-25 07:39:00
前言

交流群:195866844

目录:

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

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

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

开发环境

开发工具:VS2013 旗舰版

数据库:未用

操作系统:WIN7旗舰版

正文开始

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

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

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

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

//调用指定连接对象的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 加我请注明来源 - -,我们共同讨论.

我会坚持写完本系列..

相关文章