博客

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

  • Post author:
  • Post category:vue


转载:

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


get


;


set


; }




public


string


Message {


get


;


set


; }




}

其次在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(


'连接'


);




})


}