asp.net mvc signalr简单聊天室制作过程分析_实用技巧

signalr的神奇、实用很早就知道,但一直都没有亲自去试用,仅停留在文章,看了几篇简单的介绍文字,感觉还是很简单易用的。

由于最后有个项目需要使用到它,所以就决定写个小程序测试一下,实践出真知;别人写的文章,由于环境(版本等)不同,还是或多或少存在一些出入的。

环境:vs2013 / asp.net mvc 5 / signalr 2.2.1 / jquery 1.10.2

先上两个效果图:

系统会自动给加入聊天室的人员分配一个ID,是该人员的唯一标识(绿色为当前用户说的话,橙色为当前用户之外的人员说的话,对于不同窗口,当前用户指示的主体是不一样的哦,别弄绕了。。。)

下面来粗略叙述一下开发步骤:

1、安装signalr

建议使用nuget安装,能省不少事,网上也有全手工配置的。

2、修改startup.cs文件

开始的时候,我漏了这一步,发现始终生成不了/signalr/hubs,浏览器提示/signalr/hubs 400找不到

3、创建Hub

nuget安装了signalr之后,会有相应的signal分类

命名为ChatHub,也可以创建一个普通类,继承Microsoft.AspNet.SignalR.Hub即可。

简单的编写一个Send方法(请注意红框的两个方法名)

4、调用

页面需要引用三个主要脚本:

signalr是依赖于jquery的,所以这三个脚本引用有严格的先后顺序,如图,不可调换顺序。

以下为页面内容(请注意红框中的几个地方):

chatHub:这是创建的ChatHub类,生成在/signalr/hubs下面的名称(默认为类名首字母小写)

用户也可以自己定义

这样hub名称就变成了设置的ChatHub(原来首字母小写,现在变成大写的了)

chat.client.receiveMessage:此处的receiveMessage,就是定义在ChatHub类,Send方法下的Clients.All.receiveMessage,原来看一些文档,此处的写法是chat.receiveMessage,但试下来没有效果,查看了/signalr/hubs脚本后,看到有client的定义,这块应该是由于signalr版本不同造成的,大家使用时要注意。

chat.server.send:此处的send,就是定义在ChatHub类下的Send方法,同样可能是对于以前版本的signalr,使用方法是chat.send,大家注意就是了。

5、结束

到这为止,一个简单的开发流程结束。打开两个或两个以上窗口,就可以发消息聊天了,试试吧

样式纯粹是自己瞎倒腾,写的不规范也乱七八糟,所以就不详细贴出扰乱视听。

时间: 2024-10-03 05:33:24

asp.net mvc signalr简单聊天室制作过程分析_实用技巧的相关文章

Asp.net使用SignalR实现聊天室的功能_实用技巧

一.引言 在前一篇文章<Asp.net使用SignalR实现酷炫端对端聊天功能>中,我向大家介绍了如何实现实现端对端聊天的功能的,在这一篇文章中将像大家如何使用SignalR实现群聊这样的功能. 二.实现思路 要想实现群聊的功能,首先我们需要创建一个房间,然后每个在线用户可以加入这个房间里面进行群聊,我们可以为房间设置一个唯一的名字来作为标识.那SignalR类库里面是否有这样现有的方法呢?答案是肯定的. // IGroupManager接口提供如下方法 // 作用:将连接ID加入某个组 //

asp.net MVC实现简单的上传功能_实用技巧

方法一: Home/Index.aspx中的代码 复制代码 代码如下: <% using (Html.BeginForm("up","Home",FormMethod.Post,new{enctype="multipart/form-data"})) {%> <input type="file" name="upfile" /> <input type ="submi

基于ASP.NET MVC的ABP框架入门学习教程_实用技巧

为什么使用ABP我们近几年陆续开发了一些Web应用和桌面应用,需求或简单或复杂,实现或优雅或丑陋.一个基本的事实是:我们只是积累了一些经验或提高了对,NET的熟悉程度. 随着软件开发经验的不断增加,我们发现其实很多工作都是重复机械的,而且随着软件复杂度的不断提升,以往依靠经验来完成一些简单的增删改查的做法已经行不通了.特别是用户的要求越来越高,希望添加的功能越来多,目前这种开发模式,已经捉襟见肘.我很难想象如何在现有的模式下进行多系统的持续集成并添加一些新的特性. 开发一个系统时,我们不可避免的

ASP.NET MVC文件上传教程(二)_实用技巧

上文ASP.NET MVC 文件上传教程(一)我们讲了简单的上传以及需要注意的地方,查相关资料时,感觉上传里面涉及到的内容还是比较多,于是就将上传这一块分为几节来处理,同时后续也会讲到关于做上传时遗漏的C#应该注意的地方,及时进行查漏补缺,尽量将这一块完善起来. 引入 上一节我们讲到了上传这一块,有朋友提出未涉及到大文件的上传这一块,思前想后还是来试着做做,毕竟之前没怎么去仔细考虑过这个问题,尤其还可以联系实际开发中创建文件夹等一系列问题,同时关于上传在网上随便找找都充斥着大量的组件,我们何必再

ASP.NET MVC的四种验证编程方式_实用技巧

我们可以采用4种不同的编程模式来进行针对绑定参数的验证. 一.手工验证绑定的参数 在定义具体Action方法的时候,对已经成功绑定的参数实施手工验证无疑是一种最为直接的编程方式,接下来我们通过一个简单的实例来演示如何将参数验证逻辑实现在对应的Action方法中,并在没有通过验证的情况下将错误信息响应给客户端.我们在一个ASP.NET MVC应用中定义了如下一个Person类作为被验证的数据类型,它的Name.Gender和Age三个属性分别表示一个人的姓名.性别和年龄. public class

ASP.NET MVC中的视图生成实例分析_实用技巧

本文实例分析了ASP.NET MVC中的视图生成过程.分享给大家供大家参考.具体如下: 在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图 通常,在 Controller 中,我们定义多个 Action ,每个 Action 的返回类型一般是 ActionResult,在 Action 处理的最后,我们返回对于视图的调用. 复制代码 代码如下: pub

ASP.NET MVC 4 捆绑和缩小实例介绍_实用技巧

在 ASP.NET MVC 4 中可捆绑多个 css 和 js 文件以减少HTTP请求,并对 css 和 js 文件进行压缩(缩小),这样可提高网站的加载速度.我们选取博客园的 css 文件来看看,在 ASP.NET MVC 4 前,我们引入 css 方法如下: 复制代码 代码如下: <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> <link

ASP.NET MVC中使用JavaScriptResult的用法示例_实用技巧

本文实例讲述了ASP.NET MVC中使用JavaScriptResult的用法.分享给大家供大家参考,具体如下: 在页面中我们使用JavaScript来设置id为qubernet的span标签样式,具体代码如下: JS: <script> $(function () { var thisObj = document.getElementById("qubernet"); thisObj.setAttribute("style", "color

实现Asp.net mvc上传头像加剪裁功能_实用技巧

在我们使用QQ上传头像,注册用户账号时是不是都会遇到上传图像,并根据自己的要求对图像进行裁剪,这是怎么实现的呐? 本文主要介绍了Asp.net mvc实现上传头像加剪裁功能,分享给大家供大家参考.具体如下:  运行效果截图如下: 具体代码如下: 前台代码 <link href="~/Content/fineuploader.css" rel="stylesheet" /> <link href="~/Content/jquery.Jcro