前言

　　交流群:195866844

先说一下我为什么会写这个博客吧,(首先说一下,我是一个小菜鸟,讲的不好请指导 - -,)

　  前段时间公司的项目涉及到在B/S上使用即时通讯,(其实就是做一个B/S的客服系统),当时公司很多大牛都说比较难搞,涉及到很多东西.

　　按照我的知识体系..因为之前做过C/S的即时通讯,基于Socket的..很麻烦 - -,很多坑,所以我也说..有点复杂,所以这个功能就被搁置下来了

　　加上项目上线各种忙就忘记了这个事,现在项目进入后期测试阶段就抽出了时间想这个问题,问了大神,说是可以使用SignalR 技术实现.

　　当然,我是直接没听过这个技术,所以去查了很多资料,给我的感觉就是这个SignalR 实在是太方便了.

　　这里我们就不详细的讲SignalR 到底怎么实现和他的机制了,我们只拿来用,有兴趣的可以自己去看这两篇文章.

　　http://blog.darkthread.net/post-2013-12-03-inside-signalr-transport.aspx

　　http://blog.jobbole.com/82746/

　　知道了技术,剩下的就是实现功能,经过查资料发现,很多关于SignalR 的博客和资料都使用的1.XXX版本 现在SignalR最新的是2.几的版本,发现1.0和2.0版本的用法差距还是很大的.

　　所以想写个系列的博客来讲解一下.

　　废话不多说了 - -,我们开始.

　　

　　

使用环境

开发工具:VS2013 旗舰版

数据库:未用

操作系统:WIN7旗舰版

项目创建

首先

第一步:我们创建一个ASP.NET Web的空项目,命名为SignalRTest如下图:

第二步:我们右键项目,添加一个SignalR集线器(V2)新建项,如下图:

添加这个之后我们来看看项目文件夹,会出现这些东西:

蓝色框中为我们所要用到的SignalR集线器类,红色的框为我们要用到的JS库(注意:在添加SignalR集线器之后会自动添加Script这个文件夹)

第三步:添加OWIN StartUp类 (注:这里是和1.0版本区别之一,1.0版本不用加这个,需要注册路由路径即可)

如下图:

这样,我们就算基本完成SignalR的创建了,下面我们看代码

首先我们来看看SignalR类中的代码:

     public class MoveTextHub : Hub

     {

         public void Hello()

         {

             Clients.All.hello();

         }

     }

继承自HUB类,我们可以跳转到其中看,值得注意的是这个SignalR是开源的,有兴趣的可以在GitHub上下载源码研究研究,或者自己扩展.

下面我们来看看OWIN StartUp代码

using System;

using System.Threading.Tasks;

using Microsoft.Owin;

using Owin;

[assembly: OwinStartup(typeof(SignalRTest.MyStartup))]

namespace SignalRTest

{

    public class MyStartup

    {

        public void Configuration(IAppBuilder app)

        {

            // 有关如何配置应用程序的详细信息，请访问   http://go.microsoft.com/fwlink/?LinkID=316888

        }

    }

}

里面什么都没有,只帮你实现了一个空的方法,当然..这些都不重要...

下面我们看看改过后的代码.

SignalR的代码:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Microsoft.AspNet.SignalR;

using Microsoft.AspNet.SignalR.Hubs;

namespace SignalRTest

{

    //Hub的别名,方便前台调用

    [HubName("getMessage")]

    public class MoveTextHub : Hub

    {

        //自动产生的方法

        public void Hello()

        {

            Clients.All.hello();

        }

        //编写发送信息的方法

        public void SendMessage(string message)

        {

            //调用所有客户注册的本地的JS方法(broadcastMessage)

            Clients.All.broadcastMessage(message + DateTime.Now.ToString());

        }

    }

}

OWIN StartUp代码

using System;

using System.Threading.Tasks;

using Microsoft.Owin;

using Owin;

