vue封装websocket_Vue中使用websocket
export default {
data() {
return {
websock: null,
}
},
created(){ //页面刚进入时开启长连接
this.initWebSocket()
},
destroyed: function() {//页面销毁时关闭长连接
this.websocketclose();
},
methods: {
initWebSocket(){ //初始化weosocket
const wsuri = "/websocket/threadsocket";//ws地址
this.websock = new WebSocket(wsuri);
this.websocket.onopen = this.websocketonopen;
this.websocket.onerror = this.websocketonerror;
this.websock.onmessage = this.websocketonmessage;
this.websock.onclose = this.websocketclose;
},
websocketonopen() {
console.log("WebSocket连接成功");
},
websocketonerror(e) { //错误
console.log("WebSocket连接发生错误");
},
websocketonmessage(e){ //数据接收
const redata = JSON.parse(e.data);
//注意:长连接我们是后台直接1秒推送一条数据,
//但是点击某个列表时,会发送给后台一个标识,后台根据此标识返回相对应的数据,
//这个时候数据就只能从一个出口出,所以让后台加了一个键,例如键为1时,是每隔1秒推送的数据,为2时是发送标识后再推送的数据,以作区分
console.log(redata.value);
},
websocketsend(agentData){//数据发送
this.websock.send(agentData);
},
websocketclose(e){ //关闭
console.log("connection closed (" + e.code + ")");
},
},
}
标签:Vue,console,log,websocketclose,WebSocket,websock,使用,websocket
来源: https://www.cnblogs.com/luobiao/p/10552093.html
vue封装websocket_Vue中使用websocket相关推荐
- vue项目中通过WebSocket实现实时消息提示及遇到的问题
vue项目中通过WebSocket实现实时消息提示(前端代码) 需求说明 后台有新增消息通知,并实时推送给用户端,用websocket可以很方便的解决这个问题,但是websocket有个弊端不兼容IE ...
- SpringCloud工作笔记060---SpringBoot中使用WebSocket实现即时通讯_实现呼叫中心业务封装
JAVA技术交流QQ群:170933152 ---------------我们主要用这个来转接,呼叫中心发过来的分机电话 呼叫中心:呼叫过程,首先呼叫中心运营商给个,api手册,api会规定,首先登陆 ...
- axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍
Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
- vue 封装调用 wangeditor v4.0富文本编辑框组件 v-model
背景 本机的环境使用的vue的脚手架,用到了富文本编辑框,所以选择将wangeditor封装为组件调用 wangeditor官网:https://www.wangeditor.com/ 在vue的项目 ...
- vue与elementUI中给el-input绑定键盘按键--按键修饰符
vue怎么写键盘事件 vue允许将按键值作为修饰符来使用,如监听回车事件,有两种写法,如下代码: <input type="text" @keyup.13="con ...
- android中的websocket 应用
websocket 在实际的应用中不仅仅能做聊天应用,还可以利用websocket长连接保持数据的实时更新以及信息的推送. websocket 的实现的关键点 第一个:首先需要引入 java-webs ...
- vue-03-4:vue封装方法到工具类
vue-03-4:vue封装方法到工具类 参考博客:咸鱼最牛逼 地址:https://blog.csdn.net/panchang199266?utm_source=feed 一.步骤 1.src目录 ...
- vue封装自定义数字键盘组件
最近在公司做一个项目,简单来说就是web端微信公众号上的一个申请表单页面,随便如个图 环境: vue框架 + vant组件库 + 其它(这里用不上的,不说) 具体如图: 都知道,input输入框如果不 ...
- vue+vuecli+webpack中使用mockjs模拟后端数据
前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...
最新文章
- 水痘痊愈就能终生免疫?其实病毒仍潜伏在神经,随时以更可怕的形式爆发......
- 医院管理系统的新机遇
- Gitlab+Jenkins学习之路(三)之gitlab权限管理--issue管理
- OpenCV中 CvArr、Mat、CvMat、IplImage、BYTE转换(总结而来)
- goland设置goroot_go环境搭建-goland使用、gopath、go命令
- linux怎么衡量负载大小,如何查看linux机器的平均负载
- VS Code 1.39 发布!Web 版 VS Code 是否离我们越来越近了?(文末彩蛋)
- python可以帮机器人编程吗_Python如何实现机器人聊天
- 如鹏网 net高级技术 第二章 委托和事件(复习)
- 李宏毅机器学习(四)Spatial Transformer Layer
- if循环java语句_java-条件判断和循环语句
- RobotFramework Library
- SDUT-2054_数据结构实验之链表九:双向链表
- java利用openoffice转换doc、docx、txt、pptx、xlxs为PDF格式文件
- windows修改注册表,替换按键映射
- srb话题x-s x-b3-traceid
- 非淡泊无以明志,非宁静无以致远
- 20172302 《Java软件结构与数据结构》第五周学习总结
- idea常用方法和快捷键
- 磨金石教育摄影技能干货分享||如何将平凡的窗户拍出美感
热门文章
- 量化分析师的python日记_量化分析师的Python日记【第1天:谁来给我讲讲Python?】...
- Oracle的权限角色及用户
- java基础知识总结(4)
- Brownie Slicing(二分枚举答案)
- Nginx学习---Nginx的详解_【all】
- Python Numpy中transpose()函数的使用
- JavaScript中this关键字的使用比较
- DealComment (注释处理工具)
- mysql 字符串的hash函数_【转载】字符串Hash函数比较
- python 模拟登录验证码_Python模拟登陆 —— 征服验证码 3 CSDN