前言

fiora聊天室是基于node.js和react由碎碎酱独自开发的开源网页聊天室,一个二次元风格的哦~非常好看不过维护不太频繁,用着还行,推荐可以建一个来玩玩。使用socket.io模块WebSocket协议通讯,支持Service Worker和PWA.功能丰富,并且简单易上手,很适合作为学习node.js的参考项目,node.js初学者的福音。

截图

Fiora(1).png

Fiora(2).png

功能

  • 好友,群组,私聊,群聊
  • 文本,图片,代码,url等多种类型消息
  • 贴吧表情,滑稽表情,搜索表情包
  • 桌面通知,声音提醒,语音播报
  • 自定义桌面背景,主题颜色,文本颜色
  • 查看在线用户,@功能
  • 小黑屋禁言

项目地址https://github.com/yinxin630/fiora

文档https://yinxin630.github.io/fiora/zh-Hans/

体验https://fiora.suisuijiang.com/

说明:512M内存vps可能还需要先加一点虚拟内存,不然构建过程会失败,可以使用Swap一键脚本→传送门
查看内存/虚拟内存命令:free -m

宝塔安装Fiora

  1. 自己安装好宝塔,基于宝塔的。如果你不想用宝塔可以看看 这个文章(推荐CentOS 7.6或者ubuntu,其他的也可以我用的是ubuntu,安装部分没啥区别。装好nginx,这个不用我多说了罢)
  2. 在 软件商店 安装好PM2管理器、MongoDB、Redis,这三个应用千万别忘了,不然后面运行错误。
  3. 如有外部安全防火墙 请预先开放9200端口,宝塔开启9200端口,聊天室默认开放在9200端口上,后面可以改端口,注意本教程需要你服务器是有公网ip的,不然就是建到本地了
  4. ssh连接服务器。
  5. 先测试下环境是否正常 没有的退出重新连接SSH,输入下面命令查看版本,需要提前安装好node和npm

node -v
(大于等于v16.13.1)
npm -v
(大于等于8.1.2)

  1. 拉取源码并存放于你的目标文件夹,先进到一个空文件夹,然后输入下面命令拉取
    我这里全程拿ssh操作的,你也可以直接去github下载项目,都行

    git clone https://github.com/yinxin630/fiora.git -b master
  2. 进入刚刚拉取的fiora文件夹

    cd /目标文件夹路径/fiora/
  3. 安装依赖,用yarn来安装

    yarn install
    yarn

    (我也不知道为什么有这一步,但是看文档确实必须有这一步,别问为什么,问就是试了几十次试出来的?)

  4. 构建

    yarn build:web
  5. 配置 JwtSecret 请将 * 替换为一个秘密文本(可以随便写一个文本或者数字)

    echo "JwtSecret=***" > .env
  6. 启动

    yarn start
  7. 注册用户+设置管理员

注意这里不要关闭ssh界面,打开 http://你服务器ip:9200 注册第一个用户: admin(也可以是你喜欢的名字,端口不喜欢的话也可以去配置文件里面改,这里我就懒得写教程了,因为后面有反向代理会直接把9200重定向到80端口+域名上,直接就不需要端口了)
然后返回ssh看返回的日志内容,获取自己的userid
这里注册或登录的时候返回的信息,后面的5d329dd354b9则为自己的userid,请先复制或者记住这个userid
<-- getLinkmansLastMessages mYNheu93jds7 5d329dd354b9

也可以通过这个获取用户userid 比如admin,不过可能有的服务器报错,推荐上面方法。
fiora getUserId admin

如果ip:9200打不开的,可以检查下宝塔的防火墙,或者云服务商后台,就比如我这里腾讯云后台有安全组,开放一下9200端口。
接下来再将自己的账号设置成管理员,先使用Ctrl+C断开运行。
进去fiora的文件夹,进入.env文件,没有的话自己建一个,另起一行输入,运行端口可以自行修改,也可以不改。

Administrator=userid

把userid换成上面复制的userid
比如:

Administrator=5d329dd354b9
Port=9200

再次启动fiora
yarn start

此时就可以访问ip:9200,运行端口以你设置的为准,这时候你登陆的时候,会发现左侧多了个管理员图标。

配置宝塔PM2,fiora后台自动启动

没问题使用Ctrl+C断开运行,进入宝塔的应用商店,搜索PM2,配置宝塔PM2

启动文件填npm

运行目录填你fiora的文件路径

项目名称和其它看你自己需求了

这样就算重启服务器也会自己运行了

域名反代

如需要加证书,申请/更换ssl时需关闭域名反代。
宝塔面板里面,先点击左侧网站,添加站点,然后再点击添加好了的域名
网址 – 域名 – 设置- 反向代理 – 增加反向代理
目标URL http://127.0.0.1:9200
发送域名 填你反代的域名(就是你要使用的那个域名)

打开你的域名,就可以看到Fiora在运行了。
其它的设置事项,请参考官方说明。

缓存问题

缓存问题 如修改后 ip:9200 访问正常 域名访问还是旧文件

暂停域名反代

关闭 反向代理的 开启缓存

删除反向代理–>配置文件里 expires 12h;

清空 /www/server/nginx/proxy_cache_dir/夹里文件

清空 /www/server/nginx/proxy_temp_dir/ 夹里文件

如有cdn 也需要清除cdn缓存

开启域名反代

强制刷新/清空浏览器缓存/换个浏览器 重新访问

DIY

需在聊天室关闭的情况下修改 修改完需重构,如果不需要修改,那么请忽略这里,修改不好报错概率非常大,然后会导致你无法正常运行。

侧边: / 目标文件夹路径 /fiora/packages/web/src/modules/Sidebar/ (这个夹里都是有关侧边的,主要文件是Sidebar.tsx)

主页: / 目标文件夹路径 /fiora/packages/web/src/template.html

图标: / 目标文件夹路径 /fiora/packages/server/public/(这个夹里三个带logo图片就是了)

修改好后

进入: cd / 目标文件夹路径 /fiora/

重构: yarn build:web

启动: yarn start

浏览器Ctrl+F5强制刷新聊天室 检查修改是否成功 有问题 使用Ctrl+C断开运行 重新修改完再次 重构 启动 待所有没问题后

使用Ctrl+C再次断开运行用,使用宝塔PM2后台重启运行就可以了

侧边栏样式:修改/ 目标文件夹路径 /fiora/public/js/app.*.js三个文件

Fiora 部分目录构成

|-- [.githubb] // github actions
|-- [.vscode] // vscode 工作区配置
|-- [packages] // 所有源代码的存储目录
|------ [app] // App 源代码
|---------- [src] // App 源代码
|-------------- [pages] // App 前端UI
|---------- [app.json] // 打包 App 基本信息
|---------- [src] // App 源代码
|------ [assets] // 静态资源
|------ [config] // Fiora 配置文件夹
|---------- [client.ts] // 客户端配置
|---------- [server.ts] // 服务端配置
|------ [database] // 数据库方法,一般情况勿动
|------ [server] // 构建完成后存放的Web
|------ [utils] // utils
|------ [web] // Web 源代码
|---------- [src] // Web 源代码
|-------------- [modules] // Web 前端UI
|-- .eslintignore // eslint 忽略
|-- .eslintrc // eslint 配置
|-- .gitignore // git 忽略
|-- Dockerfile // docker 文件
|-- LICENSE // fiora 许可
|-- docker-compose.yaml // docker compose 配置
|-- package.json // npm
|-- tsconfig.json // typescript 配置
|-- yarn.lock // yarn

最后修改:2023 年 11 月 06 日
如果觉得我的文章对你有用,请随意赞赏