[assembly: OwinStartup(typeof(SignalRTest.MyStartup))]

namespace SignalRTest

{

    public class MyStartup

    {

        public void Configuration(IAppBuilder app)

        {

            // 有关如何配置应用程序的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkID=316888

            //注册管道,使用默认的虚拟地址,根目录下的"/signalr",当然你也可以自己定义

            app.MapSignalR();

        }

    }

}

至此,我们的后台代码就暂时完成了..

下面我们来看看前端的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>

        $(function () {

            $(function () {

                // 声明一个代理引用该集线器,记得$.connection.后面的方法首字母必须要小写,这也是我为什么使用别名的原因

                var chat = $.connection.getMessage;

                // 这里是注册集线器调用的方法,和1.0不同的是需要chat.client后注册,1.0则不需要

                chat.client.broadcastMessage = function (name) {

                    // HTML编码的显示名称和消息。

                    var encodedMsg = $('<div />').text(name).html();

                    // 将消息添加到该页。

                    $('#messsagebox').append('<li>'+ encodedMsg + '</li>');

                };

                // 获取用户名称。

                $('#username').html(prompt('请输入您的名称:', ''));

                // 设置初始焦点到消息输入框。

                $('#message').focus();

                // 启动连接,这里和1.0也有区别

                $.connection.hub.start().done(function () {

                    $('#send').click(function () {

                        var message = $('#username').html() + ":" + $('#message').val()

                        // 这里是调用服务器的方法,同样,首字母小写

                        chat.server.sendMessage(message);

                        // 清空输入框的文字并给焦点.

                        $('#message').val('').focus();

                    });

                });

            });

        });

    </script>

</head>

<body>

    <div>

        <div >名称:<p id="username"></p></div>

        <div style="border-color:red;border:double">

            <ul id="messsagebox">

                <li>聊天窗口</li>

                <li></li>

            </ul>

        </div>

        <input type="text" value="asdasd" id="message" />

        <button id="send">发送</button>

    </div>

</body>

</html>

至此我们就完成了最基本的通过集线器消息群发.效果如下:

谢谢大家支持,我会坚持把这个系列写完,写的不好希望大家多多包含,请大神指导..

源码下载地址:http://pan.baidu.com/s/1qWBlRp6

