一款二次元的Web多人在线网络聊天系统：Fiora安装及使用

介绍

fiora聊天室是基于node.js和react由碎碎酱独自开发的开源网页聊天室,使用socket.io模块WebSocket协议通讯,支持Service Worker和PWA.功能丰富,并且简单易上手,很适合作为学习node.js的参考项目,node.js初学者的福音。

项目地址:

https://github.com/yinxin630/fiora

文档：

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

搭建

1、服务器安装好宝塔（至少CentOS 7.6 装好nginx）

2、在 软件商店 安装好

1. node.js版本管理器 (设置里安装 Node版本: v14)
2. MongoDB
3. Redis

3、宝塔开启9200​端口。

4、ssh连接服务器并检查环境是否搭建好

依次输入以下代码：

node -v
npm -v

若没有返回版本，则进行修复node.js：

进入软件商店，找到Node.js版本管理器​，点击修复。

如果修复后仍然不行，切换版本重试，直到返回版本为止。

5、拉取源码并存放于/opt文件夹，如果没有git请输入以下内容：

yum -y install git

git clone https://github.com/yinxin630/fiora.git -b master /opt/fiora/

6、进入fiora文件夹中

也可以到终端输入：

cd /opt/fiora/

7、安装依赖，用yarn来安装 没有yarn的请输入：

npm install -g yarn
yarn install

8、构建

yarn build:web

9、配置 JwtSecret 请将*** 替换为一个秘密文本

echo "JwtSecret=******" > .env

10、启动

yarn start

11、注册用户

打开 http://服务器ip:9200​，注册第一个用户: admin​

12、接下来配置管理员，先使用Ctrl+C​断开运行。

13、获取用户userid 比如admin

fiora getUserId admin

有的无法使用fiora指令，则在终端中，查看日志，不要及时断开，查看注册的用户，即可找到userid。

例如

@fiora/server: [2024-04-01T15:19:19.079] [INFO] default - [register] 217 HxnTB446P58n5tMBAAAG 660ad077a12467ce84ff33b6 null
这个660ad077a12467ce84ff33b6 就是userid

14、设置管理员 宝塔打开 /opt/fiora/.env 文件，添加下列一行：（userid是上面取到的一连串文本，注意代换。）

Administrator=userid

15、再次启动fiora

yarn start

16、浏览器刷新，检查是否有管理权限了。没问题使用Ctrl+C断开运行 配置PM2在后台运行

pm2 start yarn --name fiora -- start

停止

pm2 stop fiora

17、刷新聊天室 教程完成！

进行站点反代

宝塔面板新建一个网站，php版本选择纯静态即可，然后点击反向代理，点击添加反向代理，名称随便填，目标URL填写http://ip:9200，末尾不要有斜线。发送域名保持$host即可，然后访问你的域名就可以正常使用了。

自定义

logo

/opt/fiora/public/favicon-96.png

/opt/fiora/public/favicon-192.png

/opt/fiora/public/favicon-512.png

(public目录为构建产物 重新构建会被覆盖)

index.html

/opt/fiora/client/templates/index.html

/opt/fiora/public/index.html

侧边

fiora目录下搜索Sidebar目录/或者直接找到以下地址

根目录/opt/fiora/packages/web/src/modules/Sidebar​

修改完成之后重新运行第四步的指令即可！！！

迁移

MongoDB数据库和 public下的文件迁移了就行。

以下为官方文档

脚本

fiora 内置了一个命令行工具, 用来管理服务器. 执行 fiora​ 查看工具

注意! 这些脚本大多会直接修改数据库, 推荐(但非必需)提前备份数据库并停止服务端后再执行

deleteMessages#

​fiora deleteMessages​

删除所有历史消息记录, 如果消息图片和文件是存储在服务器上, 也可以一并删除

deleteTodayRegisteredUsers#

​fiora deleteTodayRegisteredUsers​

删除当天(以服务器时间为准)新注册的所有用户

deleteUser#

​fiora deleteUser [userId]​

删除指定用户, 同时删除其历史消息, 退出其已加入的群组并删除其所有好友关系

doctor#

​fiora doctor​

检查服务端配置和状态, 可以用来定位服务端启动失败的原因

fixUsersAvatar#

​fiora fixUsersAvatar​

修复用户错误头像路径, 请根据你的实际情况修改脚本判断逻辑

getUserId#

​fiora getUserId [username]​

获取指定用户名的 userId

register#

​fiora register [username] [password]​

注册新用户, 当禁止注册时可以由管理员通过其注册新用户

updateDefaultGroupName#

​fiora updateDefaultGroupName [newName]​

更新默认群组名

配置

服务器配置 config/server.ts​ 客户端配置 config/client.ts​

相比于直接修改配置文件, 推荐用环境变量来修改配置
在 fiora 根目录创建 .env​ 文件, 在里面填写 key=value​ 键值对(每行一个), 即可修改相应配置. 比如修改端口号 Port=8888​

服务端配置#

修改服务端配置需要重启应用

