用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 ...
随机推荐
- Linux 开机时网络自动连接
简单版本: cd /etc/sysconfig/network-scripts/ vi ifcfg-enoXXX 输入:reboot重启 或者输入:service network restart ...
- 02.SQLServer性能优化之---牛逼的OSQL----大数据导入
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 上一篇:01.SQLServer性能优化之----强大的文件组----分盘存储 http ...
- JavaScript 自定义对象
在Js中,除了Array.Date.Number等内置对象外,开发者可以通过Js代码创建自己的对象. 目录 1. 对象特性:描述对象的特性 2. 创建对象方式:对象直接量.new 构造函数.Objec ...
- 【原】FMDB源码阅读（一）
[原]FMDB源码阅读(一) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 说实话,之前的SDWebImage和AFNetworking这两个组件我还是使用过的,但是对于 ...
- UIViewController生命周期-完整版
一.UIViewController 的生命周期 下面带 (NSObject)的方法是NSObject提供的方法.其他的都是UIViewController 提供的方法. load (NSObje ...
- StringUtils的isBlank与isEmply
1.public static boolean isEmpty(String str) 判断某字符串是否为空,为空的标准是 str==null 或 str.length()==0 StringUtil ...
- [原创]关于Hibernate中的级联操作以及懒加载
Hibernate: 级联操作 一.简单的介绍 cascade和inverse (Employee – Department) Casade用来说明当对主对象进行某种操作时是否对其关联的从对象也作类似 ...
- 在redis中使用lua脚本让你的灵活性提高5个逼格
在redis的官网上洋洋洒洒的大概提供了200多个命令,貌似看起来很多,但是这些都是别人预先给你定义好的,但你却不能按照自己的意图进行定制, 所以是不是感觉自己还是有一种被束缚的感觉,有这个感觉就对了 ...
- 【一起学OpenFOAM】系列由来
1 为什么要学习OpenFOAM 掐指算起来,接触CFD也差不多有十个年头了,其间一直使用的商用CFD软件,有Fluent.CFX.StarCCM+等,这些商用软件各有其优缺点,都能较好的解决常规的工 ...
- 修改MySQL默认字符集编码
好记心不如烂笔头,很多东西当时没记下来,过了就忘了,下次用到时又得浪费好多时间才能解决.今天又遇到修改MySQL默认字符集编码的问题,折腾了半天解决了,赶快记录下来,以后就不用每次折腾了. 查看MyS ...