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

前端开发作者： 2024-08-23 09:15:01

前言针对于Web与其他应用的的通讯，在.Net中，SignalR是一个不错的选择，在前后端没有分离的时候，直接引用对应的signalr.js文件即可；这里主要记录Vue与Asp.netcore 前

 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; }
    }

//设置跨域问题  因为前后端分离可能不在统一站点部署，会出现跨域问题，这里进行跨域配置
 services.AddCors(options => {
        options.AddPolicy("SignalRCors",policy => policy.AllowAnyOrigin()
                                                         .AllowAnyHeader()
                                                         .AllowAnyMethod()
                                                         .AllowCredentials());

});
//注册SignalR
services.AddSignalR();

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

npm i --save @aspnet/signalr

//引入安装的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
    }
}

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

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_67163.html

相关资讯：轻松搞定Vue 使用SignalR与Asp.net Core通讯