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使用的更多相关文章

  1. vue+websocket+express+mongodb实战项目(实时聊天)

    继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...

  2. vue+websocket+express+mongodb实战项目(实时聊天)(二)

    原项目地址:[ vue+websocket+express+mongodb实战项目(实时聊天)(一)][http://blog.csdn.net/blueblueskyhua/article/deta ...

  3. Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏

    Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏 转载 来源:jrainlau 链接:https://segmentfault.com/a/1190000005804860 项 ...

  4. SpringBoot+Vue+WebSocket 实现在线聊天

    一.前言 本文将基于 SpringBoot + Vue + WebSocket 实现一个简单的在线聊天功能 页面如下: 在线体验地址:http://www.zhengqingya.com:8101 二 ...

  5. vue+websocket demo 实例

    vue+websocket demo: <!-- vue + websocket连接demo --> <template> <div class="" ...

  6. vue + websocket 的使用

    阳光正好,我们正在努力前行. 一.引言 初始使用websocket ,一开始看文档的时候,觉得很简单,只需要创建websocket实例,然后有几个监听打开连接,监听关闭连接,监听连接异常等方法.但是, ...

  7. Vue+WebSocket 实现页面实时刷新长连接

    最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSoc ...

  8. Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互

    引言 在与实现了语音合成.语义分析.机器翻译等算法的后端交互时,页面可以设计成更为人性化.亲切的方式.我们采用类似于聊天对话的实现,效果如下: 智能客服(输入文本,返回引擎处理后的文本结果) 语音合成 ...

  9. 【土旦】Vue+WebSocket 实现长连接

    1.websocket 连接代码 created() { this.initWebsocket() }, methods: { // 初始化websocket initWebsocket() { le ...

  10. websocket介绍 以及 vue websocket使用案例

    1 介绍: https://www.zhihu.com/question/20215561 2 案例: https://www.jianshu.com/p/0d20a032d0ec (坑说明). ht ...

随机推荐

  1. Java并发包4--可重入锁ReentrantLock的实现原理

    前言 ReentrantLock是JUC提供的可重入锁的实现,用法上几乎等同于Synchronized,但是ReentrantLock在功能的丰富性上要比Synchronized要强大. 一.Reen ...

  2. PAT-1079 Total Sales of Supply Chain (树的遍历)

    1079. Total Sales of Supply A supply chain is a network of retailers(零售商), distributors(经销商), and su ...

  3. 1000 千米高空俯瞰 React Native

    一.历史:React Native 从开始到现在 React Native 的定位是通过 React 构建原生 App: A framework for building native apps wi ...

  4. [Objective-C] 005_Category(类别)

    Category的实际作用就是为已有的类来添加方法.为现有的类添加的方法可以先不用实现,在需要的时候再实现也是可以的.在我们的实际代码中如何来实现Category的呢?我们上篇的Person 类为例. ...

  5. SD.Team回复形象小人偶

  6. (九)显示交易记录 &解决相对路径问题

    UserServlet.java package com.aff.bookstore.servlet; import java.io.IOException; import javax.servlet ...

  7. java基础-HelloWorld

    public class HelloWorld{//源文件中只能有一类声明为public , 且类名和源文件名得一样 //main方法,程序的入口 public static void main(St ...

  8. 逃离CSDN

    2012年2月18日,从CSDN搬家到这里.对于搬家的理由,总觉得该说点什么.我是在2012年1月29日又开始写博客的,在此之前我的CSDN博客闲置了10个月.从1月29日开始,不到1个月的时间建立了 ...

  9. 用java方式实现快速排序

    一.基本思想 快速排序采用分治的策略,具体如下:选择一个关键值作为基准值,找到一个元素小于比基准值小的都在左边序列(一般是无序的),比基准值大的都在右边(一般是无序的).一般选用序列第一个元素作为基准 ...

  10. # # # Vue的分环境打包

    我们使用Vue-cli的默认环境是只有dev和prod两种环境,在开发中我们的项目一般是开发版.测试版.pre版.Prod版.我们一般是在源码中API地址中修改后然后打包. ###1.首先安装cros ...