SignalR基本认识以及使用
SignalR基本认识以及使用
什么是WebSocket、SignalR
WebSocket
1、WebSocket基于TCP协议,支持二进制通信,双工通信。 2、性能和并发能力更强。 3、WebSocket独立于HTTP协议,不过我们一般仍然把WebSocket服务器端部署到Web服务器上,因为可以借助HTTP协议完成初始的握手(可选),并且共享HTTP服务器的端口(主要)。
SignalR
1、ASP.NET Core SignalR(以下简称SignalR),是.NET Core平台下对WebSocket的封装。 2、Hub(集线器),数据交换中心。
服务器向客户端发送数据
1、需求:Web聊天;站内通知。 2、传统HTTP:只能客户端主动发送请求。 3、传统方案:长轮询(Long Polling):其缺点是浏览器先向服务器端发送Ajax请求,但是服务器端不立即给浏览器端发送响应,而是一直挂起这个请求,直到服务器端有需要推送给客户端的消息,服务器端才把要推送的消息作为响应发送给浏览器。由于Http并不是为这种长轮询机制设计的,因此长轮询对服务器的资源消耗非常大,而且由于http是文本传输协议,因此数据传输效率低。
SignalR的基本使用
创建一个继承自Hub的类
using Microsoft.AspNetCore.SignalR;
namespace SignalRStudy.Hubs
{
public class ChatRoomHub : Hub
{
//SignalR的基本使用
public Task SendPublicMessage(string messgae)
{
//获取当前连接id
var connid = this.Context.ConnectionId;
var msg = $"{connid}:{DateTime.Now}发送了{messgae}";
//SendAsync 是对SendCoreAsync的封装
//对所有人发送消息 只有一个异步方法可以 不写async 和 await
//ReceivePublicMessage 为前端接受消息方法
var res = Clients.All.SendAsync("ReceivePublicMessage", msg);
return res;
}
}
}
Program
//1.在builder.Build(); 之前添加跨域白名单
builder.Services.AddSignalR();
//允许访问的白名单
string[] urls = new[] { "http://localhost:3000" };
builder.Services.AddCors(options =>
options.AddDefaultPolicy(builder => builder.WithOrigins(urls)
.AllowAnyMethod().AllowAnyHeader().AllowCredentials())
);
var app = builder.Build();
//2.允许跨域 在UseHttpsRedirection之前Use
app.UseCors();
app.UseHttpsRedirection();
//3.
//添加对应的Hub请求路线
app.MapHub<ChatRoomHub>("/Hubs/ChatRoomHub");
编写前端项目。
安装SignalR的JavaScript客户端SDK:npm install @microsoft/signalr
vue3我也不怎么会,这个后续再慢慢学习,只是单纯的hello word页面改写的
<template>
<input type="text" v-model="state.userMessage" v-on:keypress="txtMsgOnkeypress"/>
<div><ul>
<li v-for="(msg,index) in state.messages" :key="index">{{msg}}</li>
</ul></div>
</template>
<script>
import { reactive, onMounted } from 'vue';
import * as signalR from '@microsoft/signalr';
let connection;
export default {name: 'Login',
setup() {
const state = reactive({ userMessage: "", messages: [] });
const txtMsgOnkeypress = async function (e) {
if (e.keyCode != 13) return;
await connection.invoke("SendPublicMessage", state.userMessage);
state.userMessage = "";
};
onMounted(async function () {
connection = new signalR.HubConnectionBuilder()
.withUrl('https://localhost:7298/Hubs/ChatRoomHub')
.withAutomaticReconnect().build();
await connection.start();
connection.on('ReceivePublicMessage', msg => {
state.messages.push(msg);
});
});
return { state, txtMsgOnkeypress };
},
}
</script>
测试发送消息成功
本文内容大部分都为杨中科老师《ASP.NET Core技术内幕与项目实战》一书中内容,此文只是做学习记录,如有侵权,联系立马删除。
SignalR基本认识以及使用的更多相关文章
- SignalR系列续集[系列8:SignalR的性能监测与服务器的负载测试]
目录 SignalR系列目录 前言 也是好久没写博客了,近期确实很忙,嗯..几个项目..头要炸..今天忙里偷闲.继续我们的小系列.. 先谢谢大家的支持.. 我们来聊聊SignalR的性能监测与服务器的 ...
- ABP文档 - SignalR 集成
文档目录 本节内容: 简介 安装 服务端 客户端 连接确立 内置功能 通知 在线客户端 帕斯卡 vs 骆峰式 你的SignalR代码 简介 使用Abp.Web.SignalR nuget包,使基于应用 ...
- SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=》提升)
SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...
- SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论
异常汇总:http://www.cnblogs.com/dunitian/p/4523006.html#signalR 后台创建了一个DntHub的集线器 前台在调用的时候出现了问题(经检查是代理对象 ...
- 基于SignalR实现B/S系统对windows服务运行状态的监测
通常来讲一个BS项目肯定不止单独的一个BS应用,可能涉及到很多后台服务来支持BS的运行,特别是针对耗时较长的某些任务来说,Windows服务肯定是必不可少的,我们还需要利用B/S与windows服务进 ...
- SignalR SelfHost实时消息,集成到web中,实现服务器消息推送
先前用过两次SignalR,但是中途有段时间没弄了,今天重新弄,发现已经忘得差不多了,做个笔记! 首先创建一个控制台项目Nuget添加引用联机搜索:Microsoft.AspNet.SignalR.S ...
- SignalR系列目录
[置顶]用SignalR 2.0开发客服系统[系列1:实现群发通讯] [置顶]用SignalR 2.0开发客服系统[系列2:实现聊天室] [置顶]用SignalR 2.0开发客服系统[系列3:实现点对 ...
- 基于SignalR的消息推送与二维码描登录实现
1 概要说明 使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛.为了满足ios.android客户端与web短信平台的结合,特开发了基于Singl ...
- XAMARIN.ANDROID SIGNALR 实时消息接收发送示例
SignalR 是一个开发实时 Web 应用的 .NET 类库,使用 SignalR 可以很容易的构建基于 ASP.NET 的实时 Web 应用.SignalR 支持多种服务器和客户端,可以 Host ...
- ABP源码分析三十二:ABP.SignalR
Realtime Realtime是ABP底层模块提供的功能,用于管理在线用户.它是使用SignalR实现给在线用户发送通知的功能的前提 IOnlineClient/OnlineClient: 封装在 ...
随机推荐
- window.location.href 用法总结
想做好前端,这几种用法一定要了解: 在做网页前端的时候会经常用到JavaScript其中window.location.href用得非常多: 其中最常用的有windows.location.href= ...
- P2016题解
P2016题解 题目描述 Bob要建立一个古城堡,城堡中的路形成一棵无根树.他要在这棵树的结点上放置最少数目的士兵,使得这些士兵能瞭望到所有的路. 注意,某个士兵在一个结点上时,与该结点相连的所有边将 ...
- app内嵌H5踩坑
内嵌的H5是用的vue2版本开发的,期间有很多的坑要踩: 1.调用app返回上一个页面不触发页面的onmouted和window.onPageShow app返回上一个页面调用的方法并不会出发vue的 ...
- 重写Collections集合的排序比较CompareTo方法
Collections.sort()使用该方法实际是重写Comparator接口的compare方法实现排序: //传入参数list集合,Comparator接口 T:list的元素类型 //如Lis ...
- vue组件自调用
组件自调用 在vue中有些情况下我们会用到组件本身来遍历出自己想要的效果. 其实非常简单,可以在模板中使用name属性值,来调用自己 <template> <el-submenu v ...
- django操作WEB涉及的几个命令
1)创建项目bysms django-admin startproject bysms 2)创建应用sales (在bysms目录下执行) python manage.py startapp sale ...
- PHP_冒泡排序代码解析
<?php /** * 基本思想:将数组中的每一个下标元素遍历出来 *依次将这些下标的值对后面一个下标的值对比 *如果大于后面一位下标的值,将两者调换位置 */ $arr = array (55 ...
- HCIP-ICT实战进阶05-路由策略与策略路由
HCIP-ICT实战进阶05-路由策略与策略路由 0 前言 什么是路由策略? 基于报文的目的IP地址进行路由表查找, 之后转发数据; 针对控制平面, 为路由协议和路由表服务, 针对路由信息进行过滤或者 ...
- win10上打包的qt程序放到win7上打不开的解决方法
在win 10 上编写并打包发布了qt5.12.3 msvc2017 32bit的qt程序,在其他win10 电脑上都能正常运行,但是放到win7电脑上,运行exe时依次出现缺少"msvcp ...
- python 小顶堆
from heapq import *heap=[]for i in range(10,1,-1): heappush(heap,i)print(heap)print(heappop(heap))pr ...