正文

signalr2.1简单入门项目

风浪子  风浪子  2022-08-07  269

关键词：

概述

　　SignalR是通讯框架，前台Web页面与后台服务实现数据的交互。ASP.NET SignalR 是一个为 ASP.NET 开发人员的库，简化了将实时 web 功能添加到应用程序的过程。实时Web功能使服务端代码推送内容到链接可客服端并立即应用成为可能，而不需要服务端等待客户端去请求数据。

　　SignalR可用于任何你想添加实时Web功能到ASP.NET应用程序的情形，聊天室是一个常用的例子，用户可以刷新Web页面来获得新的数据，或者页面使用一个长轮询来取回数据，这都是SignalR可以应用的场景。比如说仪表盘和监视系统，实时游戏等。

　　SignalR支持以一种简单的API来创建服务器到客户端的远程调用客户端的Javascript方法，SignalR还包括用于用于连接管理的API和分组连接。

创建项目：

第一步：创建简单的Web Form项目，通过NuGet安装Microsoft.AspNet.SignalR组件。

第二步：添加OWIN Startup类，并修改映射内容。

修改内容如下：

namespace SignalRCapter01
{
    public class SRStartup
    {
        public void Configuration(IAppBuilder app)
        {
            // 有关如何配置应用程序的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkID=316888
            // Maps SignalR hubs to the app builder pipeline at "/signalr".
            app.MapSignalR();
        }
    }
}

第三步：添加Hub类，并修改代码内容。

