用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 ...
随机推荐
- Apache 与 php的环境搭建
Apache和PHP的版本分别为: httpd-2.4.9-win64-VC11.zip php-5.6.9-Win32-VC11-x64.zip 下载地址: php-5.6.9-Win32-VC11 ...
- 按需加载.js .css文件
首先,理解按需加载当你需要用到某个js里面的函数什么鬼,或者某个css里的样式的时候你才开始加载这个文件. 然后是怎样实现的,简单来说就是在js中动态的createElem<script> ...
- ls: 无法访问/usr/sbin/smartctl: 没有那个文件或目录
环境:RHEL6.5 + Oracle 11.2.0.4 RAC 在安装RAC时,检查时缺少包 cvuqdisk-1.0.9-1,oracle提供脚本修复安装. 但在执行时报错: [root@orad ...
- webstorm下载&&安装过程&&打开项目
一.webstorm下载 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为"Web前端开发神器"."最强大的HT ...
- 微信小程序IDE（微信web开发者工具）安装、破解手册
1.IDE下载 微信web开发者工具,本人是用的windows 10 x64系统,用到以下两个版本的IDE安装工具与一个破解工具包: wechat_web_devtools_0.7.0_x64.exe ...
- 真假4K电视验证：一张图足矣
国庆期间笔者逛了一下电视卖场,考虑到国内电视台以及宽带的情况,1080P至少还能用十年,所以只想要个2k电视就够了.然而事与愿违,卖场中八成的都是4k电视,清一色的4k电视让人眼花缭乱.难道4k面板技 ...
- BPM协同平台解决方案分享
一.需求分析 企业信息化的过程都是从单纯解决一个业务功能问题,到解决企业内部业务流程问题,再扩展到解决不同业务流程的关联互动问题, 核心是业务的集成和业务的协同,需要有一个统一的业务协同平台. 国内的 ...
- 使用nginx反向代理，一个80端口下，配置多个微信项目
我们要接入微信公众号平台开发,需要填写服务器配置,然后依据接口文档才能实现业务逻辑.但是微信公众号接口只支持80接口(80端口).我们因业务需求需要在一个公众号域名下面,发布两个需要微信授权的项目,怎 ...
- JavaWeb的国际化
国际化 1.国际化开发概述 1.1.软件的国际化 软件开发时,要使它能同时应对世界不同地区和国家的方法,并针对不同地区和国家的方法,提供相应的,符合来访者阅读习惯的页面或数据 国际化简称:i18n : ...
- linux常用命令(2)pwd命令
pwd 命令1 命令格式:pwd [选项]2 命令功能查看当前工作目录的完整路径3 常用参数一般不带任何参数如果目录是链接时:pwd -P 显示实际路径,而非使用链接路径4 常用实例:4.1 用pwd ...