用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 ...
随机推荐
- 为.NET Core项目定义Item Template
作为这个星球上最强大的IDE,Visual Studio不仅仅提供了很多原生的特性,更重要的是它是一个可定制的IDE,比如自定义Project Template和Item Template就是一个非常 ...
- CSS 特殊属性介绍之 pointer-events
首先看一下 MDN 上关于 pointer-events 的介绍: CSS属性 pointer-events 允许作者控制特定的图形元素在何时成为鼠标事件的 target.当未指定该属性时,SVG 内 ...
- javascript之活灵活现的Array
前言 就如同标题一样,这篇文章将会灵活的运行Array对象的一些方法来实现看上去较复杂的应用. 大家都知道Array实例有这四个方法:push.pop.shift.unshift.大家也都知道 pus ...
- [C#] 简单的 Helper 封装 -- SQLiteHelper
using System; using System.Data; using System.Data.SQLite; namespace SqliteConsoleApp { /// <summ ...
- java面向对象六原则一法则
1. 单一职责原则:一类只做它该做的事. 2. 里氏替换原则:子类必须能够替换基类(父类),否则不应当设计为其子类. 3. 依赖倒换原则:设计要依赖于抽象而不是具体化. 4. 接口隔离原则:接口要小而 ...
- 【读书】PHP程序员要读的书目(不断完善中)
本文地址 分享提纲: 1. PHP 2. Linux 3. Apache/Nginx 4. Mysql 5.设计模式/架构 6. 缓存并发 7. 其他语言 8. 代码基础 9. 大前端 10. 管理生 ...
- css样式之border-image
border-image-source 属性设置边框的图片的路径[none | <image>] div { border: 20px solid #000; border-image-s ...
- SuperMap-iServer-单点登录功能验证(CAS)
SuperMap-iServer-单点登录功能验证(CAS) 1.测试目的: 验证SuperMap-iServer使用CAS单点登录的功能是否正常. 2.测试环境: SuperMap-iServer8 ...
- centos6.5 nginx-1.8.0和ftp搭建图片服务器
一.Nginx的安装步骤 1.Nginx安装环境: gcc: 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有gcc环境,需要安装gcc:yum install gcc-c+ ...
- OpenGL shader 中关于顶点坐标值的思考
今天工作中需要做一个事情: 在shader内部做一些空间距离上的计算,而且需要对所有的点进行计算,符合条件的显示,不符合条件的点不显示. 思路很简单,在vertex shader内知道顶点坐标,进行计 ...