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

前端开发 作者: 2024-08-26 03:00:02
前言 针对于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_68742.html