ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(三) 激动人心的时刻到啦,实现1v1聊天   看起来挺简单,细节还是很多的,好,接上一篇,我们已经成功连接singalR服务器了,那么剩下的内容呢,就是一步一步实现聊天功能. 我们先看看缺什么东西 点击好友弹框之后,要给服务器发消息,进入组Group.Group原理在上一篇已经介绍了,这里不再赘述. 点击发送消息到后台,后台在传送回来 将htmlappend到相应元素上,demo已经实现了,我们把代码拿过来用就可以了 模拟…

ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据   最近碰巧发现一款比较好的Web即时通讯前端组件,layim,百度关键字即可,我下面要做的就是基于这个前端组件配合后台完成即时聊天等功能.当然用到的技术就是ASP.NET SingalR框架.本人不会css和前端的东西,只会少量的js,所以前端的代码不做介绍,喜欢前端的同学可以自行研究,闲言少叙,书归正传. 我们先看一下layim的效果,看起来还是挺友好的,界面也不错.不过,我做了些调整,具体其他细节…

上一篇已经简单介绍了layim WebUI即时通讯组件和获取数据的后台方法.现在要讨论的是SingalR的内容,之前都是直接贴代码.那么在贴代码之前先分析一下业务模型,顺便简单讲一下SingalR里的部分方法. 进入正题,我们要做,即时通讯,就要考虑收发消息.我们先看推送消息的方法,找到 interface IHubConnectionContext<T> 接口定义,Hub文件里的Clients就是继承 IHubConnectionContext 接口,方法定义如下: public inter…

休息了两天,还是决定把这个尾巴给收了.本篇是最后一篇,也算是草草收尾吧.今天要加上表情功能和群聊.基本上就差不多了,其他功能,读者可以自行扩展或者优化.至于我写的代码方面,自己也没去重构.好的,我们开始在原有的基础上添加功能. 1.表情功能 表情我用了一个jquery插件,qqFace.由于GitHub中源码已经包含,我这里不在粘贴地址.先看一下添加表情后的效果吧. 表情这里不要忘了加页面样式,表情选中样式.还有一个就是小bug就是,表情框被聊天框限制住了(修改方法:将layim.css里面的代…

看起来挺简单,细节还是很多的,好,接上一篇,我们已经成功连接singalR服务器了,那么剩下的内容呢,就是一步一步实现聊天功能. 我们先看看缺什么东西 点击好友弹框之后,要给服务器发消息,进入组Group.Group原理在上一篇已经介绍了,这里不再赘述. 点击发送消息到后台,后台在传送回来 将htmlappend到相应元素上,demo已经实现了,我们把代码拿过来用就可以了 模拟用户登录,点击发送聊天 在做上述工作之前,还是要做许多准备工作的.我们分析一下界面元素 好的,可以看到,一个消息里面有消…

最近碰巧发现一款比较好的Web即时通讯前端组件,layim,百度关键字即可,我下面要做的就是基于这个前端组件配合后台完成即时聊天等功能.当然用到的技术就是ASP.NET SingalR框架.本人不会css和前端的东西,只会少量的js,所以前端的代码不做介绍,喜欢前端的同学可以自行研究,闲言少叙,书归正传. 我们先看一下layim的效果,看起来还是挺友好的,界面也不错.不过,我做了些调整,具体其他细节可以自己完善. 界面看完了,那么看一下数据.demo里做的也不错,ajax也封装好了,那么我们就直…

有开发者提问怎么做历史记录功能和即使不打开聊天窗口有消息提醒功能.简单抽时间写了点代码.不过只是基本思路,具体细节没有实现. 正如前几篇博客中提到的,读取历史记录什么时候读取呢?按照常理,应该是打开聊天窗口的时候加载历史记录,当然也可以选择异步加载好,然后打开哪个窗口就加载哪部分的记录.当然我们并不知道用户会打开哪个窗口,所以,我还是建议,当用户选择人聊天的时候就读取历史记录.那么之前的功能已经做好了.我们需要充分利用  ctoc  方法.ctoc是什么?不明白的就看看本系列前几篇文章吧. 现在…

本篇也算是个番外篇了,跟之前几篇关系不算大.之前一篇  RabbitMQ .NET Client 实战实验 里有介绍过今天要用的内容. 做了一下小更改,就是在用户聊天的时候,消息记录不直接进入数据库,而是进入队列.然后等待队列逐条处理进入数据库.队列的好处就是确保每条都能得到正确处理,如果数据插入失败,也不会出现数据丢失的情况.(很遗憾我自己还没实现处理失败的情况) 直接进入正题,先新建一个项目,引入相应的dll ChatQueue代码: public sealed class ChatQueu…

上一篇介绍了加好友的流程,这里不再赘述,不过之前的聊天只能发送普通文字,那么本篇就教你如何实现发送附件和图片消息.我们先对功能进行分析: 发送图片,附件,需要实现上传图片和附件的功能. textarea不能显示图片,所以需要做图片转换 接收到消息之后需要在将图片转换回原来图片 附件特殊样式处理 那么我们先实现文件的上传功能,由于用的是MVC,就简单做一个无刷新无进度条上传,所以图片和文件就需要小一点,否则用户体验就差了.我用的是jquery.form.js实现form提交文件,后台用HttpPo…

不知道距离上一篇多久没有写了,可能是因为忙(lan)的关系吧.废话不多说,今天要介绍的不算什么新知识,主要是逻辑上的一些东西.什么逻辑呢,加好友,发送好友申请,对方审批通过,拒绝.(很遗憾,对方审批通过和拒绝后的通知没做,看完本博客的小伙伴有兴趣的可以尝试一下). 抽空写了新版本的聊天室,内容和上次差不多,这次加上了数据库来处理一些逻辑,包括登录注册功能,OK,现在开始. 好友申请 新版本中做了一个默认分组:注册用户 的功能,即所有注册进来的人都会存在于该组中,该组和普通群组一样,可以群聊,也可…

简单介绍 关于SignalR的简单实用 请参考 Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室) 在上一篇中,我们只是介绍了简单的消息推送,今天我们来修改一下,实现保存消息,历史消息和用户在线 由于,我这是在一个项目([无私分享:从入门到精通ASP.NET MVC]从0开始,一起搭框架.做项目 目录索引)的基础上做的,所以使用到的一些借口和数据表,不详细解析,只是介绍一下思路和实现方式,供大家参考 用户登录注册信息 当用户登录之后,我们注册一下用户的信息,我们…

