脚本宝典收集整理的这篇文章主要介绍了

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-Socket.io的使用

全部内容,希望文章能够帮你解决

Vue-Socket.io的使用

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过