用SignalR 2.0开发客服系统[系列1:实现群发通讯]的更多相关文章

  1. 用SignalR 2.0开发客服系统[系列3:实现点对点通讯]

    前言 交流群:195866844 目录: 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 用SignalR 2.0开发客服系统[系列2:实现聊天室] 真的很感谢大家的支持,今天发表系列3 ...

  2. 用SignalR 2.0开发客服系统[系列2:实现聊天室]

    前言 交流群:195866844 上周发表了 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 这篇文章,得到了很多帮助和鼓励,小弟在此真心的感谢大家的支持.. 这周继续系列2,实现聊天室 ...

  3. 用SignalR 2.0开发客服系统[系列4:负载均衡的情况下使用SignalR]

    前言 交流群:195866844 目录: 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 用SignalR 2.0开发客服系统[系列2:实现聊天室] 用SignalR 2.0开发客服系统 ...

  4. 用SignalR 2.0开发客服系统[系列5:使用SignalR的中文简体语言包和其他技术点]

    前言 交流群:195866844 目录: 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 用SignalR 2.0开发客服系统[系列2:实现聊天室] 用SignalR 2.0开发客服系统 ...

  5. php开发客服系统(持久连接+轮询+反向ajax 转载 http://www.tuicool.com/articles/2mU7v2R)

    php开发客服系统( 下载源码 ) 用户端(可直接给客户发送消息) 客服端(点击用户名.即可给该用户回复消息) 讲两种实现方式: 一:iframe + 服务器推技术comet(反向ajax,即服务器向 ...

  6. php开发客服系统(持久连接+轮询+反向ajax)

    欢迎在php严程序 - php教程学习AJAX教程, 本节课讲解:php开发客服系统(持久连接+轮询+反向ajax) php开发客服系统(下载源码) 用户端(可直接给客户发送消息)客服端(点击用户名. ...

  7. Linux + .net core 开发升讯威在线客服系统：同时支持 SQL Server 和 MySQL 的实现方法

    前段时间我发表了一系列文章,开始介绍基于 .net core 的在线客服系统开发过程. 有很多朋友一直提出希望能够支持 MySQL 数据库,考虑到已经有朋友在用 SQL Server,我在升级的过程中 ...

  8. Linux + .net core 开发升讯威在线客服系统：首个经过实际验证的高性能版本

    业余时间用 .net core 写了一个在线客服系统.并在博客园写了一个系列的文章,写介绍这个开发过程: .net core 和 WPF 开发升讯威在线客服系统:目录 https://blog.she ...

  9. .net core 和 WPF 开发升讯威在线客服系统：把 .Net Framework 打包进安装程序

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程. 系列文章目录: https://blog.shengxunwei.com/Home/Post/44a3 ...

随机推荐

  1. 为什么 NaN 不等于自身？

    NaN 即Not a Number , 不是一个数字, 那么NaN到底是什么呢? 话说在JavaScript中,有6大数据类型,分别包括string,number,boolean,undefined, ...

  2. .NetCore中的日志（2）集成第三方日志工具

    .NetCore中的日志(2)集成第三方日志工具 0x00 在.NetCore的Logging组件中集成NLog 上一篇讨论了.NetCore中日志框架的结构,这一篇讨论一下.NetCore的Logg ...

  3. 架构设计：远程调用服务架构设计及zookeeper技术详解（下篇）

    一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...

  4. # PHP - 使用PHPMailer发邮件

    PHPMailer支持多种邮件发送方式,使用起来非常简单 1.下载PHPMailer https://github.com/PHPMailer/PHPMailer,下载完成加压后, 把下边的两个文件复 ...

  5. 【NLP】Python NLTK处理原始文本

    Python NLTK 处理原始文本 作者:白宁超 2016年11月8日22:45:44 摘要:NLTK是由宾夕法尼亚大学计算机和信息科学使用python语言实现的一种自然语言工具包,其收集的大量公开 ...

  6. 通过AngularJS实现前端与后台的数据对接（一）——预备工作篇

    最近,笔者在做一个项目:使用AngularJS,从而实现前端与后台的数据对接.笔者这是第一次做前端与后台的数据对接的工作,因此遇到了许多问题.笔者在这些问题中,总结了一些如何实现前端与后台的数据对接的 ...

  7. Autofac - 属性注入

    属性注入不同于通过构造函数方式传入参数. 这里是通过注入的方式, 在类创建完毕之后, 资源释放之前, 给属性赋值. 这里, 我重新弄一些类来演示这一篇吧. public class ClassA { ...

  8. Windos环境用Nginx配置反向代理和负载均衡

    Windos环境用Nginx配置反向代理和负载均衡 引言:在前后端分离架构下,难免会遇到跨域问题.目前的解决方案大致有JSONP,反向代理,CORS这三种方式.JSONP兼容性良好,最大的缺点是只支持 ...

  9. android手机登录时遇到“QQ安全登录发现病毒”解决

    android手机作为开源系统非常容易感染病毒,有时候我们会经常遇到手机QQ登录时检测到app被感染,一般情况是由手机感染病毒所引起的,安装腾讯管家后只能检测病毒和卸载感染病毒的软件,不能清除病毒.解 ...

  10. 搭建一套自己实用的.net架构(3)续 【ORM Dapper+DapperExtensions+Lambda】

    前言 继之前发的帖子[ORM-Dapper+DapperExtensions],对Dapper的扩展代码也进行了改进,同时加入Dapper 对Lambda表达式的支持. 由于之前缺乏对Lambda的知 ...