vue+node+socket io实现多人互动并发布上线全流程

socket.emit('事件名', data => {
	// data为要传输的数据，可以为boolean, string, number, object等
})

socket.on('发送时的事件名', data => {
	// data发送事件传过来的数据
})

// 发送给其他用户 （不对本身发送）
socket.broadcast.emit('事件名',  data => {
	// data为要传输的数据，可以为boolean, string, number, object等
})

// 引入socket.io-client
import io from 'socket.io-client'

// 创建链接
const socket = io()

// 监听
socket.on('connect', () => {
  console.log('和服务器连接成功！！')
})

> =============中间部分用于监听后端发送的socket事件，例如：=====================
// 进入房间
socket.on('enter_room', (data) => {
  // 必要数据可存storage
  localStorage.setItem('counts', JSON.stringify(data))
  store.commit('setData', JSON.parse(localStorage.getItem('data')))
})

// 处理服务失去连接
socket.on('disconnect', () => {
  console.log('disconnect')
})

const app = require('express')()
const http = require('http').Server(app)
var io = require('socket.io')(http)

let onlineUsers = {}
let users = []
let onlineCounts = 0

io.on('connection', socket => {
	// 用户进入游戏
	socket.on('enter', (data) => 
		// 添加用户信息
		const sid = socket.id
		socket.name = data.name

		// 添加新用户
		if(!onlineUsers.hasOwnProperty(data.name)) {
			onlineUsers[data.name] = sid
			onlineCounts++
		}
		if (!users.length) {
			users.push({
				name: onlineUsers[sid]
			})
		}

		// 当前人数
		let clientsCount = io.sockets.server.engine.clientsCount

		// 发送用户列表给当前用户(对应前端监听enter_room部分代码)
		io.emit('enter_room', {
			role: data.role,
			users,
			onlineCounts
		})
		// 发送新进用户给其他用户 （不对本身发送）
		socket.broadcast.emit('user_enter', data.name)
	})
})

// 后端开启监听端口， 前端通过配置proxyTable处代理到后端服务器，即可进行前后端数据对接
http.listen(port, () => {
	console.log('后端服务器启动成功！！！')
})