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

最新推荐文章于 2024-08-13 15:15:58 发布

Hzsilvana

最新推荐文章于 2024-08-13 15:15:58 发布

阅读量2.2k

点赞数

原文链接：https://my.oschina.net/u/4287611/blog/3329374

版权

本文介绍了如何在Vue.js应用中与Asp.NET Core服务端通过SignalR进行实时通讯。首先，展示了在Asp.NET Core中配置SignalR，包括编写Hub、设置跨域和注入配置。然后，详细讲解了Vue客户端如何安装SignalR插件，创建并封装信号连接，并在Vue组件中使用SignalR进行事件监听和连接。通过这些步骤，实现了Vue与Asp.NET Core的前后端分离通讯。

摘要由CSDN通过智能技术生成

前言

针对于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('连接');
        })
    }