Vue通过WebSocket建立长连接的实现代码

使用场景：

　　在项目开发中，后端需要处理一连串的逻辑，或者等待第三方的数据返回来进行处理之后在返回给前端，可能时间会很长，而且前端也不知道后端什么时候能处理好（时间长的话会达到10分钟左右），如果采用普通的HTTP连接，前后端无法一直保持联系，麻烦的时候可能还需要采用轮询的机制，所以使用WebSocket连接效果还是比较好的。

使用时间：

　　在界面加载完之后，建上WebSocket连接，此时前端还可以发送普通的HTTP的请求，等到后端处理完之后，通过建立的WebSocket连接返给前端，前端根据返回的数据进行对应的操作。

代码展示：

<template>
</template>
<script>
export default {
 data() {
  return{
   // 用户Id
   userId:'',
   appid:'',
   // 事件类型
   type:'',
   msg:'',
   wsUrl:''
  }
 },
 methods: {
  //初始化weosocket
  initWebSocket() {
   if (typeof WebSocket === "undefined") {
    alert("您的浏览器不支持WebSocket");
    return false;
   }
   const wsuri = 'ws://(后端WebSocket地址)/websocket/' + this.userId + '/' + this.appid // websocket地址
   this.websock = new WebSocket(wsuri);
   this.websock.onopen = this.websocketonopen;
   this.websock.onmessage = this.websocketonmessage;
   this.websock.onerror = this.websocketonerror;
   this.websock.onclose = this.websocketclose;
  },
  //连接成功
  websocketonopen() {
   console.log("WebSocket连接成功");
   // 添加心跳检测，每30秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
   let self = this;
   this.timer = setInterval(() => {
    try {
     self.websock.send('test')
     console.log('发送消息');
    }catch(err){
     console.log('断开了：' + err);
     self.connection()
    }
   }, 30000)
  },
  //接收后端返回的数据，可以根据需要进行处理
  websocketonmessage(e) {
   var vm = this;
   let data1Json = JSON.parse(e.data);
   console.log(data1Json);
  },
  //连接建立失败重连
  websocketonerror(e) {
   console.log(`连接失败的信息：`, e);
   this.initWebSocket(); // 连接失败后尝试重新连接
  },
  //关闭连接
  websocketclose(e) {
   console.log("断开连接", e);
  }
 },
 created() {
  if (this.websock) {
   this.websock.close(); // 关闭websocket连接
  }
  this.initWebSocket();
 },
 destroyed() {
  //页面销毁时关闭ws连接
  if (this.websock) {
   this.websock.close(); // 关闭websocket
  }
 }
};
</script>

问题回顾：

　　在实际使用的时候遇到的问题：有的时候页面链接还没有建立上，但是后端已经把数据都处理好了，这个时候推给前端，前端接收不到。

解决方案：

　　1）简单的方法：让后端延迟几秒再推

　　优势：简单

　　劣势：降低了性能

　　2）优化之后的方法：使用Redis保存用户的登录状态，缓存这个用户的数据，等到建立连接之后再推，推完就清空Redis

总结

