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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
执行iframe中的javascript方法
Oct 07 Javascript
JQuery从头学起第二讲
Jul 04 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
php合并js请求的例子
2013/11/01 PHP
php取得字符串首字母的方法
2015/03/25 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
javascript事件模型介绍
2016/05/31 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
python实时分析日志的一个小脚本分享
2017/05/07 Python
Python微信库:itchat的用法详解
2017/08/14 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
销售类求职信
2014/06/13 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
财政局个人年终总结
2015/03/03 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