SignalR 2.x入门(一):SignalR简单例子
时间:2022-07-24
本文章向大家介绍SignalR 2.x入门(一):SignalR简单例子,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.本系列教程使用工具
开发工具:VS2015 .NET版本:4.5 SignalR 版本:2.x系列
2.开发(点击下载源码)
创建空Asp.Net Web项目,在程序包管理器控制台中输入如下命令,安装SignalR:
install-package Microsoft.AspNet.SignalR
在项目中右击,选择添加|SignalR Hub Class(V2),命名为“ChatHub”,代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
public class ChatHub : Hub
{
public void Send(string name,string message)
{
Clients.All.broadcastMessage(name, message);
}
}
}
在项目中右击,选择添加|OWIN Startup类,命名为“Startup”,代码如下:
using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// 有关如何配置应用程序的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkID=316888
app.MapSignalR();
}
}
}
在项目中添加html页面,命名为“index.html”,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>SignalR Simple Chat</title>
<meta charset="utf-8" />
<style type="text/css">
.container{
background-color:#99CCFF;
border:thick solid #808080;
padding:20px;
margin:20px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="send" />
<input type="hidden" id="displayname"/>
<ul id="discussion">
</ul>
</div>
<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>
$(function () {
//声明hub代理
var chat = $.connection.chatHub;
//创建hub调用的broadcast函数
chat.client.broadcastMessage = function (name, message) {
//获得发送人的名字和消息
var encodedName = $('<div/>').text(name).html();
var encodedMsg = $('<div/>').text(message).html();
//将接收的信息添加到页面上
$('#discussion').append('<li><strong>' + encodedName
+ '</strong>: '+encodedMsg+'</li>');
};
//获得当前用户的名字
$('#displayname').val(prompt('Enter your name:', ''));
//将焦点设置在信息框
$('#message').focus();
//启动链接
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
//调用hub的Send方法
chat.server.send($('#displayname').val(), $('#message').val());
//清理输入框,并将焦点重新设置在输入框中
$('#message').val('').focus();
});
});
});
</script>
</body>
</html>
运行,程序,效果如下图,到此为止一个简单的SignalR程序完成了。
- No.009 Palindrome Number
- Windows DNS API RCE漏洞分析及PoC构造
- 爬虫采集去重优化浅谈
- Android基础总结(10)——手机多媒体的运用:通知、短信、相机、视频播放
- Android基础总结(9)——网络技术
- 【Python环境】基于 Python 和 Scikit-Learn 的机器学习介绍
- 【Python环境】Python分类现实世界的数据
- Android基础总结(7)——异步消息处理
- No.008 String to Integer (atoi)
- No.007 Reverse Integer
- No.006 ZigZag Conversion
- No.005 Longest Palindromic Substring
- Android基础总结(6)——内容提供器
- No.004 Median of Two Sorted Arrays
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php的instanceof和判断闭包Closure操作示例
- PHP中的自动加载操作实现方法详解
- python 实现语音聊天机器人的示例代码
- Linux应用程序使用写文件调试程序的方法
- python3学生名片管理v2.0版
- 移植新内核到Linux系统上的操作步骤
- PHP实现简单的协程任务调度demo示例
- YII2.0框架行为(Behavior)深入详解
- php数组函数array_push()、array_pop()及array_shift()简单用法示例
- PHP+MySQL+sphinx+scws实现全文检索功能详解
- php封装的page分页类完整实例代码
- Thinkphp自定义生成缩略图尺寸的方法
- Yii框架中使用PHPExcel的方法分析
- 详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
- Laravel框架自定义分页样式操作示例