Vue-Socket.io的使用

zuank發表於2017-07-13
Vue

簡單介紹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;
}

我寫了第一篇文章。

相關文章