1.websocket 连接代码


  1. created() {
  2. this.initWebsocket()
  3. },
  4. methods: {
  5. // 初始化websocket
  6. initWebsocket() {
  7. let _this = this
  8. let ws = new WebSocket(this.wsUrl)
  9. //保持连接
  10. ws.onopen = () = > {
  11. // Web Socket 已连接上,使用 send() 方法发送数据
  12. //console.log('数据发送中...')
  13. setInterval(() = > {
  14. let msg = {
  15. msg: '心跳内容'
  16. }
  17. ws.send(JSON.stringify(msg))
  18. }, 5000)
  19. //console.log('数据发送完成')
  20. }
  21. //数据接收
  22. ws.onmessage = evt = > {
  23. _this.websocketonmessage(evt)
  24. //console.log('数据已接收...')
  25. }
  26. // 关闭 websocket 时的 钩子
  27. ws.onclose = () = > {
  28. //console.log('连接已关闭...')
  29. _this.websocket()
  30. }
  31. // 路由跳转时结束websocket链接
  32. this.$router.afterEach(() = > {
  33. ws.close()
  34. })
  35. },//数据接收
  36. websocketonmessage(e) {
  37. // 数据处理
  38. let obj = JSON.parse(e.data)
  39. }
  40. }

【土旦】Vue+WebSocket 实现长连接的更多相关文章

  1. http中长连接和websocket的长连接的区别

    一.什么是http协议 HTTP是一个应用层协议,无状态的,端口号为80.主要的版本有1.0/1.1/2.0.   HTTP/1.* 一次请求-响应,建立一个连接,用完关闭: HTTP/1.1 串行化 ...

  2. 微信小程序中如何使用WebSocket实现长连接(含完整源码)

    本文由腾讯云技术团队原创,感谢作者的分享. 1.前言   微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架.组件以及 API,在这个平台上面的想象空间很大.腾讯云研究了一番之后,发现 ...

  3. Websocket、长连接、循环连接

    [转]转自知乎高票回答  https://www.zhihu.com/question/20215561 一.WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系 ...

  4. Vue通过WebSocket建立长连接

    使用场景: 在项目开发中,后端需要处理一连串的逻辑,或者等待第三方的数据返回来进行处理之后在返回给前端,可能时间会很长,而且前端也不知道后端什么时候能处理好(时间长的话会达到10分钟左右),如果采用普 ...

  5. 石墨文档Websocket百万长连接技术实践

    引言 在石墨文档的部分业务中,例如文档分享.评论.幻灯片演示和文档表格跟随等场景,涉及到多客户端数据同步和服务端批量数据推送的需求,一般的 HTTP 协议无法满足服务端主动 Push 数据的场景,因此 ...

  6. http的长连接和websocket的区别

    一.什么是http协议 HTTP是一个应用层协议,无状态的,端口号为80.主要的版本有1.0/1.1/2.0.   HTTP/1.* 一次请求-响应,建立一个连接,用完关闭: HTTP/1.1 串行化 ...

  7. Vue+WebSocket 实现页面实时刷新长连接

    最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSoc ...

  8. WebSocket长连接

    WebSocket长连接 1.概述 1.1 定义 1.2 原理 2.Django中配置WebSocket 2.1安装第三方法包 pip install channels 2.2 Django 中的配置 ...

  9. 浅谈Websocket、Ajax轮询和长连接(long pull)

    最近看到了一些介绍Websocket的文章,觉得挺有用,所以在这里将自己的对其三者的理解记录一下. 1.什么是Websocket Websocket是HTML5中提出的新的协议,注意,这里是协议,可以 ...

随机推荐

  1. hive新建分区表

    hive新建分区表语句如下: create table table_name (col1_name string comment '备注1', col2_name string comment '备注 ...

  2. SpringBoot + Spring Security 学习笔记(五)实现短信验证码+登录功能

    在 Spring Security 中基于表单的认证模式,默认就是密码帐号登录认证,那么对于短信验证码+登录的方式,Spring Security 没有现成的接口可以使用,所以需要自己的封装一个类似的 ...

  3. ubuntu中使用docker部署.netcore2.1

     概述    .netcore发布这么久,到现在才在项目中实际运用,之前算是了解一点,一般找工作都会问是否运用过.netcore,软件研发来说,如果这个技术没用过,觉得挺难,其实不难..netcore ...

  4. ACM入门之OJ~

    所谓OJ,顾名思义Online Judge,一个用户提交的程序在Online Judge系统下执行时将受到比较严格的限制,包括运行时间限制,内存使用限制和安全限制等.用户程序执行的结果将被Online ...

  5. 模块使用:time、datetime、calendar、sys、os、os.path、normcase和normapath、random、json、pickle

    ## time:时间 时间戳(timestamp):time.time() 延迟线程的运行:time.sleep(secs) (指定时间戳下的)当前时区时间:time.localtime([secs] ...

  6. 同一容器中a标签比较多的情况下通过title属性值隐藏

    同一容器中a标签比较多的情况下如何通过title属性值控制a标签的隐藏或显示 最近项目中遇到一个IE兼容性问题,网站需要在底部footer添加"站长统计"代码,容器中动态添加很多a ...

  7. 20190402-display展现、float浮动

    目录 1.display展现 dispaly:"none | block | inline | inline-block | list-item | run-in(主流浏览器不支持) | t ...

  8. 前端笔记之CSS(下)浮动&BFC&定位&Hack

    一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/heigh ...

  9. sqlserver2012 在视图中建索引

      第一种 如果已经有视图但是要加索引只需要执行 以下SQL就好(前提是此视图必须                    绑定到架构) CREATE UNIQUE CLUSTERED INDEX in ...

  10. windows凭据管理

    解决windows凭据无法保存的问题1: 运行-gpedit.msc(组策略)-计算机配置-管理模板-系统-凭据分配 双击右侧”允许分配保存的凭据用于仅NTLM服务器身份验证“ 在弹出的窗口中选中“已 ...