SinalR+WebSocket
1、参考资料:
http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-server
http://signalr.net/
http://www.asp.net/signalr/videos/getting-started/signalr-and-web-sockets
.Net FrameWork4.0版本只支持SginalR1.xx的版本,SignalR2.xxx需要Framework更高的版本支持
SignalR1.x应用 http://www.asp.net/signalr/overview/older-versions/tutorial-getting-started-with-signalr
SignalR support in .Net 4 http://stackoverflow.com/questions/15607252/signalr-support-in-net-4
2、Demo
第一步:创建hub公共类,注意只有设置为public类和方法才能被客户端调用;服务器端调用客户端方法--Clients.All.addMessage(message);
using System;
using System.Collections.Concurrent;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.AspNet.SignalR;
using Microsoft.Owin;
namespace SignalRDemo
{
public class MyChat : Hub
{
/// <summary>
/// Sends the specified message.
/// </summary>
/// <param name="message">The message.</param>
public void Send(string message)
{
// Call the addMessage method on all clients
Clients.All.addMessage(message);
}
}
}
第二步:定义客户端可以连接到你的hub的路由,调用MapSignalR扩展方法
using Microsoft.Owin;
using Owin; [assembly: OwinStartupAttribute(typeof(SignalRDemo.Startup))]
namespace SignalRDemo
{
public partial class Startup {
public void Configuration(IAppBuilder app) {
app.MapSignalR();
}
}
}
第三步:前端调用hub类方法
1、路由: <script src='/signalr/hubs'></script>
2、创建proxy对象 chat = $.connection.myChat;
3、调用服务器端方法 chat.server.send();
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.signalR-2.2.0.js"></script>
<script src='/signalr/hubs'></script>
<title></title>
</head>
<body>
<script>
var chat;
$(function () {
// Created proxy,此处要特别注意,Hub类的首字母是大写MyChat,但前端使用时,首字母要小写
chat = $.connection.myChat;
// Assign a function to be called by the server
chat.client.addMessage = onAddMessage;
// Register a function with the button click
$("#broadcast").click(onBroadcast);
// Start the connection
$.connection.hub.start().done(function (a) {
console.log("成功");
console.log(a);
});
});
function onAddMessage(message) {
// Add the message to the list
$('#messages').append('<li>' + message + '</li>');
};
function onBroadcast() {
chat.server.send($('#message').val());
}
</script>
<form id="form1" runat="server">
<div>
<input type="text" id="message" />
<input type="button" id="broadcast" value="broadcast" />
<ul id="messages"></ul>
</div>
</form>
</body>
</html>
SinalR+WebSocket的更多相关文章
- 漫扯:从polling到Websocket
Http被设计成了一个单向的通信的协议,即客户端发起一个request,然后服务器回应一个response.这让服务器很为恼火:我特么才是老大,我居然不能给小弟发消息... 轮询 老大发火了,小弟们自 ...
- 细说WebSocket - Node篇
在上一篇提高到了 web 通信的各种方式,包括 轮询.长连接 以及各种 HTML5 中提到的手段.本文将详细描述 WebSocket协议 在 web通讯 中的实现. 一.WebSocket 协议 1. ...
- java使用websocket,并且获取HttpSession,源码分析
转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/6238826.html 一:本文使用范围 此文不仅仅局限于spring boot,普通的sprin ...
- WebSocket - ( 一.概述 )
说到 WebSocket,不得不提 HTML5,作为近年来Web技术领域最大的改进与变化,包含CSS3.离线与存储.多媒体.连接性( Connectivity )等一系列领域,而即将介绍的 WebSo ...
- php+websocket搭建简易聊天室实践
1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...
- Demo源码放送:打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!
随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...
- Cowboy 开源 WebSocket 网络库
Cowboy.WebSockets 是一个托管在 GitHub 上的基于 .NET/C# 实现的开源 WebSocket 网络库,其完整的实现了 RFC 6455 (The WebSocket Pro ...
- 借助Nodejs探究WebSocket
文章导读: 一.概述-what's WebSocket? 二.运行在浏览器中的WebSocket客户端+使用ws模块搭建的简单服务器 三.Node中的WebSocket 四.socket.io 五.扩 ...
- 细说websocket - php篇
下面我画了一个图演示 client 和 server 之间建立 websocket 连接时握手部分,这个部分在 node 中可以十分轻松的完成,因为 node 提供的 net 模块已经对 socket ...
随机推荐
- 树形DP水题杂记
BZOJ1131: [POI2008]Sta 题意:给出一个N个点的树,找出一个点来,以这个点为根的树时,所有点的深度之和最大. 题解:记录每个点的深度,再根据根节点的深度和逐层推导出其他点的深度和. ...
- css3立体旋转动画
demo地址 效果图 在别人网站上看到一个立体旋转的例子,然后突然想到自己前几天学习的css3旋转,就试着做了一个例子,看起来有一些粗糙. html结构很简单: <div> <ul ...
- 移动端开发——javascript
javascript(简称js)语言在移动前端应用很广.可以说必不可少,许多效果都是和js相关的.包括现在移动端的一些框架.jqmobi.jqtouch.sencha touch.jquerymobi ...
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- iOS中的通知
一.了解几个相关的类 1.NSNotification 这个类可以理解为一个消息对象,其中有三个成员变量. 这个成员变量是这个消息对象的唯一标识,用于辨别消息对象. @property (readon ...
- EditText自定义边框
1.EditText代码如下 (View代替EditText获取焦点): <View android:focusable="true" android:focusableIn ...
- mvn生成runnablejar 的方法
主要讲3点,生成runnable jar 方法1是生成一个目录 方法2是直接一个runnable的jar 方法3是关于包含spring工程的情况 方法2和3其实是一致的 1.生成runnable j ...
- SQL中的with as
一.WITH AS的含义 WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到.有的时候,是为了让 ...
- 全选,不选,反选js
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
- php图片转为资源数据
$file='C:\Users\feng\Desktop\images\banner.png'; //图片路径 $type=getimagesize($file); ...