vue 中使用websocket,结合vuex实现实时监听

当项目中拥有vuex状态管理,再使用WebSocket 时,会发现监听实时数据十分得心应手。以下聊一聊二者的结合使用;

socket.js

在此文件中建立websocket连接,并暴露出去。

接下图


接上图

创建websocket连接后,在main.js中,将数据用vuex保存起来。

main.js中


引入



switch中根据收到不同的socket ation头去执行不同的保存

如第一个:

通过vuex保存socket数据,又可以在收到实时数据时,进行相应的保存和修改。

在页面中可以通过监听store中保存的值来实时显示与变化。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文地址:http://www.ibm.com/developerworks/cn/java/j-lo-WebSo...
    敢梦敢当阅读 8,944评论 0 50
  • WebSocket简介 谈到Web实时推送,就不得不说WebSocket。在WebSocket出现之前,很多网站为...
    吧啦啦小汤圆阅读 8,186评论 15 75
  • WebSocket 机制 WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信,能更...
    勇敢的_心_阅读 2,297评论 0 4
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,136评论 1 32
  • 一.WebSocket简单介绍 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了。近年来...
    huoyl0410阅读 5,780评论 3 2