vue-koa框架下的socket组播

---

前言

最近项目涉及到小组协作，需要及时同步用户更改，这种情况下http协议只能使用轮询机制，消耗大量资源，因此尝试使用WebSocket。同时如果采用广播的话，每个用户的每一个操作都会被广播到所有用户的客户端，随着用户的增加，消息数几乎呈指数增长，安全性也得不到保障。
因此最后决定使用WebSocket组播。

---

一、WebSocket是什么？

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 连接本质上就是一个 TCP 连接，允许服务端主动向客户端推送数据。在 WebSocket 中，浏览器和服务器只需要通过http协议完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输直到有一方主动的关闭了该连接。

Socket.IO

这里引用官方说明
Socket.IO是一个库，可以在浏览器和服务器之间实现实时、双向和基于事件的通信。它由以下两个部分组成：

• 一个Node.js服务器端
• 一个运行在浏览器上的Javascript客户端（也可以用Node.js运行）

Vue-Socket.io

Vue-Socket.io是为Vuejs集成的Socket.io，易于使用，支持Vuex和组件级Socket客户管理

二、使用步骤

1.后端引入

npm install socket.io

在app.js中引入：

const app = require('koa')();
const server = require('http').createServer(app.callback());
const io = require('socket.io')(server);

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

server.listen(3001);

• io.on后面的内容下面会进行介绍。
• 这里是koa的写法，与Express有些不同，是app.callback()，而非app
• 监听了3001端口，需要注意的是，即使你原本的项目已经监听了某一端口，也需要再单开一个端口，即一个项目监听两个端口，否则会遇到客户端持续发请求，但socket连不上的情况。
• 使用的静态地址

2.前端引入

npm install vue-socket.io --save

在main.js引入：

import VueSocketIO from