最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助.废话少说,下面我就来讲一下我的实现过程: 前提 要进行文章中的代码的测试,需要服务端端开发人员配合你,提供相关的通信接口.来完成客户端和服务端的通信.实现通信,我们需要用到另个模块sockjs-client模块和stomjs模块,接下来我会先对这两个模块做一个简单的介绍. 稍后我会写一篇使用Nod…

最近的项目开发中用到了Vue组件中嵌套iframe,相应的碰到了组件和HTML的通信问题,场景如下:demo.vue中嵌入 test.html 由于一般的iframe嵌套是用于HTML文件的,在vue中我们需要在vue文件注册一个全局的方法,在iframe中某个事件触发时,可以回传到vue组件 demo.vue主要代码: <template> <iframe ref="iframe" src='test.html'> </iframe> </t…

以前使用websocket都是使用 window.webSocket = new WebSocket('ws://' + config.webSocketUrl + '/webData/websocket?token=' + token + '&username=' + username);这种方式进行操作.由于项目要求,需要访问网关因此需要使用http的连接方式进行socket信息推送,以下用的是 SockJS. # 2019-04-11更新随着项目的模块化,需要把websocket相关的功能…

1.安装 npm install axios 2.在main.js中全局注册 // axios不可以通过use引入,可以通过修改vue原型链 import axios from 'axios' Vue.prototype.$ajax = axios 3.在组件中使用(方法一) // .then .catch拥有各自独立的作用域,在后面添加.bind(this)可以使this指向组件实例 this.$ajax.post('/dnalims/svc/loaddict', data).then(fun…

组件关系可分为父子组件通信.兄弟组件通信 1.父组件传子组件 通过props属性来实现 2.子组件传父组件 子组件用$emit()来触发事件,父组件用$on()来监听子组件的事件 3.兄弟之间的通信 通过一个实例Bus作为媒介,要相互通信的兄弟组件之中都引入Bus,之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递…

我们知道Vue中组件之间的通信有很多方式,父子之间通信比较简单,当我们使用vuex时候,兄弟组件之间的通信也很好得到解决 当我们项目较小时候,不使用vuex时候Vue中兄弟组件之间的通信是怎样进行的呢 参考链接:https://my.oschina.net/u/3229305/blog/1820279 //在生成vue实例前,给Vue的原型上添加一个bus属性,这个属性是vue的实例, //之后创建的vue实例都具有bus这个属性 //首先在main.js Vue.prototype.bus =…

WebSocket WebSocket是一种网络传输协议,可在单个TCP连接上进行全双工通信.浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输. 浏览器支持情况 现代浏览器基本都支持WebSocket 在vue中的使用 data(){ return { socket:null } }, mounted () { window.onbeforeunload = function () { this.close() } this.initSocket() }, d…

首先安装npm install --save  websocket-heartbeat-js@^1.0.7 在main.js中  引入并挂载全局方法 import WebsocketHeartbeatJs from 'websocket-heartbeat-js'; if (JSON.parse(getStore('userInfo'))!= null) { let userId = JSON.parse(getStore('userInfo')).id; let websocketHeartb…

一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频.不光是这样,在页面加载完毕的情况下,用户没有click.dbclick.touch等主动交互行为,使用js直接调用.play() 方法的话,chrome都会抛出如下错误:Uncaught (in promise) DOMException: 解决…

只有在ajax才能找回一点点主场了,vue中的ajax一天整完,内容还行,主要是对axios的运用. 明天按理说要开始vuex了,这个从来都是只耳闻没有眼见过,明天来看看看看是个什么神奇的东西. 一. 解决开发环境ajax跨域问题 1.配置代理(方法一) 首先我们能发起ajax请求的,xhr原生不推荐.jQuery也不封装得有但是也不推荐,因为要操作DOM,然后就是axios,它的体积比jQuery而且他是专门处理数据请求的,他还是promise风格的,jq和axios都是基于xhr来封装的,如…