Key	类型	默认值	描述
Host	string	your ip	服务端 host
Port	number	9200	服务端端口号
Database	string	mongodb://localhost/fiora	mongoDB 数据库地址
RedisHost	string	localhost	redis 地址主机名
RedisPort	number	6379	redis 端口
JwtSecret	string	jwtSecret (推荐修改它来保证安全性)	jwt token 加密 secret
MaxGroupCount	number	3	用户最大可以创建的群组个数
AllowOrigin	string	null	允许的客户端 origin 列表, null 时允许所有 origin 连接, 多个值逗号分割
tokenExpiresTime	number	2592000000 (30 天)	登陆 token 过期时间
Administrator	string	”	管理员用户 id 列表, 多个值逗号分割
DisableRegister	boolean	false	禁止注册账号
DisableCreateGroup	boolean	false	禁止创建群组
ALIYUN_OSS	boolean	false	启用阿里云 OSS
ACCESS_KEY_ID	string	”	阿里云 OSS access key id. 参考: https://help.aliyun.com/document_detail/48699.html
ACCESS_KEY_SECRET	string	”	阿里云 OSS access key secret. 参考和 ACCESS_KEY_ID 相同
ROLE_ARN	string	”	阿里云 OSS RoleARN. 参考: https://help.aliyun.com/document_detail/28649.html
REGION	string	”	阿里云 OSS 地域. 例如: oss-cn-zhangjiakou​
BUCKET	string	”	阿里云 OSS bucket 名称
ENDPOINT	string	”	阿里云 OSS 域名. 例如: cdn.suisuijiang.com​

客户端配置#

修改客户端配置需要重新构建客户端**

Key	类型	默认值	描述
Server	string	/	客户端要连接的服务端地址
MaxImageSize	number	3145728 (3MB)	客户端可以上传的最大图片大小
MaxBackgroundImageSize	number	5242880 (5MB)	客户端可以上传的最大背景图大小
MaxAvatarSize	number	1572864 (1.5MB)	客户端可以上传的最大头像图片大小
MaxFileSize	number	10485760 (10MB)	客户端可以上传的最大文件大小
DefaultTheme	string	cool	默认主题
Sound	string	default	默认通知音
TagColorMode	string	fixedColor	默认标签颜色模式
FrontendMonitorAppId	string	fixedColor	岳鹰监控 appId https://yueying.effirst.com/index
DisableDeleteMessage	boolean	false	禁止用户撤回消息

安装

环境准备#

要运行 Fiora, 你需要 Node.js(推荐 v14 LTS 版本), MongoDB 和 redis

• 安装 Node.js

  • 官网 http://nodejs.cn/download/

  • 更推荐使用 nvm 安装 Node.js

    • 安装 nvm https://github.com/nvm-sh/nvm#install–update-script
    • 通过 nvm 安装 Node.js https://github.com/nvm-sh/nvm#usage

• 安装 MongoDB

  • 官网 https://docs.mongodb.com/manual/installation/#install-mongodb

• 安装 redis

  • 官网 https://redis.io/topics/quickstart

推荐在 Linux 或者 MacOS 系统上运行

如何运行#

1. 克隆项目到本地 git clone https://github.com/yinxin630/fiora.git -b master​
2. 确保安装了 yarn, 如果没有安装请执行 npm install -g yarn​
3. 安装项目依赖 yarn install​
4. 构建客户端代码 yarn build:web​
5. 配置 JwtSecret echo "JwtSecret=<string>" > .env2​. 要将 <string>​ 替换为一个秘密文本
6. 启动服务端 yarn start​
7. 使用浏览器打开 http://[ip地址]:[端口]​(比如 http://127.0.0.1:9200​)

在后台运行#

使用 yarn start​ 运行服务端会在断开 ssh 连接后停止运行, 推荐使用 pm2 来运行

# 安装 pm2

npm install -g pm2

---

# 使用 pm2 运行 fiora

pm2 start **yarn –name fiora — start

---

# 查看 pm2 应用状态

pm2 ls

---

# 查看 pm2 fiora 日志

pm2 logs fiora

复制

运行开发模式#

1. 启动服务端 yarn dev:server​
2. 启动客户端 yarn dev:web​
3. 使用浏览器打开 http://localhost:8080​

docker 运行#

首先安装 docker https://docs.docker.com/install/

直接从 DockerHub 镜像运行#

# 拉取 mongo

docker pull mongo

---

# 拉取 redis

docker pull redis

---

# 拉取 fiora

docker pull suisuijiang/fiora

---

# 创建虚拟网络

docker network create fiora-network

---

# 启动 mongodB

docker run –name fioradb -p 27017​ :27017 –network fiora-network mongo

---

# 启动 redis

docker run –name fioraredis -p 6379​ :6379 –network fiora-network redis

---

# 启动 fiora

docker run –name fiora -p 9200​ :9200 –network fiora-network -e Database​ = mongodb://fioradb/fiora -e RedisHost=fioraredis suisuijiang/fiora**

复制

本地构建镜像运行#

1. 克隆项目到本地 git clone https://github.com/yinxin630/fiora.git -b master​
2. 构建镜像 docker-compose build --no-cache --force-rm​
3. 运行 docker-compose up​