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类
Sep 08 Javascript
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
JS实现简单日历特效
Jan 03 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
php获取文件内容最后一行示例
2014/01/09 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
JS文本框默认值处理详解
2013/07/10 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
Node.js实现数据推送
2016/04/14 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
Three.js基础学习教程
2017/11/16 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
Python中的asyncio代码详解
2019/06/10 Python
Python实现微信机器人的方法
2019/09/06 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
python基于event实现线程间通信控制
2020/01/13 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
国际商务专业学生个人的自我评价
2013/09/28 职场文书
后勤采购员岗位职责
2013/12/19 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
《春笋》教学反思
2014/04/15 职场文书
高三学生评语大全
2014/04/25 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
2014年超市工作总结
2014/11/19 职场文书
工程部经理岗位职责
2015/02/02 职场文书