简介       ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相通知消息及调用方法,当然这是实时操作的. WebSockets是HTML5提供的新的API,可以在Web网页与服务器端间建立Socket连接,当WebSockets可用时(即浏览器支持Html5)SignalR使用WebSockets,当不支持时SignalR将使用其它技术来保证达到相同效果…

ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相通知消息及调用方法,当然这是实时操作的. https://github.com/SignalR/SignalR.git 先给大家看看实现的效果图.本文底部有完整demo 不想看我墨迹的可以跳过了^_^. 第一步: 先创建一个目标框架是.netframework 4.5或以上的MVC项目. 然后选择工具---库…

一直以来,大家都苦恼怎么实现微信公众帐号可以接入客服,也因此很多第三方接口平台也开发客服系统CRM系统,不过不是操作复杂就是成本太高.今天分享一个低成本又简便的方法,让你的公众帐号接入QQ客服.下面介绍具体的方法: 1.首先,这个方法目前微信最新的手机版本都是适用的,测试过微信5.0安卓版本还有点问题,主要是点击了之后不断地刷新一个空白的网页. 2.公众帐号有自定义菜单功能.有自定义菜单的就可以直接把QQ客服链接网址放在菜单上,我们的粉丝点击菜单就会自动跳转.如果粉丝的手机里面有安装手机QQ的,…

上篇:ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(一) 之 基层数据搭建,让数据活起来(数据获取) 上一篇我们已经完成了初步界面的搭建工作,本篇将介绍IM的核心内容了,就是SignalR的Hub类.整个即时通讯机制都是以它为基础的.至于原理我也不再讲解,讲了也不如专业的文章讲得好.所以我们直接看业务,上代码.有一部分原理 在文章 ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(二) 实现聊天室连接 (当时是LayIM1.0版本).原理…

