系列博文的傳送門：http://www.cnblogs.com/lastpairs/p/6993237.html

客戶端代碼github地址 https://github.com/xxyjskx1987/lastpairswebapp

服務器端代碼github地址 https://github.com/xxyjskx1987/lastpairsnodeserver

項目演示地址 http://www.tanmiba.com/

socket.io在BS架構的即時通信工具中，可以說是不二選擇，本例在vue中使用socket.io，將其封裝為常量模塊，通過import引用。

安裝socket.io

npm install socket.io -s

模塊封裝

import io from ‘socket.io-client‘

const CHAT = {
    socket: null,
    msgArr: [],
　　logout: function(){
　　  this.socket.disconnect();
　　},
    init: function(){
            this.socket = io.connect(‘ws://127.0.0.1:3000‘);

            this.socket.on(‘login‘, function(obj){
                CHAT.msgArr.push(obj)
            });

            
 
//監聽用戶退出
            this.socket.on(‘logout‘, function(o){
                
            });

    }
}

export default CHAT

在VUE文件中調用示例

<script>
import CHAT from ‘client‘
export default {
  name: ‘‘,
  data () {
    return {
    }
  },
 mounted(){
    CHAT.init()
  },
  methods: {
    logout: function
 
() {
      CHAT.logout()
    }
  }
}
</script>

業務功能可以在socket-client中添加方法，調用方式同如上所示。

基於網絡聊天室的社交遊戲 -- vue、socket.io-client