用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 加我请注明来源 - -,我们共同讨论.
我会坚持写完本系列..
用SignalR 2.0开发客服系统[系列3:实现点对点通讯]的更多相关文章
- 用SignalR 2.0开发客服系统[系列1:实现群发通讯]
前言 交流群:195866844 先说一下我为什么会写这个博客吧,(首先说一下,我是一个小菜鸟,讲的不好请指导 - -,) 前段时间公司的项目涉及到在B/S上使用即时通讯,(其实就是做一个B/S的客 ...
- 用SignalR 2.0开发客服系统[系列4:负载均衡的情况下使用SignalR]
前言 交流群:195866844 目录: 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 用SignalR 2.0开发客服系统[系列2:实现聊天室] 用SignalR 2.0开发客服系统 ...
- 用SignalR 2.0开发客服系统[系列5:使用SignalR的中文简体语言包和其他技术点]
前言 交流群:195866844 目录: 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 用SignalR 2.0开发客服系统[系列2:实现聊天室] 用SignalR 2.0开发客服系统 ...
- 用SignalR 2.0开发客服系统[系列2:实现聊天室]
前言 交流群:195866844 上周发表了 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 这篇文章,得到了很多帮助和鼓励,小弟在此真心的感谢大家的支持.. 这周继续系列2,实现聊天室 ...
- php开发客服系统(持久连接+轮询+反向ajax 转载 http://www.tuicool.com/articles/2mU7v2R)
php开发客服系统( 下载源码 ) 用户端(可直接给客户发送消息) 客服端(点击用户名.即可给该用户回复消息) 讲两种实现方式: 一:iframe + 服务器推技术comet(反向ajax,即服务器向 ...
- php开发客服系统(持久连接+轮询+反向ajax)
欢迎在php严程序 - php教程学习AJAX教程, 本节课讲解:php开发客服系统(持久连接+轮询+反向ajax) php开发客服系统(下载源码) 用户端(可直接给客户发送消息)客服端(点击用户名. ...
- Linux + .net core 开发升讯威在线客服系统：同时支持 SQL Server 和 MySQL 的实现方法
前段时间我发表了一系列文章,开始介绍基于 .net core 的在线客服系统开发过程. 有很多朋友一直提出希望能够支持 MySQL 数据库,考虑到已经有朋友在用 SQL Server,我在升级的过程中 ...
- Linux + .net core 开发升讯威在线客服系统：首个经过实际验证的高性能版本
业余时间用 .net core 写了一个在线客服系统.并在博客园写了一个系列的文章,写介绍这个开发过程: .net core 和 WPF 开发升讯威在线客服系统:目录 https://blog.she ...
- .net core 和 WPF 开发升讯威在线客服系统：把 .Net Framework 打包进安装程序
本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程. 系列文章目录: https://blog.shengxunwei.com/Home/Post/44a3 ...
随机推荐
- Socket聊天程序——服务端
写在前面: 昨天在博客记录自己抽空写的一个Socket聊天程序的初始设计,那是这个程序的整体设计,为了完整性,今天把服务端的设计细化记录一下,首页贴出Socket聊天程序的服务端大体设计图,如下图: ...
- Gradle配置APK自动签名完整流程
转载请注明出处:http://www.cnblogs.com/LT5505/p/6256683.html 一.生成签名 1.命令行生成签名,输入命令keytool -genkey -v -keysto ...
- Base64编码
Base64编码 写在前面 今天在做一个Android app时遇到了一个问题:Android端采用ASE对称加密的数据在JavaWeb(jre1.8.0_7)后台解密时,居然解密失败了!经过测试后发 ...
- xpath提取多个标签下的text
title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...
- PowerShell过滤文件中的重复内容
Get-Content -Path E:\test11\data.txt | Sort-Object | Get-Unique 源文件: AA0001 2014-06-30 15:27:13.073 ...
- Matlab slice方法和包络法绘制三维立体图
前言:在地球物理勘探,流体空间分布等多种场景中,定位空间点P(x,y,x)的物理属性值Q,并绘制三维空间分布图,对我们洞察空间场景有十分重要的意义. 1. 三维立体图的基本要件: 全空间网格化 网格节 ...
- 从Vue.js窥探前端行业
近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...
- php cryptr 加密函数
class CryptHelper { /** * 加密 * @param unknown $password * @param unknown $salt * @return string */ p ...
- NSStringCompareOptions
typedefNS_OPTIONS(NSUInteger, NSStringCompareOptions) { NSCaseInsensitiveSearch = 1, //不区分大小写比较 N ...
- SpringMVC_简单小结
SpringMVC是一个简单的.优秀的框架.应了那句话简单就是美,而且他强大不失灵活,性能也很优秀. 机制:spring mvc的入口是servlet,而struts2是filter(这里要指出,fi ...