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

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

   }

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

1

2

//参数中的值一定要和以上设置的跨域名字一样<br>app.UseCors("SignalRCors");<br>//可以设置SignalR相关参数，这里设置地址

app.UseSignalR(routes => { routes.MapHub<LCHub>("/lchub/signalr"); });

1

npm i --save @aspnet/signalr

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

    }

}

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

    })

}