les chat

Leschat！ |实时Messenger | pern-graphql

使用Pern + GraphQl制造的实时聊天应用 - 功能私有，全局和组消息传递

演示

部署在Netlify（前端）和Heroku（后端）

使用

前端

• ReactJS-前端框架
• Apollo客户端 - 州管理库，用于使用GraphQl管理本地和远程数据
• Apollo订阅 - 从您的GraphQL Server获取实时更新
• 上下文api w/钩子 - 用于用户状态，选定的聊天，吐司notifs，主题等。
• React路由器 - 用于一般路由和导航
• React Hook形式 - 适用于柔性形式
• 材料-UI，带很多CSS自定义-UI库
• 是的 - 用于表单验证
• date -fns-用于操纵和格式日期

后端

• node.js- JS的运行时环境
• Apollo服务器 - 构建一个自我记录的GraphQl API服务器
• Apollo订阅 - 订阅是观察从阿波罗服务器发出的事件的GraphQL操作。
• PostgreSQL-打开源SQL数据库以存储数据
• 续集-Nodejs orm，用于基于SQL的数据库
• JSON Web令牌 - 安全/验证HTTP请求的标准
• bcrypt.js-用于哈希密码
• dotenv-从.env文件加载环境变量

特征

• 身份验证（登录/注册w/用户名和密码）
• 使用网络插座实时聊天
• 与所有注册用户的私人消息传递
• 全用户聊天的全球频道
• 与选择用户的组创建组
• 添加后，用户可以从组离开
• 小组创建者可以从组中添加/删除成员
• 小组创建者可以删除组，以及其消息以及它的消息
• 小组创建者可以重命名该小组的名字
• 具有描述性消息的错误管理
• 动作的吐司通知：创建组，删除用户等。
• 为相关的提取过程加载旋转器
• 格式化的日期，用于添加/更新问题/答案/评论
• 暗模式切换带本地存储保存
• 所有屏幕的适当响应UI

屏幕截图

桌面/平板电脑

移动的

用法

env变量：

在服务器目录中创建.ENV文件，并添加以下内容：

 PORT = 4000
JWT_SECRET = "Your JWT secret"

客户：

打开client/src/backendurls.js＆将“ backendurls”对象更改为：

 {
  http: "http://localhost:4000",
  ws: "ws://localhost:4000/graphql"
}

运行客户开发服务器：

 cd client
npm install
npm start

服务器：

打开服务器/config/config.json＆更新开发密钥的值，以匹配您的本地PostgreSQL凭据。

如果还没有，请安装“ semelize-cli”和“ nodemon”作为全局软件包。

运行此命令将SQL表迁移到您自己的本地PSQL： sequelize db:migrate

运行后端开发服务器：

 cd server
npm install
npm run dev