以上所述是小编给大家介绍的Vue通过WebSocket建立长连接的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • Django+Vue实现WebSocket连接的示例代码

    近期有一需求:前端页面点击执行任务,实时显示后端执行情况,思考一波:发现 WebSocket 最适合做这件事. 效果 测试 ping www.baidu.com 效果 点击连接建立ws连接 后端实现 所需软件包 后端主要借助Django Channels 实现socket连接,官网文档链接 这里想实现每个连接进来加入组进行广播,所以还需要引入 channels-redis . pip channels==2.2.0 channels-redis==2.4.0 引入 settings.py INS

  • websocket在springboot+vue中的使用教程

    1.websocket在springboot中的一种实现 在java后台中,websocket是作为一种服务端配置,其配置如下 @Configuration public class WebSocketConfig { @Bean(name="serverEndpointExporter") public ServerEndpointExporter getServerEndpointExporterBean(){ return new ServerEndpointExporter()

  • 在vue中使用SockJS实现webSocket通信的过程

    最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助.废话少说,下面我就来讲一下我的实现过程: socksjs •客户端和服务器端api尽可能简洁,尽量靠近websocket api •支持服务端扩展和负载均衡技术 •传输层应该全面支持跨域通信 •如果受到代理服务器的限制,传输层能优雅地从一种方式回退到另一种方式 •尽可能快地建立连接 •客户端只是纯

  • vue使用websocket的方法实例分析

    本文实例讲述了vue使用websocket的方法.分享给大家供大家参考,具体如下: 最近项目需要使用到websocket 但是框架是vue  网上查阅很多资料 vue-websocket 老是连接不上 索性就不适用封装的插件了,直接使用原生的websocket  我这边需求是 只需要接受就好 不需要发送 代码如下: 爬坑之路:vue里面this指向问题 第一版 使用原生js mounted(){ console.log(this)---------------------------------

  • vue发送websocket请求和http post请求的实例代码

    先给大家介绍下vue发送websocket请求和http post请求 直接上代码: pdf.vue <script> import SockJS from 'sockjs-client'; import Stomp from 'stompjs'; import qs from "qs" export default { name: "pdf", data() { return { newsData: [], tagGuid_mx: "&quo

  • Vue通过WebSocket建立长连接的实现代码

    使用场景: 在项目开发中,后端需要处理一连串的逻辑,或者等待第三方的数据返回来进行处理之后在返回给前端,可能时间会很长,而且前端也不知道后端什么时候能处理好(时间长的话会达到10分钟左右),如果采用普通的HTTP连接,前后端无法一直保持联系,麻烦的时候可能还需要采用轮询的机制,所以使用WebSocket连接效果还是比较好的. 使用时间: 在界面加载完之后,建上WebSocket连接,此时前端还可以发送普通的HTTP的请求,等到后端处理完之后,通过建立的WebSocket连接返给前端,前端根据返回

  • Vue+WebSocket页面实时刷新长连接的实现

    最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示,记录一下过程以及碰到的问题: 注意:页面刷新长连接会被关闭,其实进入当前页面建立长连接的目的就是页面不用F5刷新,所有数据自动实时刷新,如果还是来回F5大刷页面那就没有意义了... ps: 如果实在有这个需求的话,网上貌似有实现刷新页面长连接不断的方法,请自行百度....

  • java与微信小程序实现websocket长连接

    java与微信小程序实现websocket长连接

    本文实例为大家分享了java与微信小程序实现websocket长连接的具体代码,供大家参考,具体内容如下 背景: 需要在小程序实现地图固定坐标下实时查看消息 java环境 :tomcat7 jdk1.7 1.java websocket 类 package com.qs.util; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.

  • PHP扩展模块memcached长连接使用方法分析

    网上广泛流传着一篇文章,讲述php的两个扩展模块memcache和memcached的区别,其中特意强调了memcached与memcached一个很大的区别是memcached模块不支持长连接.以至于后来很多年我都认为memcached是不支持长连接的,其实不然,memcached扩展模块从很早的版本开始就已经支持长连接了.从扩展模块的源码注视中我们就能看到: /* {{{ Memcached::__construct([string persistent_id[, callback on_n

  • SpringBoot集成WebSocket长连接实际应用详解

    前言: 一.WebSocket之初出茅驴 官方定义:WebSocket是一种在单个TCP连接上进行全双工通信的协议.WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输.是真正的双向平等对话,属于服务器推送技术的一种. 太官方啦,还是博主过来翻译一下吧 :WebSocket技术只需要service和client建立一次连接,就能实现服

  • Python WebSocket长连接心跳与短连接的示例

    安装 pip install websocket-client 先来看一下,长连接调用方式: ws = websocket.WebSocketApp("ws://echo.websocket.org/", on_message = on_message, on_error = on_error, on_close = on_close) ws.on_open = on_open ws.run_forever()  长连接,参数介绍: (1)url: websocket的地址. (2)h

  • vue使用webSocket更新实时天气的方法

    vue使用webSocket更新实时天气的方法

    目录 前言 关于 webSocket 的操作及示例: webSocket 1.关于 webSocket 2.与 AJAX 轮的区别 3.webSocket 事件 4. 一个简单的示例 天气更新 图片素材 重连机制 前言 在 vue 中使用 webSocket 做一个简单的天气实时更新模块. 关于 webSocket 的操作及示例: 1.webSocket 连接 2.接收数据 3.重连机制 webSocket 1.关于 webSocket webSocket 是 HTML5 开始提供的一种在单个

  • vue使用WebSocket模拟实现聊天功能

    vue使用WebSocket模拟实现聊天功能

    效果展示 两个浏览器相互模拟 1.创建模拟node服务 在vue根目录下创建 server.js 文件模拟后端服务器 **在server终端目录下载 ** npm install --s ws 2.编写server.js文件 代码如下 var userNum = 0; //统计在线人数 var chatList = [];//记录聊天记录 var WebSocketServer = require('ws').Server; wss = new WebSocketServer({ port: 8

随机推荐