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

一、背景

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在命令行中的相关指令

cd /nginx指定目录
cat nginx.conf // 查看nginx文件内容
vim nginx.conf // 编辑nginix，注意进入后使用 "i"进行编辑模式；"u"撤销上一步编辑；"esc"退出编辑模式；"shift + :"保存并退出

至此，按照上述步骤，就可以进行socket相关的任何类型开发拉，快去试试吧，有问题的小伙伴记得留言哦_

到此这篇关于vue+node+socketio实现多人互动并发布上线全流程的文章就介绍到这了,更多相关vue socketio实现多人互动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！