vue使用websocket的方法实例分析


Posted in Javascript onJune 22, 2019

本文实例讲述了vue使用websocket的方法。分享给大家供大家参考,具体如下:

最近项目需要使用到websocket 但是框架是vue  网上查阅很多资料 vue-websocket 老是连接不上 索性就不适用封装的插件了,直接使用原生的websocket  我这边需求是 只需要接受就好 不需要发送 代码如下:

爬坑之路:vue里面this指向问题

第一版 使用原生js

mounted(){
 console.log(this)----------------------------------------------------------this指向vue
 this.initWebpack();
},
methods: {
  initWebpack() {
    let websocket = '';
    if ('WebSocket' in window) {
      websocket = new WebSocket("ws://192.168.1.99:8080/tv/websocket");
    } else {
      alert('当前浏览器 Not support websocket')
    } //连接成功建立的回调方法 websocket.onopen = function () { console.log("WebSocket连接成功")
    console.log(this)----------------------------------------------------------this指向websocket
  };
//接收到消息的回调方法
websocket.onmessage = function (event) {
console.log(this)
console.log(event);
 this.productinfos=JSON.parse(event.data);//websocket请求过来的是string 需要格式
 if(demo.offsetHeight<demo1.offsetHeight){//内部比外部高度大的时候滑动
this.upScroll()//这是this指向websocket 所以没有此方法 会报错
}
this.sliceArray() }
 }
 };
//连接关闭的回调方法 websocket.onclose = function () {
console.log("WebSocket连接关闭");
};
//连接发生错误的回调方法 websocket.onerror = function () {
console.log("WebSocket连接发生错误");
};
//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
 window.onbeforeunload = function () {
websocket.close();
//关闭WebSocket连接 };
 },
sliceArray(){//截取数组的后四位 },
 upScroll(){ },
}

第二版:正解

methods:{
 initWebpack(){//初始化websocket
  const wsuri = "ws地址";
  this.websock = new WebSocket(wsuri);//这里面的this都指向vue
  this.websock.onopen = this.websocketopen;
  this.websock.onmessage = this.websocketonmessage;
  this.websock.onclose = this.websocketclose;
  this.websock.onerror = this.websocketerror;
 },
 websocketopen(){//打开
  console.log("WebSocket连接成功")
 },
 websocketonmessage(e){ //数据接收
  console.log(e)
  this.productinfos = JSON.parse(e.data);
 },
 websocketclose(){ //关闭
  console.log("WebSocket关闭");
 },
 websocketerror(){ //失败
  console.log("WebSocket连接失败");
 },
}

this.websock.onopen  的 this指向的是websocket 如果想要给vue里面的data里面的变量赋值 就需要 this指向vue 所以需要对websocket的方法赋值

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
学习JavaScript设计模式之代理模式
Jan 12 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
使用javascript做在线算法编程
May 25 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 #Javascript
js图片查看器插件用法示例
Jun 22 #Javascript
JS实现继承的几种常用方式示例
Jun 22 #Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 #Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 #Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 #Javascript
简单了解JavaScript中常见的反模式
Jun 21 #Javascript
You might like
星际争霸中的对战模式介绍
2020/03/04 星际争霸
PHP技术开发微信公众平台
2015/07/22 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
python动态加载变量示例分享
2014/02/17 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
python实现ftp文件传输功能
2020/03/20 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
小学生家长评语集锦
2014/01/30 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
师恩难忘教学反思
2014/04/27 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
交通安全横幅标语
2014/10/07 职场文书
房屋转让协议书
2014/10/18 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
入伍通知书
2015/04/23 职场文书
大学同学聚会感言
2015/07/30 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS