一款偏向二次元风格主题的了聊天平台,环境基于使用Node.js、Mongodb、Socket.io和React编写,是一款很不错的聊天网页端源码。
夏柔刚看到安装文档感觉算简单的,但看到其他平台的搭建教程写的乱七八糟...还是我重新来写一篇吧。
功能
- 好友, 群组, 私聊, 群聊
- 文本, 图片, 代码, url等多种类型消息
- 贴吧表情, 滑稽表情, 搜索表情包
- 桌面通知, 声音提醒, 消息语音朗读
- 自定义桌面背景, 主题颜色, 文本颜色
- 查看在线用户, @功能
- 管理员
- 关小黑屋
- 撤回消息
- 给用户打标签
- 重置用户密码
- 查看用户 ip
目录结构
|-- [build] // webpack构建
|-- [client] // 客户端代码
|-- [config] // 配置
|-- [dist] // 打包输出目录
|-- [doc] // 文档
|-- [public] // 服务端静态资源
|-- [server] // 服务端代码
|-- [static] // 客户端静态资源
|-- [utils] // 工具方法
|-- .babelrc // babel配置
|-- .eslintignore // eslint忽略配置
|-- .eslintrc // eslint规则配置
|-- .gitignore // git忽略配置
|-- .nodemonrc // nodemon配置
|-- package-lock.json // npm
|-- package.json // npm
|-- yarn.lock // yarn
教程开始
群友说想要宝塔搭建这款源码,那就来宝塔吧!
先把宝塔安装好,进入软件管理安装: PM2管理器、MongoDB、Nginx
安装Fiora
#远程下载源码放入 /opt 文件夹
git clone https://github.com/yinxin630/fiora.git -b master /opt/fiora
#下载好后 cd 进入该页面
cd /opt/fiora
#安装依赖项目，这里不能用npm，需要用yarn来安装
#如果提示 not found, 先使用 yum npm install 然后再执行以下命令
npm i -g yarn
yarn
#构建
npm run build
#转移产物
npm run move-dist
#启动
npm start
运行后打开ip:9200，注册一个账号，然后可以看SSH客户端运行日志，获取自己的userId。得到如下图的输出：
上面图信息必须你先注册一下才有返回信息,后面的5ed5106b96864aa333a39e49则为你的userid。
如果ip:9200打不开的，可以检查下防火墙，CentOS系统可以使用以下命令：
#CentOS 6
iptables -I INPUT -p tcp --dport 9200 -j ACCEPT
service iptables save
service iptables restart
#CentOS 7
firewall-cmd --zone=public --add-port=9200/tcp --permanent
firewall-cmd --reload
# 记得宝塔也开放然后新建一个ssh窗口,输入
# userid 改成你的终端显示的userid ,如5ed5106b96864aa333a39e49
#例子: Administrator=5ed5106b96864aa333a39e49 Port=9200
Administrator=userid Port=9200
#新建fiora用户并授权
useradd -M fiora && usermod -L fiora
#依次输入,不要着急
chown -R fiora:fiora /opt/fiora
#先给node做个软连接，不然后面会启动失败
ln -sf $(which node) /usr/bin/node以下命令一起复制进SSH客户端运行
cat > /etc/systemd/system/fiora.service <<EOF
[Unit]
Description=fiora
After=network.target
Wants=network.target
[Service]
Type=simple
PIDFile=/var/run/fiora.pid
ExecStart=$(command -v npm) start
WorkingDirectory=/opt/fiora
Environment=NODE_ENV=production Administrator=$Administrator Port=$Port
User=fiora
Restart=on-failure
RestartSec=42s
[Install]
WantedBy=multi-user.target
EOF开始启动并设置开机自启：
systemctl start fiora
systemctl enable fiora其它系统，比如CentOS、Debian 7等系统，可以直接使用以下方法启动：
#管理员userId和运行端口自行修改
export Administrator=5ed5106b96864aa333a39e49 Port=9200
nohup npm start &现在登录你的 ip:9200 , 你会发现多出一个管理员的图标(皇冠) 则为搭建成功
用域名访问:
进入宝塔 - 添加网站 - 添加域名 - 保存 - 点开域名 - 反代理配置 - 如图:
保存即可。
侧边栏可以在网站根目录/opt/fiora/public/js/app.a0d840f0.js 修改
其他小知识:
- 如反复提示接口调用失败,你正处于萌新限制期... 则为24小时内新注册用户才提示
- 如频繁发消息被限制,请每次发信息 4~5秒/1条,切勿刷新
- 如上面的管理员图标调用未显示,确定按照本教程来执行,那么就是缓存,等待半小时或稍等片刻重新更换浏览器刷新登录即可。
本地运行(开发模式)
- 克隆项目到本地
git clone https://github.com/yinxin630/fiora.git -b master - 安装项目依赖, 强推荐使用 yarn 安装, 执行
yarn. 也可以使用npm安装, 执行npm i, 但是不能保证所安装的依赖版本一致, 可能会导致运行不起来 - 根据所需修改配置, 使用默认配置也是可以的, 详情请参考 项目配置
- 启动服务端
npm run server - 启动客户端
npm run client - 使用浏览器打开
http://localhost:8080
修改代码会自动重启服务端和刷新客户端
服务器上运行
- 参考 本地运行第1步
- 参考 本地运行第2步
- 参考 本地运行第3步
- 构建静态客户端
npm run build - 将客户端构建产物移到服务端静态资源目录
npm run move-dist - 启动服务端
npm start - 使用浏览器打开
http://[服务端ip]:[fiora端口号]
在服务器上部署时, 强烈推荐配置七牛CDN, 详情请参考 七牛CDN配置
docker运行
首先安装docker https://docs.docker.com/install/
直接从 DockerHub 镜像运行
- 拉取 mongo 镜像
docker pull mongo - 拉取 fiora 镜像
docker pull suisuijiang/fiora - 创建虚拟网络
docker network create fiora-network - 启动数据库
docker run --name fioradb -p 27017:27017 --network fiora-network mongo - 启动fiora
docker run --name fiora -p 9200:9200 --network fiora-network -e Database=mongodb://fioradb:27017/fiora suisuijiang/fiora
本地构建镜像运行
- 克隆项目到本地
git clone https://github.com/yinxin630/fiora.git -b master - 构建镜像
docker-compose build --no-cache --force-rm - 运行
docker-compose up
项目配置
配置列表
- 服务器配置
config/server.ts - 客户端配置
config/client.ts - 客户端构建配置
config/webpack.ts
通过配置文件修改配置
可以直接编辑配置文件, 修改相应配置值
因为修改了文件内容, 后续拉新代码可能会产生冲突
通过命令行参数修改配置
- 直接运行时
./node_modules/.bin/ts-node server/main.ts --xxx "yyy" - 通过 npm 运行时
npm start -- --xxx "yyy" - 通过 pm2 运行时
pm2 start npm -- start --xxx "yyy"
xxx 是配置名, yyy 是要配置的值, 配置名可以去配置文件中查看
推荐使用该方法修改配置
通过环境变量修改配置
- Linux 和 MaxOS系统
export XXX="yyy" && ./node_modules/.bin/ts-node server/main.ts - Windows系统
SET "xxx=yyy" && ./node_modules/.bin/ts-node server/main.ts
七牛CDN配置
在没有配置七牛CDN的情况下, 客户端资源和用户上传/下载图片都是消耗服务器带宽的, 并发流量较大, 服务器容易扛不住, 所以强烈推荐使用七牛CDN
其它的CDN运营商没做支持, 欢迎PR
- 注册七牛账号, 创建存储空间 https://developer.qiniu.com/kodo/manual/1233/console-quickstart#step1
- 获取空间名称和外网url
- 获取密钥, 鼠标移到右上角个人头像, 点击"密钥管理", 获取 AccessKey 和 SecretKey
构建客户端上传到七牛
- 下载并安装七牛命令行工具 https://developer.qiniu.com/kodo/tools/1302/qshell, 将其重命名为
qshell并添加到环境变量 - 登录到七牛
qshell account AccessKey SecretKey name - 在 fiora 目录下创建
.qiniurc配置文件, 内容如下所示:
{
"src_dir" : "./dist",
"bucket" : "七牛空间名称",
"overwrite": true,
"rescan_local": true
}
- 构建客户端, 传递七牛外网 url 作为 publicPath
npm run build -- --publicPath "http://示例地址/fiora/" - 上传构建结构到 CDN
qshell qupload .qiniurc - 更新客户端 index.html
npm run move-dist, 如果是本地构建上传CDN的, 请手动更新 index.html 到服务器上 fiora public 目录下
每次更新客户端代码后, 重复4~6步
更新服务端七牛配置
- 修改
config/server.ts里的配置项:qiniuAccessKey/qiniuSecretKey/qiniuBucket/qiniuUrlPrefix
注意 qiniuUrlPrefix 配置值要以斜线/结尾, 例如:http://示例地址/ - 修改
config/webpack.ts里的配置项:build.assetsPublicPath, 与构建客户端时的publicPath值相同 - 重启服务端
pm2 远程部署/更新
- 在服务端和客户端分别安装pm2
yarn global add pm2 - 在服务端建立目录存放项目, 例如
mkdir -p ~/fiora - 将项目拉取到目录下的 source 文件夹
git clone -b master git@github.com:yinxin630/fiora.git ~/fiora/source - 创建 pm2 ecosystem 配置文件
cp ecosystem.config.js.example ecosystem.config.js - 修改配置文件内容
- 首次部署或更新
./deploy.sh
详情请参考 http://pm2.keymetrics.io/docs/usage/deployment/
FAQ
设置管理员
- 获取用户id, 注意不是 username, 是 mongoDB 数据库中的 _id
- 修改
config/server.ts中的administrator字段, 改为上一步获取的id - 重启服务器
修改默认群组名称
- 修改
config/server.ts中的defaultGroupName字段 - 重启服务器
自定义域名, 通过nginx反向代理
请修改注释项的配置
示例配置
server {
listen 80;
# 修改为你的域名
server_name fiora.suisuijiang.com;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header X-NginX-Proxy true;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;
proxy_pass http://localhost:9200;
}
}
配置 HTTPS + HTTP 2.0
server {
listen 80;
# 修改为你的域名
server_name fiora.suisuijiang.com;
return 301 https://fiora.suisuijiang.com$request_uri;
}
server {
listen 443 ssl http2;
# 修改为你的域名
server_name fiora.suisuijiang.com;
ssl on;
# 修改为你的ssl证书位置
ssl_certificate ./ssl/fiora.suisuijiang.com.crt;
ssl_certificate_key ./ssl/fiora.suisuijiang.com.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header X-NginX-Proxy true;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;
proxy_pass http://localhost:9200;
}
}
禁止注册, 手动分配账号
修改 config/server.ts, 将 disableRegister 选项设置为 true, 重启服务器生效
在服务端执行 npx ts-node bin/register.ts --username [新用户名] --password [用户密码] 注册新用户
