Vue-websocket使用
Vue中使用websocket
1.介绍:websocket是一个双向通行工具,解决了原来的http单向通信的弊端,可以让服务器主动向客户端推送数据
// 安装客户端的socket npm i socket.io-client --save /* 安装Vue配置socket的工具 注意:需要安装3.0.7版本的包,最新的包会有问题
*/ npm i vue-socket.io@3.0.7 --save // 在main.js中引入设置 import VueSocketIO from 'vue-socket.io' import SocketIO from 'socket.io-client' Vue.use(new VueSocketIO({ // 生产环境需要切换成false
debug: true, // 连接的后端地址
connection: SocketIO('http://localhost:3000?token=ab'), // 需要使用vuex的话,需要配置一下
vuex: {
store,
// mutation中定义方法的前缀
mutationPrefix: 'SOCKET_',
// actions中定义方法的前缀
actionPrefix: 'SOCKET_'
}
}))
// 在组件中使用 <script> export default { mounted () { // 像后端触发一个事件函数,像后端传递数据
this.$socket.emit('message', { name: '小美' })
} /* 接收后端的事件函数传递的参数,在sockets对象中定义事件函数, 包括一些内置的事件方法
*/ sockets: { // 内置的事件方法
connect () { console.log('和服务器连接成功调用') // 是否已经连接到服务器
console.log(this.$socket.connected) // 是否和服务器断开连接
console.log(this.$socket.disconnected) // 套接字会话的唯一标识符,在reconnect事件后更
console.log(this.$socket.id) }, disconnect () { console.log('和服务器断开连接时调用') // 手动重新连接
this.$socket.open() // 断开连接时重新连接,和open一样
this.$socket.connect()
}, reconnecting () { console.log('尝试重新连接时触发')
}, reconnect_error () { console.log('重新连接错误时触发')
}, // 服务器端触发的自定义事件 vueMessage (msg) { console.log(msg) // 像服务器端发送数据
this.$socket.send('来吧面对疾风吧')
}
}
}
</script>
Vue-websocket使用的更多相关文章
- vue+websocket+express+mongodb实战项目(实时聊天)
继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...
- vue+websocket+express+mongodb实战项目(实时聊天)(二)
原项目地址:[ vue+websocket+express+mongodb实战项目(实时聊天)(一)][http://blog.csdn.net/blueblueskyhua/article/deta ...
- Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏
Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏 转载 来源:jrainlau 链接:https://segmentfault.com/a/1190000005804860 项 ...
- SpringBoot+Vue+WebSocket 实现在线聊天
一.前言 本文将基于 SpringBoot + Vue + WebSocket 实现一个简单的在线聊天功能 页面如下: 在线体验地址:http://www.zhengqingya.com:8101 二 ...
- vue+websocket demo 实例
vue+websocket demo: <!-- vue + websocket连接demo --> <template> <div class="" ...
- vue + websocket 的使用
阳光正好,我们正在努力前行. 一.引言 初始使用websocket ,一开始看文档的时候,觉得很简单,只需要创建websocket实例,然后有几个监听打开连接,监听关闭连接,监听连接异常等方法.但是, ...
- Vue+WebSocket 实现页面实时刷新长连接
最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSoc ...
- Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互
引言 在与实现了语音合成.语义分析.机器翻译等算法的后端交互时,页面可以设计成更为人性化.亲切的方式.我们采用类似于聊天对话的实现,效果如下: 智能客服(输入文本,返回引擎处理后的文本结果) 语音合成 ...
- 【土旦】Vue+WebSocket 实现长连接
1.websocket 连接代码 created() { this.initWebsocket() }, methods: { // 初始化websocket initWebsocket() { le ...
- websocket介绍 以及 vue websocket使用案例
1 介绍: https://www.zhihu.com/question/20215561 2 案例: https://www.jianshu.com/p/0d20a032d0ec (坑说明). ht ...
随机推荐
- Interactive and non-interactive shell环境变量的差异
背景 在mac上安装mosh server后,用mosh client去连接,一直报command not found的错 zsh: command not found: mosh-server 但是 ...
- 「雕爷学编程」Arduino动手做(24)——水位传感器模块
37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...
- React实践:自定义html特性不显示
发现React中自定义的html特性在render后是不现实,而且getAttribute方法也只能获取到undefined. 后来去stackoverflow提问,网友回答说: It depends ...
- iOS私有api检测工具使用
背景:这两天提审了一款新的APP,由于项目中使用了老版本的TZImagePicker中访问了私有API,导致提审失败. 预审经验分享: https://baijiahao.baidu.com/s?id ...
- 19-6 通过t-sql实现约束
------------------------------------------------------------------------ --通过t-sql语句来创建约束 ---------- ...
- Msql 给结果拼接字符串
SELECT CONCAT("内容:",info)AS info FROM 表名;
- Verilog代码和FPGA硬件的映射关系(四)
其实在FPGA的开发中理想情况下FPGA之间的数据要通过寄存器输入.输出,这样才能使得延时最小,从而更容易满足建立时间要求.我们在FPGA内部硬件结构中得知,IOB内是有寄存器的,且IOB内的寄存器比 ...
- MAC 下SFT环境搭建及使用
基本环境的搭建就不说了,网上一搜就是一堆 记录下正常的使用过程,主机-服务器是MAC机,从机-Windows机子 1.STF服务启动(挂后台的服务,启动后输入 exit退出进程即可) 后台启动DB:n ...
- Mysql的一次查询的过程
1.用户发起请求,这里往往时多线程并发访问 2.去数据库线程池拿数据库链接,如果没有线程池,每次访问都要和数据库建立一次连接,非常耗时,效率低下 3.数据库层面上来说,可能会有多个系统同时访问它,所以 ...
- java基础-HelloWorld
public class HelloWorld{//源文件中只能有一类声明为public , 且类名和源文件名得一样 //main方法,程序的入口 public static void main(St ...