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. RSA签名和验证数据

    private const string PubKey = "BgIAAACkAABSU0ExAAQAAAEAAQAxg/L6l3AyA+Zd7Hm7ESCcS4CcgY8PvwE2arRv ...

  2. 解决VS2019中.net core WPF 暂时无法使用 Designer 的临时方法

    目录 解决 VS2019 中.net core WPF 暂时无法使用 Designer 的临时方法 安装 vs 2019 professional/enterprise版本 在vs的设置里,勾选.NE ...

  3. TensorFlow从1到2(五)图片内容识别和自然语言语义识别

    Keras内置的预定义模型 上一节我们讲过了完整的保存模型及其训练完成的参数. Keras中使用这种方式,预置了多个著名的成熟神经网络模型.当然,这实际是Keras的功劳,并不适合算在TensorFl ...

  4. 号称“新至强,可拓展,赢当下”的Xeon可拓展处理器有多逆天?

    目前企业数据中心正在发生重大变化,许多企业正在经历基于在线服务和数据的广泛转型.他们将这些数据用于功能强大的人工智能和分析应用程序,这些应用程序可以将其转化为改变业务的洞察力,然后推出可以使这些洞察力 ...

  5. MongoDB十二种最有效的模式设计【转】

    持续关注MongoDB博客(https://www.mongodb.com/blog)的同学一定会留意到,技术大牛Daniel Coupal 和 Ken W. Alger ,从 今年 2月17 号开始 ...

  6. SQL Server的Descending Indexes

    SQL Server的Descending Indexes 测试环境:SQL Server 2012 表结构如下 USE [test] GO CREATE TABLE [dbo].[tt8]( ,) ...

  7. Windows 2008 打开声音重定向来听到远程主机音频

    Windows 2008 Server在默认情况下,是禁止使用桌面桌面连接后播放声音的(提示音频服务未启用).可以通过下面的方法启用音频: 管理工具->远程桌面服务->远程桌面会话主机配置 ...

  8. C# XML序列化/反序列化参考

    .NET提供了很不错的XML序列化/反序列化器,(它们所在的命名空间为System.Xml.Serialization)这是很方便的,下面对它的使用做一些总结,以供参考. 1,简单序列化 public ...

  9. mysql之数据库添加索引优化查询效率

    项目中如果表中的数据过多的话,会影响查询的效率,那么我们需要想办法优化查询,通常添加索引就是我们的选择之一: 1.添加PRIMARY KEY(主键索引) mysql>ALTER TABLE `t ...

  10. Python开发:Python2和Python3的共存和切换使用

    从python2到python3,这两个版本可以说是从语法.编码等多个方面上都有很大的差别.为了不带入过多的累赘,Python 3.0在设计的时候没有考虑向下相容,也就是说许多针对早期Python2版 ...