vue中使用SignalR实现消息的实时推送
前端

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

SignalR是什么

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

vue中使用SignalR

SignalR包括两种客户端和服务器端之间进行通信的模型,Persistent ConnectionsHubs,我所选用的就是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了
1602211943(1).jpg
引入以后,可以使用:
1602212204(1).jpg
在created或者mounted里使用获取后端数据的方法,就像http前后端交互一样使用,只要在在vue生命钩子里调用了这个方法,后端每次推送消息不管什么时候,都能获取到。signalr中可以设置断线重连机制,可以封装到单独的js文件里再单独调用,使用时可以设置方法分组,这里只是给大家简单的介绍一下使用和实现。

暂无评论