修改内容如下：

  [HubName("MsgChat")]
    public class MyHub : Hub
    {
        public void sendMess(string Msg)
        {
            Clients.All.BroadMsg(string.Format("消息接收时间：{0}，内容：{1}",DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"),Msg));
        }
    }
}

第四步：修改WebForm JS内容。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChatHome.aspx.cs" Inherits="SignalRCapter01.ChatHome" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>MSG</title>
    <link rel="shortcut icon" href="/favicon.ico"/>
    <link rel="bookmark" href="/favicon.ico"/>
    <script src="Scripts/jquery-1.6.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
    <script src="signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            // 声明一个代理引用该集线器,记得$.connection.后面的方法首字母必须要小写,这也是我为什么使用别名的原因
            var chat = $.connection.MsgChat;
            // 这里是注册集线器调用的方法,和1.0不同的是需要chat.client后注册,1.0则不需要
            chat.client.BroadMsg = 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.sendMess(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="" placeholder="请输入消息" id="message" />
        <button id="send">发送</button>
    </div>
</body>
</html>

知识总结

1、Hub Server端的方法首字母必须小写，否则客户端提示找不到方法；

2、Js初始化的时候，要和后台服务别名一致；

var chat = $.connection.MsgChat;

3、Hub分组发送消息：

//作用:将连接ID加入某个组
//Context.ConnectionId 连接ID,每个页面连接集线器即会产生唯一ID
//roomName分组的名称
Groups.Add(Context.ConnectionId, roomName);

//作用:将连接ID从某个分组移除
Groups.Remove(Context.ConnectionId, roomName);

//作用:调用分组内连接对象注册的本地JS
//XXX:本地JS名称
//Room:分组名称
// new string[0]:过滤(不发送)的连接ID数组
 Clients.Group(Room, new string[0]).XXXX

4、重写Connection方法实例代码：

 static List<string> MyClientIDs = new List<string>();
        public override Task OnConnected()
        {
            if (MyClientIDs.IndexOf(Context.ConnectionId) == -1)
                MyClientIDs.Add(Context.ConnectionId);
            Clients.All.ShowMyFirst(JsonConvert.SerializeObject(MyClientIDs));
            return base.OnConnected();
        }

        public override Task OnDisconnected(bool stopCalled)
        {
            if(MyClientIDs.IndexOf(Context.ConnectionId)!=-1)
                MyClientIDs.Remove(Context.ConnectionId);
            Clients.All.ShowMyFirst(JsonConvert.SerializeObject(MyClientIDs));

            return base.OnDisconnected(stopCalled);
        }

5、参考博客：

http://www.cnblogs.com/GuZhenYin/p/4633205.html

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

演示代码下载

springboot入门十九,简单文件上传

...目即可。现在来给项目添加一个MyBatis支持,添加方式非常简单,仅需两步即可，具体内容如下：1.pom.xml添加以下配置信息<depend 查看详情

extjs6入门：用senchacmd搭建简单的extjs6项目

开发准备 1、senchacmd安装 2、extjs6.0.0gpl正式版下载，地址：https://www.sencha.com/legal/gpl/ ，解压ext-6.0.0-gpl.zip搭建步骤： 1、cmd进入你想要放置项目的地址，输入以下命令 sencha-sdk[解压后的ext-6.0.0的位置]generateapp[项... 查看详情

用intellijidea创建gradle项目简单入门

Gradle和Maven一样，是Java用得最多的构建工具之一，在Maven之前，解决jar包引用的问题真是令人抓狂，有了Maven后日子就好过起来了，而现在又有了Gradle，Maven有的功能它都有，且看起来更漂亮，咱么就用起来吧。装好IntellijIDEA之后... 查看详情

什么是dobbo,zookeeper,以及简单的入门项目

1.什么是dubbo,zookeeper?dubbo是个阿里巴巴的旗下的高性能、轻量级的开源JavaRPC框架ZooKeeper是一个分布式的，开放源码的分布式应用程序协调服务上面是官方说法,通俗点说dubbo是个分布式框架,zookeeper是个注册中心2.什么是分布式,为... 查看详情

mybatis简单入门

...码和手动设置参数以及获取结果集的过程MyBatis可以使用简单的XML或注解来配置和映射原生信息，将接口和Java的实体类【PlainOldJavaObjects,普通的Java对象】映射成数据库中的记录。MyBatis本是apache的一个开源项目ibatis,2010年这个项目查看详情

mybatis简单认识(入门)

1.1. 入门准备　　创建个java项目，项目结构 1.2在lib文件中导入相应的jar包（注意添加完后，记得右键文件lib点击选中AddasLibrary） 1.3准备相应的表 1.4.准备相应的domain,在domain文件里... 查看详情

springboot快速入门

...速搭建SpringBoot项目1.3、SpringBoot项目结构预览2、RESTfullAPI简单项目的快速搭建2.1、搭建一个简单的RESTfullAPI接口项目2.2、引入spring-boot-starter-we 查看详情

python利用scrapy实现3个爬虫简单入门数据抓取

执行可能会遇到报错scrapycrawlitemSpiderScrapy1.6.0-noactiveprojectUnknowncommand:crawlUse"scrapy"toseeavailablecommandsPSE:\\pyproject\\scrapymingyan>原因可能是1.没有进入项目根目录2.可能是自己一个大项目命名的文件夹下有多个小项目,执行具体的... 查看详情

springboot入门十八,自定义注解的简单实现

项目基本配置参考文章SpringBoot入门一,使用myEclipse新建一个SpringBoot项目,使用myEclipse新建一个SpringBoot项目即可，此示例springboot升级为2.2.1版本。　1.pom.xml添加aop支持<dependency><groupId>org.springframewor... 查看详情

koa2简单入门和mongoose使用(代码片段)

1构建项目1.1安装koa-generator$npminstall-gkoa-generator1.2使用koa-generator生成koa2项目$koa2-eproject(项目名称)（-e代表使用模板引擎ejs）1.3进入项目$cdproject$npminstall1.4启动项目，默认端口号是3000$DEBUG=koa2-learn:*npmstart(该方法在修改文件时需要... 查看详情

vue-cli入门-----搭建一个简单的登录页面

参考技术A新建一个文件夹,使用cmd切换到该目录下,接下来在该目录下新建一个test2的项目命令:vueinitwebpacktest2(这里的test2是项目名称)项目目录结构:重启项目以后,界面如下:上面只是演示了使用vue-cli开发项目的基本流程,更多的是... 查看详情

ssm的简单整合入门

...合而成（SpringMVC是Spring中的部分内容）。常作为数据源较简单的web项目的框架。 2.SSM能做什么,能给我们带来什么呢?Spring　　Spring就像是整个项目中装配bean的大工厂，在配置文件中可以指定使用特定的参查看详情

入门搭建一个简单的springcloud(代码片段)

搭建父工程创建新的项目，这里我习惯先创建一个空的项目命名这个项目和工程存放的路径然后点ok会弹出这个窗口，然后点击newModule 选择maven，然后不用勾选任何东西，直接next 填写完毕... 查看详情

harmonyos鸿蒙学习笔记基于ets的入门应用结构简单梳理(代码片段)

...目结构前言整体项目结构APP的启动首页配置bundleName属性简单说明jsname属性简单说明package属性简单说明：参考资料前言本文旨在简单说明鸿蒙eTS项目结构及相关知识点梳理，为以后自己鸿蒙开发的学习铺路整体项目结构eTS... 查看详情

harmonyos鸿蒙学习笔记基于ets的入门应用结构简单梳理(代码片段)

阿里云简单部署项目(入门级)(代码片段)

操作如下1.在本地将项目打成jar包(war包的话，服务器需要部署tomcat,走tomcat那一套)//两种方式//1.命令模式//本地找到项目目录，通过命令将target下的文件先全部清除//在项目目录执行以下命令，注意pom文件里指定打包为jar或者不要... 查看详情

构建基于javascript的移动webcms入门——简单介绍

看到项目上的移动框架，网上寻找了一下，发现原来这些一開始都有。于是，找了个演示样例開始构建一个移动平台的CMS——墨颀CMS，方便项目深入理解的同一时候。也能够自己维护一个CMS系统。构建框架尝试过用AngularJS和EmberJ... 查看详情

springboot入门

SpringBoot解决的问题1、SpringBoot使编码变简单（基于Spring4.0）2、SpringBoot使配置变简单　　自动配置、快速构建项目、快速集成新技术3、SpringBoot使部署变简单查看详情