【土旦】Vue+WebSocket 实现长连接
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 实现长连接的更多相关文章
- http中长连接和websocket的长连接的区别
一.什么是http协议 HTTP是一个应用层协议,无状态的,端口号为80.主要的版本有1.0/1.1/2.0. HTTP/1.* 一次请求-响应,建立一个连接,用完关闭: HTTP/1.1 串行化 ...
- 微信小程序中如何使用WebSocket实现长连接(含完整源码)
本文由腾讯云技术团队原创,感谢作者的分享. 1.前言 微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架.组件以及 API,在这个平台上面的想象空间很大.腾讯云研究了一番之后,发现 ...
- Websocket、长连接、循环连接
[转]转自知乎高票回答 https://www.zhihu.com/question/20215561 一.WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系 ...
- Vue通过WebSocket建立长连接
使用场景: 在项目开发中,后端需要处理一连串的逻辑,或者等待第三方的数据返回来进行处理之后在返回给前端,可能时间会很长,而且前端也不知道后端什么时候能处理好(时间长的话会达到10分钟左右),如果采用普 ...
- 石墨文档Websocket百万长连接技术实践
引言 在石墨文档的部分业务中,例如文档分享.评论.幻灯片演示和文档表格跟随等场景,涉及到多客户端数据同步和服务端批量数据推送的需求,一般的 HTTP 协议无法满足服务端主动 Push 数据的场景,因此 ...
- http的长连接和websocket的区别
一.什么是http协议 HTTP是一个应用层协议,无状态的,端口号为80.主要的版本有1.0/1.1/2.0. HTTP/1.* 一次请求-响应,建立一个连接,用完关闭: HTTP/1.1 串行化 ...
- Vue+WebSocket 实现页面实时刷新长连接
最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSoc ...
- WebSocket长连接
WebSocket长连接 1.概述 1.1 定义 1.2 原理 2.Django中配置WebSocket 2.1安装第三方法包 pip install channels 2.2 Django 中的配置 ...
- 浅谈Websocket、Ajax轮询和长连接(long pull)
最近看到了一些介绍Websocket的文章,觉得挺有用,所以在这里将自己的对其三者的理解记录一下. 1.什么是Websocket Websocket是HTML5中提出的新的协议,注意,这里是协议,可以 ...
随机推荐
- RSA签名和验证数据
private const string PubKey = "BgIAAACkAABSU0ExAAQAAAEAAQAxg/L6l3AyA+Zd7Hm7ESCcS4CcgY8PvwE2arRv ...
- 解决VS2019中.net core WPF 暂时无法使用 Designer 的临时方法
目录 解决 VS2019 中.net core WPF 暂时无法使用 Designer 的临时方法 安装 vs 2019 professional/enterprise版本 在vs的设置里,勾选.NE ...
- TensorFlow从1到2(五)图片内容识别和自然语言语义识别
Keras内置的预定义模型 上一节我们讲过了完整的保存模型及其训练完成的参数. Keras中使用这种方式,预置了多个著名的成熟神经网络模型.当然,这实际是Keras的功劳,并不适合算在TensorFl ...
- 号称“新至强,可拓展,赢当下”的Xeon可拓展处理器有多逆天?
目前企业数据中心正在发生重大变化,许多企业正在经历基于在线服务和数据的广泛转型.他们将这些数据用于功能强大的人工智能和分析应用程序,这些应用程序可以将其转化为改变业务的洞察力,然后推出可以使这些洞察力 ...
- MongoDB十二种最有效的模式设计【转】
持续关注MongoDB博客(https://www.mongodb.com/blog)的同学一定会留意到,技术大牛Daniel Coupal 和 Ken W. Alger ,从 今年 2月17 号开始 ...
- SQL Server的Descending Indexes
SQL Server的Descending Indexes 测试环境:SQL Server 2012 表结构如下 USE [test] GO CREATE TABLE [dbo].[tt8]( ,) ...
- Windows 2008 打开声音重定向来听到远程主机音频
Windows 2008 Server在默认情况下,是禁止使用桌面桌面连接后播放声音的(提示音频服务未启用).可以通过下面的方法启用音频: 管理工具->远程桌面服务->远程桌面会话主机配置 ...
- C# XML序列化/反序列化参考
.NET提供了很不错的XML序列化/反序列化器,(它们所在的命名空间为System.Xml.Serialization)这是很方便的,下面对它的使用做一些总结,以供参考. 1,简单序列化 public ...
- mysql之数据库添加索引优化查询效率
项目中如果表中的数据过多的话,会影响查询的效率,那么我们需要想办法优化查询,通常添加索引就是我们的选择之一: 1.添加PRIMARY KEY(主键索引) mysql>ALTER TABLE `t ...
- Python开发:Python2和Python3的共存和切换使用
从python2到python3,这两个版本可以说是从语法.编码等多个方面上都有很大的差别.为了不带入过多的累赘,Python 3.0在设计的时候没有考虑向下相容,也就是说许多针对早期Python2版 ...