导航：首页 > 开发技术 >

vue和node以及socket io如何实现多人互动并发布上线

发表于：2024-11-22 作者：千家信息网编辑

千家信息网最后更新 2024年11月22日，这篇文章给大家介绍vue和node以及socket io如何实现多人互动并发布上线，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。一、背景1. 前端使用vue + vuex + s

千家信息网最后更新 2024年11月22日vue和node以及socket io如何实现多人互动并发布上线

这篇文章给大家介绍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-clientimport 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 = 0io.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在命令行中的相关指令