1.websocket 连接代码


created() {
this.initWebsocket()
},
methods: {
// 初始化websocket
initWebsocket() {
let _this = this
let ws = new WebSocket(this.wsUrl)
//保持连接
ws.onopen = () = > {
// Web Socket 已连接上,使用 send() 方法发送数据
//console.log('数据发送中...')
setInterval(() = > {
let msg = {
msg: '心跳内容'
}
ws.send(JSON.stringify(msg))
}, 5000)
//console.log('数据发送完成')
}
//数据接收
ws.onmessage = evt = > {
_this.websocketonmessage(evt)
//console.log('数据已接收...')
}
// 关闭 websocket 时的 钩子
ws.onclose = () = > {
//console.log('连接已关闭...')
_this.websocket()
}
// 路由跳转时结束websocket链接
this.$router.afterEach(() = > {
ws.close()
})
},//数据接收
websocketonmessage(e) {
// 数据处理
let obj = JSON.parse(e.data)
}
}

【土旦】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. Error RZ3007: Targeted tag name cannot be null or whitespace

    Step 1: Disable precompile updating below property in csproj file: <MvcRazorCompileOnPublish>f ...

  2. Android Gradle 依赖配置:implementation & api

    背景: Android Gradle plugin 3.0开始(对应Gradle版本 4.1及以上),原有的依赖配置类型compile已经被废弃,开始使用implementation.api和anno ...

  3. 基于Nginx进行地图瓦片缓存的方案描述

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 背景 在产品的迭代中,我们完成了移动端瓦片缓存方案和服务端瓦片缓存 ...

  4. ContentProvider和ContentResolver的使用

    ContentProvider ContentProvider 在android中的作用是对外共享数据,也就是说你可以通过ContentProvider把应用中的数据共享给其他应用访问,其他应用可以通 ...

  5. JVM利器:Serviceability Agent介绍

    本文首发于公众号:javaadu 简单介绍 构建高性能的Java应用过程中,必然会遇到各种各样的问题,像CPU飙高.内存泄漏.应用奔溃,以及其他疑难杂症,这时可以使用Serviceability Ag ...

  6. SQL Server死锁中的会话隔离级别为序列化(Serializable)实验测试

    最近在分析SQL Server的死锁时,发现一个比较有意思的现象,发现死锁当中一个会话的隔离级别为序列化(Serializable),这个是让人比较奇怪的地方,我们知道SQL Server数据库的默认 ...

  7. Cmake 学习笔记

    编写CMakeLists.txt   #在当前目录新建一个build目录,然后cd build:cmake .. #这样的好处是,可以将cmake生成的内容,和源码文件分离   #设置编译结果发布路径 ...

  8. AJAX快速上手和基本核心

    一.快速上手AJAX 使用ajax的过程可以类比平常我们访问网页过程 1.创建一个XMLHttpRequest类型的对象------相当于打开了浏览器 var xhr = new XMLHttpReq ...

  9. 每日分享!~ JavaScript数组去重

    数组去重 数组去重在很多面试的过程中,都是大题出现!网络上出现了很多数组去重的方式.多数的达到了12种以上. 今天我只给大家介绍两种我比较喜欢,比较认可!入手简单的-能解决自己的问题就可以了 好了 , ...

  10. Android 性能测试优质实践汇总

    这两天把testerhome上的关于Android 性能测试的精品文章看了一遍,很有收获,学习到了Android 性能测试该关注的一些细节.我所说的“精品”是指对我自己有启发的文章,可以被自己运用起来 ...