前端时间听一个技术朋友说 LayIM 2.0 发布了,听到这个消息抓紧去官网看了一下.(http://layim.layui.com/)哎呀呀,还要购买授权[大家支持一下哦],果断买了企业版,喜欢钻研的我没有源码怎么行,说来也惭愧,发布好久了我才知道.之前写过一系列的博客,当时是ASP.NET SignalR 结合 LayIM 1.0 的一个小程序.看了一下最新版本的LayIM,太赞了.我电脑里的VS已经蠢蠢欲动了.话不多说,先预览一下效果. 主聊天界面: 好友列表界面:        以及自定…

前言 不知不觉已经十四篇了,其实已经没有什么可写了.但是突然发现layim中带的客服功能没有用到.于是乎,抽点时间完成吧.其实之前的工作已经把客服功能完成了一大半,剩下的我们稍微调整即可.今天的演示我们放在后边,直接进入讲解. 客服思路讲解 大家去一些公司网站都会发现,网页侧面或者自动弹出一些客服聊天框,人家很热情的和你交谈.我们也可以用layim来实现.首先,页面添加一个按钮,点击按钮触发客服模式. <a onclick="javascript:global.other.kefu(148…

2018-09-19 更新 :现在已经更新ASP.NET Core Middleware版本.对.NET Core SignalR感兴趣的朋友移步:https://github.com/fanpan26/LayIM.AspNetCore 前端时间听一个技术朋友说 LayIM 2.0 发布了,听到这个消息抓紧去官网看了一下.(http://layim.layui.com/)哎呀呀,还要购买授权[大家支持一下哦],果断买了企业版,喜欢钻研的我没有源码怎么行,说来也惭愧,发布好久了我才知道.之前写过一…

一. 整体介绍 本节:开始介绍SignalR另外一种通讯模型Hub(中心模型,或者叫集线器模型),它是一种RPC模式,允许客户端和服务器端各自自定义方法并且相互调用,对开发者来说相当友好. 该节包括的内容有: ①:从零搭建 ②:Hub模型和URL匹配,默认模式和指定路径 ③:服务器端代码介绍 ④:客户端的两种模式,代理和非代理,各自的写法 ⑤:服务器端和客户端包含的方法和各自如何自定义方法并且相互调用 ⑥:第三方调用的问题,比如:如何在控制器中调用客户端的方法. ⑦:再探聊天室样例   二. 从…

前言 上一篇中讲解了加好友的流程,本篇将介绍好友管理,群组管理的右键菜单功能.当然由于菜单项目太多,都实现也得花费时间.只讲解一下我是如何从不知道怎么实现右键菜单到会自定义菜单的一个过程.另外呢,针对菜单:发送即时消息这个原本在Laim中已经有的功能做出实现,其他的方法,只要按照业务逻辑一一实现即可. 演示 用户信息右键菜单: 好友分组信息右键菜单: 群组信息右键菜单: 思路讲解 首先呢,Layim中针对历史消息这个栏有两个菜单项,清空和删除某一条,这是源代码中已经有的,当我看到这段代码的时候,…

ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(零) 前言  http://www.cnblogs.com/panzi/p/5742089.html ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(一) 之 基层数据搭建,让数据活起来(数据获取)  http://www.cnblogs.com/panzi/p/5745042.html ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(二) 之 Chat…

前言 上一篇中,我们用了反射工厂来解除BLL和UI层耦合的问题.当然那是最简单的解决方法,再复杂一点的程序可能思路相同,但是在编程细节中需要考虑的就更多了,比如今天我在重构过程中遇到的问题.也是接下来我要解决的问题,缓存模块.为什么要解决这个问题呢,由于我们有些下载代码运行的小伙伴,发现怎么运行报错,原来是没有装redis.可是我只想看layim和signalr代码而已啊,不想装什么redis.那么基于昨天的经验,我把缓存模块同样提取出接口,然后加了一个原始的cache层.这个cache是基于S…

大家好,本篇是接上一篇 ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(零) 前言  ASP.NET SignalR WebIM系列第二篇.本篇会带领大家将 LayIM界面中的数据动态化.当然还不涉及即时消息通讯,如果你已经搞定了数据界面,那么本文您可以简单的看一下,或者略过. 进入正题,layim帮我们定义好了数据规则,我们只要写一个接口实现那个json规范就可以了,剩下的事情就交给layim去做,看一下json格式.(对应文件夹:demo/json/getLi…

上篇讲解了如何搭建聊天服务器,以及客户端js怎么和layui的语法配合.服务器已经连接上了,那么聊天还会远吗? 进入正题,正如上一篇提到的我们用 Client.Group(groupId)的方法向客户端推送消息.本篇就先不把业务搞复杂了,就默认现在两个用户都各自打开了对方的聊天窗口,那么聊天过程是这样的. 同理,B给A发消息也是这个流程,因为无论如何,A(ID)和B(ID)都会按照规则生成同一个组名.其中由于LayIM已经帮我们在客户端做好了发送消息并且将消息展示在面板上,所以我们要做的就是当接…

前面几篇基本已经实现了大部分即时通讯功能:聊天,群聊,发送文件,图片,消息.不过这些业务都是比较粗犷的.下面我们就把业务细化,之前用的是死数据,那我们就从加好友开始吧.加好友,首先你得知道你要加谁.Layim界面右下角有个+号,点击它之后就会弹出查找好友的界面,不过那个界面需要自定义.由于前端不是我的强项,勉强凑了个页面.不过不要在意这些细节.这些都不重要,今天主要介绍一下ElasticSearch搜索解决方案.它是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基…

前言 前前一篇留了个小问题,在上一篇中忘了写了,就是关于LayIM已经封装好的上传文件或者图片的问题.对接好接口之后,如果上传速度慢,界面就会出现假死情况,虽然文件正在上传.于是我就简单做了个图标替代来增强用户体验. 上传中... 上传完成后 是不是很简单啊,接下来进入正题. 业务介绍 LayIM中的加好友可以说是不太必要的逻辑,而且其实大部分在模仿QQ,当然业务复杂度肯定没法和QQ比.主线,就是用户A请求添加用户B为好友,用户B收到消息提示之后点击同意或者拒绝或者直接忽略,然后在将消息反馈到用…

前言 上一篇讲解了如何自定义右键菜单,都是前端的内容,本篇内容就一个:查询.聊天历史纪录查询,在之前介绍查找好友的那篇博客里已经提到过 Elasticsearch,今天它又要上场了.对于Elasticsearch不感冒的同学呢,本篇可以不用看啦. from baidu: ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为Apache许可条款下的开放源码发布,…

前言 本篇主要讲解一个东西,就是我们自定义系统消息.效果如下: 首先我们要做的准备工作就是改写 layim 的消息模板,如果不改的话就成为某个用户发送的消息了,那么体验就稍微差一些.找到模板我们看一下. 注意,红框部分是我更改后的,简单读一下可以看出来,我只是给聊天消息加了个参数 system,如果有这个参数,那么我们直接给加一个div就可以了,否则还是显示用户名,消息内容等信息.同样,我们前端调用layim 的getMessage接口,加一个system参数即可. 之前加群加好友流程在第五篇已…

项目简介 利用ASP.NET SignalR技术与Layim前端im框架实现的一个简单的web聊天室,包括单聊,群聊,加好友,加群,好友搜索,管理,群组管理,好友权限设置等功能.涉及技术: ElasticSearch 搜索,支持各种条件搜索,效率高,速度快,稳准狠. Redis缓存,统计在线好友,登录token等 RabbitMQ消息队列,发送消息通过队列降低数据库访问压力,或者延迟执行任务. ASP.NET MVC,UI架构. 以及普通的三层架构等.CRUD 当然其中的这些技术也是纯粹为了使用…

前言 自从此博客发表以及代码开源以来,得到了许多人的关注.也没许多吧,反正在我意料之外的.包括几位大牛帮我做订阅号推广,真的很感谢他们.另外,还有几个高手给我提了一些架构上的问题.其实本身这个项目是没有做什么架构设计的.只是简单分了分层.不过我在经过仔细思考之后决定对项目架构做些调整,当然在我的技术范围之内,我相信还会有第二次,第三次甚至更多重构,我希望把他变得更加完美. 重构思路 对于重构思路,我首先想到的是,让程序能够支持多种数据库,比如我现在用的是SQLServer,而好多朋友用MySQL…