脚本宝典收集整理的这篇文章主要介绍了Vue-Socket.io的使用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

简单介绍Vue-socket.io的使用

第一步

npm install vue-socket.io --save 

vue中的使用可以参考作者的demo
http://metinseylan.com/vuesoc...

vuex中简单介绍一下接入

建立socket连接

import VueSocketio From 'vue-socket.io'; import socketio from 'socket.io-client';  Vue.use(VueSocketio, socketio('http://172.16.20.148:3000/'), Store); 

服务端配置

io.sockets.on('connection', (socket) => {     ...   });

服务端接收到消息后会返回一个消息。

VueSocketio 对这个消息做了三个接受的地方
在.vue文件中配置

sockets: {       connect() {         console.LOG('socket connected');       }     }

这边可以配置一些相应的事件处理

其次 action中也做了接受 但是规定了Function的格式

export function socketConnect(context, value) {   console.log('连接成功'); }

最后就是mutations 也有格式要求

'SOCKET_CONNECT' (state) {       state.connect = true;     }

最后 往服务端发消息

this.$socket.emIT('test', '123');

服务端接受

io.sockets.on('connection', (socket) => {  socket.on('test', (name) => {   socket.emit('login', {     nickname: name,     id: socket.id,    });   }); });

同样的 客户端就这样做接受

sockets: {   connect() {     console.log('socket connected');   },   login(value) {     console.log(value);   }, }  .........  export function socketLogin(context, value) {   console.log(value); }  .........  'SOCKET_LOGIN' (state, info) {   state.info = info; } 

我写了第一篇文章。

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的Vue-Socket.io的使用全部内容，希望文章能够帮你解决Vue-Socket.io的使用所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。