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 相关文章推荐
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
回顾Javascript React基础
Jun 15 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
JavaScript中10个Reduce常用场景技巧
Jun 21 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 escape URL编码
2008/12/10 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
javascript常见操作汇总
2014/09/03 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
乡镇消防工作实施方案
2014/03/27 职场文书
小学教师求职信范文
2015/03/20 职场文书
学校开除通知书
2015/04/25 职场文书
贷款收入证明格式
2015/06/24 职场文书
预备党员入党感言
2015/08/01 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书