Fiora搭建详细教程之网页app双端聊天源码

Fiora搭建详细教程之网页app双端聊天源码

一款偏向二次元风格主题的了聊天平台,环境基于使用Node.jsMongodbSocket.ioReact编写,是一款很不错的聊天网页端源码。

夏柔刚看到安装文档感觉算简单的,但看到其他平台的搭建教程写的乱七八糟…还是我重新来写一篇吧。

功能

  1. 好友, 群组, 私聊, 群聊
  2. 文本, 图片, 代码, url等多种类型消息
  3. 贴吧表情, 滑稽表情, 搜索表情包
  4. 桌面通知, 声音提醒, 消息语音朗读
  5. 自定义桌面背景, 主题颜色, 文本颜色
  6. 查看在线用户, @功能
  7. 管理员
    • 关小黑屋
    • 撤回消息
    • 给用户打标签
    • 重置用户密码
    • 查看用户 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
Fiora搭建详细教程之网页app双端聊天源码-WordPress极简博客
聊天页面
Fiora搭建详细教程之网页app双端聊天源码-WordPress极简博客
设置

教程开始

群友说想要宝塔搭建这款源码,那就来宝塔吧!

先把宝塔安装好,进入软件管理安装: 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。得到如下图的输出:

Fiora搭建详细教程之网页app双端聊天源码-WordPress极简博客
新用户注册后提示的

上面图信息必须你先注册一下才有返回信息,后面的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 , 你会发现多出一个管理员的图标(皇冠) 则为搭建成功

用域名访问:

进入宝塔 – 添加网站 – 添加域名 – 保存 – 点开域名 – 反代理配置 – 如图:

Fiora搭建详细教程之网页app双端聊天源码-WordPress极简博客
反代理配置

保存即可。

侧边栏可以在网站根目录/opt/fiora/public/js/app.a0d840f0.js 修改

其他小知识:

  • 如反复提示接口调用失败,你正处于萌新限制期… 则为24小时内新注册用户才提示
  • 如频繁发消息被限制,请每次发信息 4~5秒/1条,切勿刷新
  • 如上面的管理员图标调用未显示,确定按照本教程来执行,那么就是缓存,等待半小时或稍等片刻重新更换浏览器刷新登录即可。
Fiora搭建详细教程之网页app双端聊天源码-WordPress极简博客

本地运行(开发模式)

  1. 克隆项目到本地 git clone https://github.com/yinxin630/fiora.git -b master
  2. 安装项目依赖, 强推荐使用 yarn 安装, 执行 yarn. 也可以使用 npm 安装, 执行 npm i, 但是不能保证所安装的依赖版本一致, 可能会导致运行不起来
  3. 根据所需修改配置, 使用默认配置也是可以的, 详情请参考 项目配置
  4. 启动服务端 npm run server
  5. 启动客户端 npm run client
  6. 使用浏览器打开 http://localhost:8080

修改代码会自动重启服务端和刷新客户端

服务器上运行

  1. 参考 本地运行第1步
  2. 参考 本地运行第2步
  3. 参考 本地运行第3步
  4. 构建静态客户端 npm run build
  5. 将客户端构建产物移到服务端静态资源目录 npm run move-dist
  6. 启动服务端 npm start
  7. 使用浏览器打开 http://[服务端ip]:[fiora端口号]

在服务器上部署时, 强烈推荐配置七牛CDN, 详情请参考 七牛CDN配置

docker运行

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

直接从 DockerHub 镜像运行

  1. 拉取 mongo 镜像 docker pull mongo
  2. 拉取 fiora 镜像 docker pull suisuijiang/fiora
  3. 创建虚拟网络 docker network create fiora-network
  4. 启动数据库 docker run --name fioradb -p 27017:27017 --network fiora-network mongo
  5. 启动fiora docker run --name fiora -p 9200:9200 --network fiora-network -e Database=mongodb://fioradb:27017/fiora 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

项目配置

配置列表

  • 服务器配置 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

  1. 注册七牛账号, 创建存储空间 https://developer.qiniu.com/kodo/manual/1233/console-quickstart#step1
  2. 获取空间名称和外网url
  3. 获取密钥, 鼠标移到右上角个人头像, 点击”密钥管理”, 获取 AccessKey 和 SecretKey

构建客户端上传到七牛

  1. 下载并安装七牛命令行工具 https://developer.qiniu.com/kodo/tools/1302/qshell, 将其重命名为 qshell 并添加到环境变量
  2. 登录到七牛 qshell account AccessKey SecretKey name
  3. 在 fiora 目录下创建 .qiniurc 配置文件, 内容如下所示:
{
“src_dir” : “./dist”,
“bucket” : “七牛空间名称”,
“overwrite”: true,
“rescan_local”: true
}
  1. 构建客户端, 传递七牛外网 url 作为 publicPath npm run build -- --publicPath "http://示例地址/fiora/"
  2. 上传构建结构到 CDN qshell qupload .qiniurc
  3. 更新客户端 index.html npm run move-dist, 如果是本地构建上传CDN的, 请手动更新 index.html 到服务器上 fiora public 目录下

每次更新客户端代码后, 重复4~6步

更新服务端七牛配置

  1. 修改 config/server.ts 里的配置项: qiniuAccessKey / qiniuSecretKey / qiniuBucket / qiniuUrlPrefix
    注意 qiniuUrlPrefix 配置值要以斜线/结尾, 例如: http://示例地址/
  2. 修改 config/webpack.ts里的配置项: build.assetsPublicPath, 与构建客户端时的 publicPath 值相同
  3. 重启服务端

pm2 远程部署/更新

  1. 在服务端和客户端分别安装pm2 yarn global add pm2
  2. 在服务端建立目录存放项目, 例如 mkdir -p ~/fiora
  3. 将项目拉取到目录下的 source 文件夹 git clone -b master git@github.com:yinxin630/fiora.git ~/fiora/source
  4. 创建 pm2 ecosystem 配置文件 cp ecosystem.config.js.example ecosystem.config.js
  5. 修改配置文件内容
  6. 首次部署或更新 ./deploy.sh

详情请参考 http://pm2.keymetrics.io/docs/usage/deployment/

FAQ

设置管理员

  1. 获取用户id, 注意不是 username, 是 mongoDB 数据库中的 _id
    • 可以查询数据库获取
    • 还可以看服务端接口日志获取, 需要登录态的接口都会打印用户id
  2. 修改 config/server.ts 中的 administrator 字段, 改为上一步获取的id
  3. 重启服务器

修改默认群组名称

  1. 修改 config/server.ts 中的 defaultGroupName 字段
  2. 重启服务器

自定义域名, 通过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 [用户密码] 注册新用户

来自骚老板的网站

1.本文部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。 2.若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。 3.如果本站有侵犯、不妥之处的资源,请在网站最下方联系我们。将会第一时间解决! 4.本站所有内容均由互联网收集整理、网友上传,仅供大家参考、学习,不存在任何商业目的与商业用途。 5.本站提供的所有资源仅供参考学习使用,版权归原著所有,禁止下载本站资源参与商业和非法行为,请在24小时之内自行删除!
舜云资源 » Fiora搭建详细教程之网页app双端聊天源码

发表评论

发表评论

提供最优质的资源集合

立即查看 了解详情