Vue中使用websocket
<template>
<div class="test">websocket demo</div>
</template>
<script>
export default {
data() {
return {
websock: null,
}
},
created(){ //页面刚进入时开启长连接
this.initWebSocket()
},
destroyed: function() {//页面销毁时关闭长连接
this.websocketclose();
},
methods: {
initWebSocket(){ //初始化weosocket
}, 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 + ")");
},
},
}
</script>
Vue中使用websocket的更多相关文章
- 解决在VUE中绑定WebSocket事件无法传值的问题
this.webSocket.onerror =(env)=>{ this.onError(env) }; https://jsfiddle.net/dko6g9a4/1/
- vue中开发webSocket
先安装 sockjs-client 和 stompjs npm install sockjs-client npm install stompjs <template> <div&g ...
- 在 vue 中使用 WebSocket
<template> <div class="hello"> <h1>{{ msg }}</h1> <h1>{{ res ...
- 在vue中如何使用WebSocket 以及nginx代理如何配置WebSocket
WebSocket WebSocket是一种网络传输协议,可在单个TCP连接上进行全双工通信.浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输. 浏览器支持情况 现 ...
- vue中websoket的使用
首先安装npm install --save websocket-heartbeat-js@^1.0.7 在main.js中 引入并挂载全局方法 import WebsocketHeartbeat ...
- vue项目使用websocket做聊天项目总结
一.首先我们先了解一下websocket的使用: 1.创建websocket const ws = new WebSocket("ws://192.168.31.136:9998/ws&qu ...
- vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上
一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...
- vue - Vue中的ajax
只有在ajax才能找回一点点主场了,vue中的ajax一天整完,内容还行,主要是对axios的运用. 明天按理说要开始vuex了,这个从来都是只耳闻没有眼见过,明天来看看看看是个什么神奇的东西. 一. ...
- 【C#】MVC项目中搭建WebSocket服务器
前言 因为项目需要,前端页面中需要不断向后台请求获取一个及一个以上的状态值.最初的方案是为每个状态值请求都建立一个定时器循环定时发起Ajax请求,结果显而 易见.在HTTP1.1协议中,同一客户端浏览 ...
随机推荐
- Tensorflow从0到1(4)之神经网络
一维数据集上的神经网络 # 1 引入包,创建会话 import tensorflow as tf import numpy as np sess = tf.Session() # 2 初始化数据 da ...
- VS2017未安装MFC解决方法
VS2017未安装MFC解决方法 https://blog.csdn.net/u010921682/article/details/89847395
- C# 什么是泛型 ?以及对泛型各方面的一些知识点的整理
1.1 理解什么是泛型 在.NET 2.0,可以成为革命性壮举的, 就是引入了激动人心的特性——泛型..NET泛型是CLR和高级语言共同支持的一种全新的结构,实现了一种将类型抽象化的通用处理方式.在泛 ...
- Magicodes.IE在.NET Core中通过请求头导出多种格式文件
前言 在2.2里程碑中我们增加了一些新的功能,正如标题所写通过请求头进行导出我们不同格式的文件.下面我们来看一下如何使用.通过这种方式无论是对我们的数据多用途,还是说对我们的数据校验都做到了轻松易配. ...
- 人脸识别Demo解析C#
概述 不管你注意到没有,人脸识别已经走进了生活的角角落落,钉钉已经支持人脸打卡,火车站实名认证已经增加了人脸自助验证通道,更别提各个城市建设的『智能城市』和智慧大脑了.在人脸识别业界,通常由人脸识别提 ...
- JavaWeb网上图书商城完整项目--day02-25.查询所有分类功能之流程分析
分类模块的业务流程入下面所示:
- 3、尚硅谷_SSM高级整合_使用ajax操作实现增加员工的功能
20.尚硅谷_SSM高级整合_新增_创建员工新增的模态框.avi 1.接下来当我们点击增加按钮的时候会弹出一个员工信息的对话框 知识点1:当点击新增的时候会弹出一个bootstrap的一个模态对话框 ...
- MongoDB via Dotnet Core数据映射详解
用好数据映射,MongoDB via Dotnet Core开发变会成一件超级快乐的事. 一.前言 MongoDB这几年已经成为NoSQL的头部数据库. 由于MongoDB free schema ...
- PID各环节的意义和功能,自带PID的matlab编程实例
这是PID的标准形式包括比例/积分/微分三部分,e为偏差 下面我们分析三个环节的作用,设:当前系统状态A,目标状态B, e=B-A,初始状态e>0 (以下是个人的理解,欢迎读者评论) 1 比例环 ...
- webpack入门进阶(1)
1.webpack应用实例 1.1.快速上手 初始化项目 mkdir webpack-demo cd webpack-demo npm init -y 安装webpack npm i webpack@ ...