服务端配置       最近在用vue写一个大屏幕项目，要求实时更新数据，考虑到用轮询方式开销比较大，所以考虑用socket.io，这样一旦数据更新，服务端可主动将数据推送至客户端。

 一、简单介绍一下socket

Socket是在应用层和传输层之间的一个抽象层，它把TCP/IP层复杂的操作抽象为几个简单的接口，供应用层调用实现进程在网络中的通信。它是一种全双工（服务端与客户端可同时收发消息）通信，当有数据更新时服务端可以主动的将消息推送到客户端。

Socket通信的流程：

1、服务端启动Socket监听端口，监听是否有客户端连接进来，即Watch Socket；

2、客户端通过http协议发送请求报文，服务端响应请求后会将协议升级为WebSocket，并创建一个新的Socket对象，客户端Socket随即与服务端Socket进行连接和通信，且客户端不再与Watch Socket通信；

3、Watch Socket继续监听是否有其它客户端连接

 

socket.io的github地址:https://github.com/MetinSeylan/Vue-Socket.io

二、Vue中安装

cnpm install vue-socket.io --save
cnpm install socket.io-client --save

三、全局中引入

main.js


import VueSocketio from 'vue-socket.io';
import socketio from 'socket.io-client';


Vue.use(VueSocketio, socketio('xxxx:80'));  //xxx填后台给的socket地址，端口号根据实际后台端口写

// Vue.use(new VueSocketio({
//    debug:false,
//    connection: 'http://localhost:8085/'
//}))

socket可以与vuex结合使用

import store from './store'

Vue.use(VueSocketio,socketio('http://socketserver.com:1923'), store);

服务端配置 

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

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

四、引入组件中使用

<script>
    export default{
        data(){
            id: ''
        },
        mounted(){
            this.$socket.emit('login', loginId);       //触发socket连接
        },
        sockets:{
            connect(){
                this.id = this.$socket.id;
                this.$socket.emit('login',loginId);    //监听connect事件
            };
            message(data){  //监听message事件，方法是后台定义和提供的
                console.log(data);
            }        
        },
        methods:{
            clickButton(val){  //添加按钮事件向服务端发送数据
                this.$socket.emit('emit_method', val);
            }
        }
        
    }
</script>

或者：

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;
}