最近因为项目中涉及到了实时数据的传输，特地去了解了一下当前Web应用中常见的实时交互手段，当然一开始也不仅限于Web客户端。从c#自带的Socket类，到Html5中的WebSocket，再到Asp .Net利器SignalR，，最后我们要根据项目情况来选择恰当的技术。

SignalR是什么

由于后端小伙伴的技术方向是Asp .Net，所以他们后端选定的是SignalR；
SignalR是一个.Net开源库，用于构建需要实时进行用户交互和数据更新的Web应用，如在线聊天，游戏，天气或者股票信息更新等实时应用程序。SignalR简化了构建实时应用的过程，它包括了一个Asp .Net服务器端库和一个Js端库，集成了数种常见的消息传输方式，如long polling，WebSocket，并提供相应的Api供开发人员选择如何调用，帮助其可以简单快速地实现客户端与服务器端相互间的实时通信。

vue中使用SignalR

SignalR包括两种客户端和服务器端之间进行通信的模型，Persistent Connections和Hubs，我所选用的就是Hubs，Hubs的示例网上已经很多了，但是在vue中前后端分离使用，很多网上示例都使用jq，而且jq在vue中引入会出现很多报错情况，而且网上搜出来的文章很多都有错误，我参考了github的项目例子，首先安装所需要的依赖等，在package.json中手写输入没有的依赖，下图的 signalr和 core-js

"dependencies": {
    "@aspnet/signalr": "^1.1.4",
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "element-ui": "^2.13.2",
    "vue": "^2.6.10",
    "vue-router": "^3.2.0"
  }

可以看出这里就不必再使用jq了，npm install一下，就可以在项目代码中使用signalr了

引入以后，可以使用：

在created或者mounted里使用获取后端数据的方法，就像http前后端交互一样使用，只要在在vue生命钩子里调用了这个方法，后端每次推送消息不管什么时候，都能获取到。signalr中可以设置断线重连机制，可以封装到单独的js文件里再单独调用，使用时可以设置方法分组，这里只是给大家简单的介绍一下使用和实现。