基于SignalR的web端即时通讯 - ChatJS
先看下效果。
ChatJS 是基于SignalR实现的Web端IM,界面风格模仿的是“脸书”,可以很方便的集成到已有的产品中。
项目官网:http://chatjs.net/
github地址:https://github.com/andrerpena/ChatJS
在浏览器端,ChatJS是一系列的jQuery插件,这些代码都是使用TypeScript(微软开发的JS的一个面向对象超集,可以编译成JS)编写。在服务端,是一个简单的类库。如果要集成ChatJS ,服务端需要做的仅仅是实现 IChatHub接口。同时,源码中作者也给出了一个浏览器端和服务端的完整实现。
运行作者提供的Demo
1,确保安装 了VS2013,以及SqlServer2008或更新的版本。这是作者提的要求,但是我用VS2012也能打开且运行的很好。
2,下载代码:https://github.com/andrerpena/ChatJS。
3,创建一个叫做ChatJS 的数据库,并执行 代码中的 DbScripts\script.sql 脚本创建数据库。
4,VS打开解决方案,并修改web.config的EF数据库连接字符串。
5,编译后运行,用户名和密码都是“admin”。
在Web项目中集成 ChatJS
1,添加 ChatJS的引用。在NuGet管理器中搜索“ChatJS”并安装,或命令行安装:Install-Package ChatJS
2,确保启动了SignalR。
如果没有安装SignalR,则首先需要使用NuGet安装SignalR,然后在Web项目的根目录中创建一个名为 Startup.cs的文件,输入以下代码:
using ChatJs.Admin;
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof (Startup))]
namespace ChatJs.Admin
{
public partial class Startup
{
public void Configuration(IAppBuilder app)
{
this.ConfigureAuth(app);
app.MapSignalR();
}
}
}
然后,在需要使用ChatJS的页面引入以下两个JS脚本:
<script src="/Scripts/jquery.signalR-2.0.3.min.js"></script>
<script src="/signalr/hubs" type="text/javascript"></script>
以上两个脚本都是SignalR所必须的,有关SignalR的更多使用说明可以参考:http://signalr.net/。
3,在需要使用ChatJS 的地方引用以下两个文件:
<script src="/ChatJS/js/jquery.chatjs.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/ChatJS/css/jquery.chatjs.css" />
4,创建一个叫ChatHub的类,并实现IChatHub接口。
5,初始化ChatJS
<script type="text/javascript">
$(function() {
$.chat({
// your user information
userId: 1, // this should be dynamic
// text displayed when the other user is typing
typingText: ' is typing...',
// the title for the user's list window
titleText: 'Chat',
// text displayed when there's no other users in the room
emptyRoomText: "There's no one around here. You can still open a session in another browser and chat with yourself :)",
// the adapter you are using
adapter: new SignalRAdapter()
});
});
</script>
基于SignalR的web端即时通讯 - ChatJS的更多相关文章
- Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE
1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...
- 新手入门:史上最全Web端即时通讯技术原理详解
前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...
- Web端即时通讯技术原理详解
前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...
- web 端即时通讯
1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...
- Web端即时通讯基础知识补课:一文搞懂跨域的所有问题!
本文原作者: Wizey,作者博客:http://wenshixin.gitee.io,即时通讯网收录时有改动,感谢原作者的无私分享. 1.引言 典型的Web端即时通讯技术应用场景,主要有以下两种形式 ...
- 新手入门贴:史上最全Web端即时通讯技术原理详解
关于IM(InstantMessaging)即时通信类软件(如微信,QQ),大多数都是桌面应用程序或者native应用较为流行,而网上关于原生IM或桌面IM软件类的通信原理介绍也较多,此处不再赘述.而 ...
- Web端即时通讯、消息推送的实现
https://blog.csdn.net/DeepLies/article/details/77726823
- web端及时通讯原理
前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...
- 基于XMPP协议的手机多方多端即时通讯方案
一.开发背景 1.国际背景 随着Internet技术的高速发展,即时通信已经成为一种广泛使用的通信方式.1996年Mirabilis公司推出了世界上第一个即时通信系统ICQ,不到10年间,即时通信(I ...
随机推荐
- agsXMPP参考代码
agsXMPP 1.删除好友 XmppCon.RosterManager.RemoveRosterItem(node.RosterItem.Jid); 2.注销用户 void userConn_OnL ...
- MySQL——保证数据的完整性
为了防止垃圾的产生,从而影响数据库的执行效率. 1实体完整性——行数据的有效性 唯一约束(unique).主键约束(primary key) 2域完整性——列数据的有效性 非空约束(not nul ...
- Linux多线程服务端编程一些总结
能接触这本书是因为上一个项目是用c++开发基于Linux的消息服务器,公司没有使用第三方的网络库,卷起袖子就开撸了.个人因为从业经验较短,主 要负责的是业务方面的编码.本着兴趣自己找了这本书.拿到书就 ...
- windows下搭建scrapywindows 7 (64) + python 3.5 (64)
说明 之前在 window 10 (64) + python 3.5 (64) 环境下就已经成功安装了 scrapy,当然也费了不少周折. 由于近日将系统换回 windows 7 (64),再安装 s ...
- python中几个常见的黑盒子之“字典dict” 与 “集合set”
这里说到"字典dict" 和 "集合set"类型,首先,先了解一下,对于python来说,标准散列机制是有hash函数提供的,对于调用一个__hash__方法: ...
- vpython初探
vpython 是python默认的3D模块,和python有一样的风格.与PyOpenGL相比,容易上手. vpython下载:vpython的官网(www.vpython.org).顺便说一句,官 ...
- c# udp局域网通信
udp224.0.0.1 子网上的所有系统224.0.0.2 子网上的所有路由器224.0.0.12 dhcp服务器224.0.1.1 ntp224.0.1.24 wins服务器 http://www ...
- 一个书店管理系统java
自己的第一个小程序 ps:书是在集合里面后面文件处理的有一点小问题,希望有人会给点意见 //客户类 import java.io.Serializable; public class Customer ...
- Android视图绘制流程完全解析,带你一步步深入了解View(二)
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/16330267 在上一篇文章中,我带着大家一起剖析了一下LayoutInflater ...
- viewpage 循环滑动播放图片
一般来说,viewpage 只支持图片的顺序滑动播放,在滑到边界时就再也滑不动了,如果要想继续滑动,只能向两边额外增加一张相片,即把第一张相片的位置放在最后一张图片的后面,给用户的感觉我继续滑就滑到了 ...