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实现多人互动内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了Rstudio中安装package出现的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25