轻松搞定Vue 使用SignalR与Asp.net Core通讯

2021/7/7 9:34:45

编程Tag： vue Core show signalr signal

本文主要是介绍轻松搞定Vue 使用SignalR与Asp.net Core通讯，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

转载:轻松搞定Vue 使用SignalR与Asp.net Core通讯轻松搞定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中配置相关中间件使用，代码如下

1 2	`//参数中的值一定要和以上设置的跨域名字一样<br>app.UseCors("SignalRCors");<br>//可以设置SignalR相关参数，这里设置地址` `app.UseSignalR(routes => { routes.MapHub<LCHub>("/lchub/signalr"); });`

　到此，服务端准备完毕！！！

Vue 客户端准备

前提条件：已经通过Vue-cli脚手架工具把项目搭建起来了

　　首先安装对应的signalR插件

1	`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中全局引入

1 2	`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 使用SignalR与Asp.net Core通讯的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

轻松搞定Vue 使用SignalR与Asp.net Core通讯

转载:轻松搞定Vue 使用SignalR与Asp.net Core通讯轻松搞定Vue 使用SignalR与Asp.net Core通讯

相关编程文章