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数组的扩展实现代码集合
Jun 01 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
js工具方法弹出蒙版
May 08 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
Vue Ajax跨域请求实例详解
Jun 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
php目录遍历函数opendir用法实例
2014/11/20 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
javascript用rem来做响应式开发
2018/01/13 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
简单介绍Python中的floor()方法
2015/05/15 Python
python下载图片实现方法(超简单)
2017/07/21 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
python 自定义装饰器实例详解
2019/07/20 Python
详解python pandas 分组统计的方法
2019/07/30 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
基于Python的OCR实现示例
2020/04/03 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
模具专业自荐信
2014/05/29 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
2014年副班长工作总结
2014/12/10 职场文书
预备党员自我评价范文
2015/03/04 职场文书
八年级作文之友谊
2019/12/02 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python