轻松搞定Vue 使用SignalR与Asp.net Core通讯
前言
针对于Web与其他应用的的通讯,在.Net中,SignalR是一个不错的选择,在前后端没有分离的时候,直接引用对应的signalr.js文件即可; 这里主要记录Vue与Asp.netcore 前后端分离通过signalR通讯实践;
服务端即Asp.net Core 程序
前提:通过Nugut 引入Microsoft.AspNetCore.SignalR 包
首先编写自己的Hub
public class ChatHub:Hub
{
public Task SendMsg(ChatMessageInfo info)
{
//这里的Show代表是客户端的方法,具体可以细看SignalR的说明
return Clients.All.SendAsync("Show", info.UserName + ":" + info.Message);
}
}
public class ChatMessageInfo
{
public string UserName { get; set; }
public string Message { get; set; }
}
其次在Startup.cs中进行注入和配置,在ConfigureServices中添加如下代码
//设置跨域问题 因为前后端分离可能不在统一站点部署,会出现跨域问题,这里进行跨域配置
services.AddCors(options => {
options.AddPolicy("SignalRCors", policy => policy.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials()); });
//注册SignalR
services.AddSignalR();
最后在Configure中配置相关中间件使用,代码如下
//参数中的值一定要和以上设置的跨域名字一样
app.UseCors("SignalRCors");
//可以设置SignalR相关参数,这里设置地址
app.UseSignalR(routes => { routes.MapHub<LCHub>("/lchub/signalr"); });
到此,服务端准备完毕!!!
Vue 客户端准备
前提条件: 已经通过Vue-cli脚手架工具把项目搭建起来了
首先安装对应的signalR插件
npm i --save @aspnet/signalr
其次开始封装js,这里是在utils文件夹下创建了signalR.js文件,内容如下
//引入安装的signalr包
import * as signalR from '@aspnet/signalr' const signal = new signalR.HubConnectionBuilder()
//服务器地址
.withUrl('http://localhost:52970/lchub/signalr', {})
.build() /* const signalr = function () {
var hub
if (hub === undefined) {
hub = signal
}
return hub
} */
// 自动重连
/* async function start () {
try {
await signal.start()
console.log('connected')
} catch (err) {
console.log(err)
setTimeout(() => start(), 5000)
}
} signal.onclose(async () => {
await start()
}) */
//将创建的signal赋值给Vue实例
export default {
install方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。
install: function(Vue) {
Vue.prototype.signalr = signal
}
}
然后在main.js中全局引入
import signalr from './utils/signalR'
Vue.use(signalr)
客户准备就完成了,现在就可以使用了,在任意组件中都可以使用,使用方式如下:
//在Vue的生命周期Created函数中注册相关事件
created(){
//这里Show就是在服务端指定的Show的方法名称,这里是先清除,再加上
this.signalr.off('Show');
this.signalr.on('Show',res=>{
//可以做相关业务逻辑
console.log('signalr 来了');
})
},
//在Vue的生命周期函数mounted中进行连接
mounted () {
this.signalr.start().then(() => {
console.log('连接');
})
}
总结
以上步骤轻松实现Vue和Asp.Net Core 前后端分离通过signalR进行通讯。signalR详细资料可以参考对应的官方文档和对应大牛博客
轻松搞定Vue 使用SignalR与Asp.net Core通讯的更多相关文章
- 跨域 - jsonp轻松搞定跨域请求
1.jsonp轻松搞定跨域请求 vue中使用axios,遇到跨域我就蒙逼了.第一次真正意义上的尝试使用jsonp js中用 var myscript = document.createElement( ...
- 【转】轻松搞定FTP之FlashFxp全攻略
转载网址:http://www.newhua.com/2008/0603/39163.shtml 轻松搞定FTP之FlashFxp全攻略 导读: FlashFXP是一款功能强大的FXP/FTP软件,融 ...
- 轻松搞定javascript变量(闭包,预解析机制,变量在内存的分配 )
变量: 存储数据的容器 1.声明 var 2.作用域 全局变量. 局部变量. 闭包(相对的全局变量): 3.类型 a.基本类型(undefi ...
- Webcast / 技术小视频制作方法——自己动手录制video轻松搞定
Webcast / 技术小视频制作方法——自己动手录制video轻松搞定 http://blog.sina.com.cn/s/blog_67d387490100wdnh.html 最近申请加入MSP的 ...
- 【微服务】之二:从零开始,轻松搞定SpringCloud微服务系列--注册中心(一)
微服务体系,有效解决项目庞大.互相依赖的问题.目前SpringCloud体系有强大的一整套针对微服务的解决方案.本文中,重点对微服务体系中的服务发现注册中心进行详细说明.本篇中的注册中心,采用Netf ...
- 【微服务】之三:从零开始,轻松搞定SpringCloud微服务-配置中心
在整个微服务体系中,除了注册中心具有非常重要的意义之外,还有一个注册中心.注册中心作为管理在整个项目群的配置文件及动态参数的重要载体服务.Spring Cloud体系的子项目中,Spring Clou ...
- 从零开始,轻松搞定SpringCloud微服务系列
本系列博文目录 [微服务]之一:从零开始,轻松搞定SpringCloud微服务系列–开山篇(spring boot 小demo) [微服务]之二:从零开始,轻松搞定SpringCloud微服务系列–注 ...
- 【微服务】之四:轻松搞定SpringCloud微服务-负载均衡Ribbon
对于任何一个高可用高负载的系统来说,负载均衡是一个必不可少的名称.在大型分布式计算体系中,某个服务在单例的情况下,很难应对各种突发情况.因此,负载均衡是为了让系统在性能出现瓶颈或者其中一些出现状态下可 ...
- 【微服务】之五:轻松搞定SpringCloud微服务-调用远程组件Feign
上一篇文章讲到了负载均衡在Spring Cloud体系中的体现,其实Spring Cloud是提供了多种客户端调用的组件,各个微服务都是以HTTP接口的形式暴露自身服务的,因此在调用远程服务时就必须使 ...
随机推荐
- 解决InputStream中数据读取不完整问题
转载:https://blog.csdn.net/lilidejing/article/details/37913627 当需要用到InputStream获取数据时,这时就需要读取InputStrea ...
- OpenPyXl的使用
OpenPyXl的使用 开始在内存中使用 创建一个workbook 在刚开始使用openpyxl的时候,不需要直接在文件系统中创建一个文件,仅仅需要导入Workbook类并开始使用它: >> ...
- Jenkins 插件加速下载
本文主旨 看到好多加速Jenkins安装插件速度的文章,大多数教程中都是在插件配置里使用 https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/up ...
- 重读APUE(13)-可靠信号
在信号产生和传递之间有一段时间间隔,称为信号是未决的: 进程可以设置阻塞信号传递:如果进程产生了一个阻塞的信号,并且对该信号的动作是系统默认或者捕捉该信号,则该进程保持此信号为未决状态,直到该进程对此 ...
- php判断变量类型
php判断变量类型 一.总结 一句话总结: gettype()函数:gettype(1);返回的是integer is_array():is系列函数 1.PHP empty.isset.isnull的 ...
- Flutter移动电商实战 --(31)列表页_列表切换交互制作
点击左侧的大类右边的小类也跟着变化 新建provide 要改变哪里就建哪里的provide,我们现在要改变的是右边的商品列表的数组. category_goods_list.dart 这样我们的pro ...
- 检测系统中进程占满单个cpu的情况
#!/bin/bash function thread_used_cpu(){ # $1 为单个cpu负载的百分比 if [[ $1 == "" ]];then full_load ...
- java中json的使用和解析
1.创建json对象 1.1 创建JSONObject对象 使用map初始化json @Test public void test1() { Map<String, Object> map ...
- 二、navicat连接本地数据库以及远程数据库
本地连接 1.打开navicat 2.连接 最后点击确定就连接成功了: 远程数据库 和上面一样.....
- kotlin 类的继承
与Java不同,kotlin 使用冒号,而Java 中使用extends, 注意冒号后面需要调用夫类的构造器.属于单继承,使用open 关键字允许继承class package loaderman.d ...