前言

　　交流群: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. 终于等到你：CYQ.Data V5系列 （ORM数据层）最新版本开源了

    前言: 不要问我框架为什么从收费授权转到免费开源,人生没有那么多为什么,这些年我开源的东西并不少,虽然这个是最核心的,看淡了就也没什么了. 群里的网友:太平说: 记得一年前你开源另一个项目的时候我就说 ...

  2. 匹夫细说C#：庖丁解牛迭代器，那些藏在幕后的秘密

    0x00 前言 在匹夫的上一篇文章<匹夫细说C#:不是“栈类型”的值类型,从生命周期聊存储位置>的最后,匹夫以总结和后记的方式涉及到一部分迭代器的知识.但是觉得还是不够过瘾,很多需要说清楚 ...

  3. Python-Jenkins API使用 —— 在后端代码中操控Jenkins

    最近在工作中需要用到在后台代码中触发Jenkins任务的构建,于是想到Jenkins是否有一些已经封装好的API类库提供,用于处理跟Jenkins相关的操作.下面就简单介绍下我的发现. Linux C ...

  4. 【初学python】使用python调用monkey测试

    目前公司主要开发安卓平台的APP,平时测试经常需要使用monkey测试,所以尝试了下用python调用monkey,代码如下: import os apk = {'j': 'com.***.test1 ...

  5. 前端学HTTP之安全HTTP

    前面的话 HTTP的主要不足包括通信使用明文(不加密),内容可能会被窃听:不验证通信方的身份,有可能遭遇伪装:无法证明报文的完整性,有可能被篡改 基本认证和摘要认证能够使得用户识别后较安全的访问服务器 ...

  6. 通过三次优化，我将gif加载优化了16.9%

    WeTest 导读 现在app越来越炫,动不动就搞点动画,复杂的动画用原生实现起来挺复杂,如是就搞起gif播放动画的形式,节省开发成本.   背 景 设计同学准备给一个png序列,开发读取png序列, ...

  7. C#多线程之线程池篇1

    在C#多线程之线程池篇中,我们将学习多线程访问共享资源的一些通用的技术,我们将学习到以下知识点: 在线程池中调用委托 在线程池中执行异步操作 线程池和并行度 实现取消选项 使用等待句柄和超时 使用计时 ...

  8. SQL Server 2016白皮书

    随着SQL Server 2016正式版发布日临近,相关主要特性通过以下预览学习: Introducing Microsoft SQL Server 2016 e-bookSQL Server 201 ...

  9. Maven 代理设置

    在maven的安装目录下 %MAVEN_HOME%/conf/setting.xml 中进行设置 <proxies>    <!-- proxy     | Specificatio ...

  10. ie6 ie7 ie8 ie9兼容问题终极解决方案

    放下包袱,解决低版本兼容问题   这是一个老生常谈的问题,自然解决这个问题的方案也比较多,下面整理了一些解决方法: 1.强制使用高版本渲染模式. 强制使用Edge模式来解析网页代码 <meta ...