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

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

前言

用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 UserListselect 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 + '" οnclick="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 οnclick="RemoveRoom(this)">退出</button>\' + val + '房间\聊天记录如下:<ul>\</ul>\<input type="text" /> <button οnclick="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 加我请注明来源 - -,我们共同讨论.

我会坚持写完本系列..

posted on 2015-07-09 16:20 NET未来之路阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/4633520.html

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

用SignalR 2.0开发客服系统[系列5:使用SignalR的中文简体语言包和其他技术点]
原文:用SignalR 2.0开发客服系统[系列5:使用SignalR的中文简体语言包和其他技术点] 前言交流群:195866844 目录: 用SignalR 2.0开发客服系统[系列1:实现群发通 ...
php开发客服系统(持久连接+轮询+反向ajax)
欢迎在php严程序 - php教程学习AJAX教程, 本节课讲解:php开发客服系统(持久连接+轮询+反向ajax) php开发客服系统(下载源码) 用户端(可直接给客户发送消息) 客服端(点击用户名 ...
2022.8月更新在线客服系统源码外贸聊天通讯带翻译多语言接待支持网页APP
8月4号更新日志:更新谷歌翻译接口,更新发送语音功能,更新地图发送功能,优化前端接待页面UI. 8月22号更新日志:主要代码重整,防止被反Z中心错误判断DNS污染拦截. 原文章地址:http://pe ...
防黑运营版在线客服系统源码/多商户机器人/自助注册客服系统源码/im即时通讯聊天系统源码
☑️ 编号:ym213 ☑️ 品牌:thinkPHP ☑️ 语言:php ☑️ 大小:99MB ☑️ 类型:在线客服系统源码 ☑️ 支持:im即时通讯
【客服系统】在线客服系统源码外贸聊天通讯带翻译多语言支持网页安卓苹果打包封装APP
随着全球化的加速推进,外贸行业对于在线客服系统的需求日益增长.一款功能强大.支持多语言交流.适用于网页和移动端的在线客服系统源码成为了众多企业的首选.本文将介绍一款名为"外贸聊天通讯带翻译多 ...
怎么联系vue客服_Vue在线客服系统【开源项目】
1. 项目介绍一个基于Vue2.0的在线客服系统. 技术栈包含:Vue.VueX.Vue Router.Element UI. 2. 功能介绍项目包含了2个模块:客服端和访客端. 2.1 客服端功 ...
ChatGPT客服系统产品-利用chatgpt训练企业知识开发个性化客服系统
打造最前沿的AI智能客服系统,基于自有数据语料,充分运用ChatGPT的大模型自然语言生成能力,定制化客服系统为企业提供自主性的客服服务能力. ChatGPT如何革新智能客服? 根据当前ChatGPT ...
做好开源客服系统，春松客服入驻 Rainbond 开源应用商店 | Chatopera
春松客服是通过开源,以新的模式为企业交付智能客服系统: OpenSource + Cloud.OpenSource 让更多人有开发客服系统的技能,Cloud 让测试.上线.成本都比现在的模式容易.甚至 ...
多商户机器人,自助注册在线客服系统,im即时通讯聊天
介绍: 自助注册,免费试用 - 加强客户体验,商机转化率提升50% - 提升在线客服效率,专注线上转化多重技术保障 - 动态DNS持续重连直至到达 - 全面的SLA保障体系,大数据集群部署多渠道 ...

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

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

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

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

最新文章

热门文章