使用 vue-3-socket.io 插件以及node.js实现实时聊天(3)

这一章将为你讲述一些在服务器(以宝塔面板举例)上配置node项目和一些细节,让你在生产环境也能正常使用聊天功能

部署node项目

以宝塔面板为例,找到软件商店,查找PM2管理器,并且安装(有一些宝塔是自带的)

安装PM2

使用 vue-3-socket.io 插件以及node.js实现实时聊天(3)_第1张图片

使用 vue-3-socket.io 插件以及node.js实现实时聊天(3)_第2张图片

切换对应的node版本

双击打开,在node版本中切换你项目对应的node版本;如果不知道可以打开cmd面板,输入命令 node -v 查看版本,如果没有对应的,找到接近的切换安装即可;

使用 vue-3-socket.io 插件以及node.js实现实时聊天(3)_第3张图片

上传项目文件

接下来在服务器中找到一个文件夹存放你的node项目,只需要上传除了依赖包之外的文件或文件夹,依赖包我们通过pm2安装(内置npm)

使用 vue-3-socket.io 插件以及node.js实现实时聊天(3)_第4张图片

添加项目

在pm2管理中,点击添加项目,一般启动文件是 index.js 或是 main.js ,选择你的启动文件,和对应的运行目录(项目文件),项目名称你自己定义;之后就直接提交,完成初步部署

使用 vue-3-socket.io 插件以及node.js实现实时聊天(3)_第5张图片

使用 vue-3-socket.io 插件以及node.js实现实时聊天(3)_第6张图片

安装依赖

还是在pm2管理中,打开你刚添加项目的模块管理,一键安装项目依赖(PM2就是那么好用)

使用 vue-3-socket.io 插件以及node.js实现实时聊天(3)_第7张图片

调整端口

在开发环境中,我们在服务端自定义了一个端口,在客户端去监听对应的端口,所以在服务器中我们要设置好对应的端口并且放行。

使用 vue-3-socket.io 插件以及node.js实现实时聊天(3)_第8张图片

一般设置好监听的端口后宝塔会自动放行该端口,如果没有可以自己手动放行

使用 vue-3-socket.io 插件以及node.js实现实时聊天(3)_第9张图片

代码调整

最后我们要将服务端和客户端的代码进行调整

将服务端的的 origin 改成你的服务器ip地址加端口

客户端的也同样进行修改

使用 vue-3-socket.io 插件以及node.js实现实时聊天(3)_第10张图片

使用 vue-3-socket.io 插件以及node.js实现实时聊天(3)_第11张图片

通过映射添加域名

你的项目可能需要使用 https 的网络请求,或者通过域名,只需要在 pm2 中使用映射去添加域名即可

使用 vue-3-socket.io 插件以及node.js实现实时聊天(3)_第12张图片

添加完成后可以在 php 项目中查看,pm2 已经为你添加了对应的站点,后续会继续在本专栏更新如何实现聊天室功能的文章。

至此,本章的内容大致结束,按照以上步骤,你的项目应该可以在生产环境中正常运行,只需要在线上环境中进行测试即可,这里因为有一些项目敏感信息,不便进行演示

这里是Matcha,坚持每天都输出文章&博客&观点,对本文章若有疑惑可以在评论区留言或者私聊我,我每天都会追踪最新消息和即使回复;目前我正在学习 three.js,后续会持续更新相关博客,期待你的点赞和关注。

你可能感兴趣的:(前端项目经验,socket.io,实时聊天,vue.js,node.js,前端,javascript,前端框架,1024程序员节)