用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 加我请注明来源 - -,我们共同讨论.

我会坚持写完本系列..

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的SOD蜜

“老坛泡新菜”:SOD MVVM框架,让WinForms焕发新春

火热的MVVM框架 最近几年最热门的技术之一就是前端技术了,各种前端框架,前端标准和前端设计风格层出不穷,而在众多前端框架中具有MVC,MVVM功能的框架成为耀...

3086
来自专栏技术之路

Caliburn.Micro学习笔记(一)----引导类和命名匹配规则

用了几天时间看了一下开源框架Caliburn.Micro 这是他源码的地址http://caliburnmicro.codeplex.com/ 文档也写的很详细...

2118
来自专栏FreeBuf

Wannacry深度解析:第一阶段tasksche

WannaCry 勒索软件是2017年最热门的勒索软件,它利用微软漏洞在全球范围内发起的攻击令世界上100多个国家的成千上万的用户深受影响。俨然一场全球范围内的...

2706
来自专栏企鹅号快讯

Java 9 逆天的十大新特性

在介绍 Java 9 之前,我们先来看看 Java 成立到现在的所有版本。 1990 年初,最初被命名为 Oak; 1995 年 5 月 23 日,Java 语...

1965
来自专栏jessetalks

C#移动跨平台开发(2)Xamarin移动跨平台解决方案是如何工作的?

概述   上一篇 C#移动跨平台开发(1)环境准备发布之后不久,无独有偶,微软宣布了开放.NET框架源代码并且会为Windows、Mac和Linux开发一个核心...

28411
来自专栏数据和云

当Java虚拟机遇上Linux Arena内存池

作者简介 刘韬,云和恩墨中间件服务交付团队专家 Java开发出身,10年WebLogic相关开发、运维工作经验,熟悉SOA、现代业务系统架构中各层组件,尤其擅长...

5167
来自专栏web编程技术分享

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第六节)

35412
来自专栏圣杰的专栏

ABP入门系列(10)——扩展AbpSession

源码路径:Github-LearningMpaAbp 一、AbpSession是Session吗? 1、首先来看看它们分别对应的类型是什么? 查看源码发现Ses...

2636
来自专栏互扯程序

Java 9 逆天的十大新特性

KS Knowledge Sharing 知识分享 现在是资源共享的时代,同样也是知识分享的时代,如果你觉得本文能学到知识,请把知识与别人分享。 在介绍...

2106
来自专栏码农阿宇

EF Core下利用Mysql进行数据存储在并发访问下的数据同步问题

小故事 在开始讲这篇文章之前,我们来说一个小故事,纯素虚构(真实的存钱逻辑并非如此) 小刘发工资后,赶忙拿着现金去银行,准备把钱存起来,而与此同时,小刘的老婆刘...

3215

扫码关注云+社区