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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

一、背景

1. 前端使用vue + vuex + socket.io-client

npm install socket.io-client --save-dev

2. 后端使用node + express + socketio

1.搭建node开发环境

npm init -y

安装所需依赖

npm install express --save-dev
npm install socket.io-client --save-dev

二、 socket.io相关用法概览

1. 发送事件

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

2. 监听事件

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

3. 广播事件

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

三、开发流程

1. 前端新建一个socket.js文件，用于接收socket相关事件，具体如下

// 引入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')
})

2. 后端部分相关代码

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('后端服务器启动成功！！！')
})

四、发布上线

1.前端：

1）安装http-server，然后链接服务器，进入服务器后拉取远程仓库的前端代码（一般在服务器www目录下拉取），如果没有克隆过代码，需要在服务器配置公钥，才能进行下载

公钥配置

ssh-keygen -t rsa -C "你的邮箱"

生成公钥后，进入公钥生成的文件目录，复制到代码托管平台，添加公钥后就可以克隆代码咯

2）打包前端代码，生成dist文件

npm run build

3）进入dist，执行命令，即可启动前端

pm2 start http-server -- -p 指定端口号

4）前端访问，服务器地址+端口号

2.后端：

1）和前端一样（不用安装http-server），进入服务器后拉取远程仓库的前端代码（一般在服务器www目录下拉取），如果没有克隆过代码，需要在服务器配置公钥，才能进行下载
2）执行命令

pm2 start index.js(文件入口，如果你的是app.js为文件入口,就执行app.js) -- -p 指定端口号

注意点：

socket.io在发布线上的时候前端得修改socket.io代理地址端口为后端端口，否则会报404，修改位置如下（这里我的后端端口为3000）

2. nginx需要修改socket.io的代理转发地址，否则也会报404

补充 1.pm2 常用指令

pm2 list // 查看pm2启动列表
pm2 stop 指定端口号 // 停止当前端口下的pm2
pm2 restart 指定端口号 // 重启指定端口的pm2
pm2 delete 指定端口号 // 删除当前窗口下的pm2
pm2 start http-server / index.js -- -p 指定端口号 // 启动对应的前后端

2. nginx在命令行中的相关指令