前言

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

最后修改：2024 年 03 月 13 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