编程语言
首页 > 编程语言> > 轻松搞定Vue 使用SignalR与Asp.net Core通讯

轻松搞定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  

1

2

3

4

5

6

7

8

9

10

11

12

public class ChatHub:Hub

   {

       public Task SendMsg(ChatMessageInfo info)

       {<br>        //这里的Show代表是客户端的方法,具体可以细看SignalR的说明

           return Clients.All.SendAsync("Show", info.UserName + ":" + info.Message);

       }

   }

   public class ChatMessageInfo

   {

       public string UserName { getset; }

       public string Message { getset; }

   }

其次在Startup.cs中进行注入和配置,在ConfigureServices中添加如下代码

1

2

3

4

5

6

7

8

9

10

//设置跨域问题  因为前后端分离可能不在统一站点部署,会出现跨域问题,这里进行跨域配置

 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文件,内容如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

//引入安装的signalr包<br>import * as signalR from '@aspnet/signalr'

const signal = new signalR.HubConnectionBuilder()<br>   //服务器地址

    .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()

}) */<br>//将创建的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)

  客户准备就完成了,现在就可以使用了,在任意组件中都可以使用,使用方式如下:

1

2

3

4

5

6

7

8

9

10

11

//在Vue的生命周期Created函数中注册相关事件 <br>   created(){<br>    //这里Show就是在服务端指定的Show的方法名称,这里是先清除,再加上

    this.signalr.off('Show');

    this.signalr.on('Show',res=>{<br>       //可以做相关业务逻辑

        console.log('signalr 来了');

    })

},<br>  //在Vue的生命周期函数mounted中进行连接

mounted () {

    this.signalr.start().then(() => {

        console.log('连接');

    })

}

标签:Core,Vue,SignalR,signalr,signal,Show,signalR
来源: https://blog.csdn.net/Q1761991696/article/details/118539522