SignalR 实现Web多人聊天室
namespace WebApplication2
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// 有关如何配置应用程序的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkID=316888
app.MapSignalR();
}
}
}
4.如果SignalR组件安装完成以后,项目右键新建项,会多出SignalR这一项,新建 SignalR集线器类
namespace WebApplication2.hubs
{
[HubName("myhub")] //这个HubName很重要
public class MyHub : Hub
{
public void SendMessage(string name, string message)
{
Clients.All.receiveMessage(name, message);
}
}
}
5.新建Html页面,你没有看错,就是Html页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" /> <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-1.6.4.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.js"></script>
<script src="/signalr/hubs"></script> </head>
<body style="padding-top:40px;">
<div class="container">
<div class="jumbotron">
<ul id="message" style="height:400px;overflow-y:scroll;"></ul>
</div>
<input id="name" type="email" class="form-control" style="margin-bottom:5px;">
<input id="txt" type="email" class="form-control" style="margin-bottom:5px;">
<button id="send" type="button" class="btn btn-primary btn-block">Send</button> </div> <script type="text/javascript">
$(function () { //接收数据
var con = $.connection.myhub;
con.client.receiveMessage = function (name, message) { $("#message").append("<li><b>" + name + "</b>Say:" + message + "</li>");
} //发送数据
$.connection.hub.start().done(function () { $("#send").click(function () { con.server.sendMessage($("#name").val(),$("#txt").val());
}); });
})
</script> </body>
</html>
做到这里就大功告成了,如果没有出效果的话,我说下可能会出错的地方, var con = $.connection.myhub; 这个myhub一定要跟Hub.cs的 [HubName("myhub")] 对应。
核心代码:
JS
//接收数据
var con = $.connection.myhub; con.client.receiveMessage = function (name, message) { $("#message").append("<li><b>" + name + "</b>Say:" + message + "</li>");
} //发送数据
$.connection.hub.start().done(function () { $("#send").click(function () { con.server.sendMessage($("#name").val(),$("#txt").val());
}); });
C#
namespace WebApplication2.hubs
{
[HubName("myhub")]
public class MyHub : Hub
{
public void SendMessage(string name, string message)
{
Clients.All.receiveMessage(name, message);
}
}
}
仔细研究下,它就是Client调用Server的方法,Server调用Client的方法。
SignalR 实现Web多人聊天室的更多相关文章
- Asp.net MVC + Signalr 实现多人聊天室
Asp.net SignalR 简介: 首先简单介绍一下Signalr ,我也是刚接触,觉得挺好玩的,然后写了一个多人聊天室. Asp.net SignalR 是为Asp.net 开发人员提供的一个库 ...
- Spring整合DWR comet 实现无刷新 多人聊天室
用dwr的comet(推)来实现简单的无刷新多人聊天室,comet是长连接的一种.通常我们要实现无刷新,一般会使用到Ajax.Ajax 应用程序可以使用两种基本的方法解决这一问题:一种方法是浏览器每隔 ...
- Apache MiNa 实现多人聊天室
Apache MiNa 实现多人聊天室 开发环境: System:Windows JavaSDK:1.6 IDE:eclipse.MyEclipse 6.6 开发依赖库: Jdk1.4+.mina-c ...
- 与众不同 windows phone (31) - Communication(通信)之基于 Socket UDP 开发一个多人聊天室
原文:与众不同 windows phone (31) - Communication(通信)之基于 Socket UDP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...
- 与众不同 windows phone (30) - Communication(通信)之基于 Socket TCP 开发一个多人聊天室
原文:与众不同 windows phone (30) - Communication(通信)之基于 Socket TCP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...
- 多人聊天室(Java)
第1部分 TCP和UDP TCP:是一种可靠地传输协议,是把消息按一个个小包传递并确认消息接收成功和正确才发送下一个包,速度相对于UDP慢,但是信息准确安全:常用于一般不要求速度和需要准确发送消息的场 ...
- 使用Go语言+Protobuf协议完成一个多人聊天室
软件环境:Goland Github地址 一.目的 之前用纯逻辑垒完了一个可登入登出的在线多人聊天室(代码仓库地址),这次学习了Protobuf协议,于是想试着更新下聊天室的版本. 主要目的是为了掌握 ...
- 基于tcp和多线程的多人聊天室-C语言
之前在学习关于网络tcp和多线程的编程,学了知识以后不用一下总绝对心虚,于是就编写了一个基于tcp和多线程的多人聊天室. 具体的实现过程: 服务器端:绑定socket对象->设置监听数-> ...
- java socket之多人聊天室Demo
一.功能介绍 该功能实现了一个类似QQ的最简单多人聊天室,如下图所示. 二.目录结构 三.服务端 1)SocketServer类,该类是服务端的主类,主要负责创建聊天窗口,创建监听客户端的线程: pa ...
随机推荐
- CSS中Position 的用法详解。
记得一年前,到一家公司面试的时候,问我position有哪几个属性,我憋半天才回答出2个,大家估计都清楚,就是我们经常用到的2个(relative,absolute). 最近又用到了好多,深入研究了下 ...
- Json解析,Json-lib
网络资源参考 http://www.json.org/json-zh.html http://code.alibabatech.com/wiki/pages/viewpage.action?pageI ...
- Android开发5:应用程序窗口小部件App Widgets的实现
前言 本次主要是实现一个Android应用,实现静态广播.动态广播两种改变 widget内容的方法,即在上篇博文中实验的基础上进行修改,所以此次实验的重点是AppWidget小部件的实现啦~ 首先,我 ...
- 更改pip源至国内镜像,显著提升下载速度(转载)
经常在使用Python的时候需要安装各种模块,而pip是很强大的模块安装工具,但是由于国外官方pypi经常被墙,导致不可用,所以我们最好是将自己使用的pip源更换一下,这样就能解决被墙导致的装不上库的 ...
- Android 刷新相册
Android4.4之前: sendBroadcast(new Intent(Intent.ACTION_MEDIA_MOUNTED,Uri.parse("file://" + f ...
- css sprite简便方法切 《评分五角星》
摘抄自我趣同伴的心得: 大家可以会遇到过要做满意度用星级来评分的情况,类似这种 实现的方法有很多,大家最初想到的可能是根据满意度有多少种情况就切多少种图,然后拼在一张图里面,通过控制图片的位置来实现. ...
- SE(homework2)_软件分析
老师这次课后的作业具有开放性,很容易的我会想到经常用的那些工具软件,MATLAB,envi,ARCGIS等等. Q1:此类软件是什么时候出现的,这些软件是怎么说服你(陌生人)成为它们的用户的?他们的目 ...
- C#.NET万能数据库访问封装类(ACCESS、SQLServer、Oracle)
using System; using System.Collections; using System.Collections.Specialized; using System.Data; usi ...
- CentOS 6.6安装Xtrabackup RPM提示缺少libev.so.4()
在CentOS Release 6.6安装percona-xtrabackup-2.3.4时,遇到下面错误信息 rpm -ivh percona-xtrabackup-2.3.4-1.el6.x86_ ...
- HTML5 兼容IE浏览器
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...