ghChat

แก่นสาร

ภาษาอังกฤษ | ภาษาจีนง่ายๆ

ghchat (เวอร์ชันตอบสนอง)

เหตุผลที่เรียกว่า Ghchat คือการคิดเกี่ยวกับการรวม GitHub ในอนาคตโดยหวังว่าจะทำให้เครื่องมือส่งข้อความโต้ตอบแบบทันทีนี้เป็นเครื่องมือแชทสำหรับ GitHub ขณะนี้รองรับการเข้าสู่ระบบที่ได้รับอนุญาตของ GitHub เท่านั้นและข้อมูลที่แสดงโดยผู้ใช้ GitHub จะปรากฏขึ้น จากนั้นคุณสามารถสร้างกลุ่มโครงการสำหรับโครงการ GitHub ของคุณใน GHCHAT จากนั้นโพสต์ลิงก์กลุ่มไปยัง ReadMe เพื่ออำนวยความสะดวกในการสื่อสารทันทีของโครงการ

ที่อยู่ออนไลน์แอปพลิเคชัน (รวมถึงลิงค์กลุ่มสำหรับโครงการ) รองรับการเข้าสู่ระบบการอนุญาต GitHub โดยตรง

หากการเข้าสู่ระบบของ GitHub ล้มเหลว

ดูวิธีการตั้งค่า

เป็นไปได้มากที่ GitHub ของคุณไม่ได้ตั้งอีเมลสาธารณะ

ขอแนะนำให้เปิดใช้งาน PWA

สแต็คเทคโนโลยี

Front-end React Family Bucket, PWA, back-end node.js (KOA2), รองรับแบ็คเอนด์และเขียน TS บางประเภท (ส่วนใหญ่ยังไม่ได้รับการเสริมด้วย t^t), ฐานข้อมูล MySQL, Socketio, JWT ฯลฯ ดูแพ็คเกจดูรายละเอียด นอกจากนี้ยังใช้ Nginx, SSL, PM2 ฯลฯ ในสภาพแวดล้อมการผลิต ยินดีต้อนรับสู่เข้าร่วมกลุ่ม GHCHAT เพื่อสื่อสาร ฉันออนไลน์ทุกวันและคุณสามารถคลิกเพื่อแชทกับฉันเป็นการส่วนตัว

ไดอะแกรมการแสดงผลโครงการโดยละเอียด

คลิกเพื่อดู

ความคืบหน้าในปัจจุบัน

คลิกเพื่อดู

• บัญชี

เข้าสู่ระบบ/ลงทะเบียน/เข้าสู่ระบบ/เข้าสู่ระบบด้วยอุปกรณ์หลายตัวในเวลาเดียวกัน

• การรวมเข้ากับ gitHub

สนับสนุนข้อมูลการล็อกอิน/การแสดงผล GitHub ที่เปิดเผยโดยผู้ใช้ GitHub

• UI

เค้าโครงที่ตอบสนองต่อการปรับให้เข้ากับเดสก์ท็อปและส่วนประกอบ UI ส่วนใหญ่ / ส่วนใหญ่จะเขียนด้วยตัวเอง

• แชทส่วนตัว

แชทส่วนตัว/เพิ่มผู้ติดต่อ/โปรไฟล์เพื่อนแสดง/ลบผู้ติดต่อ

• การแชทเป็นกลุ่ม

การแชทเป็นกลุ่ม/การเพิ่มข้อมูลกลุ่ม/กลุ่มแสดงข้อมูล/ข้อมูลกลุ่ม/ข้อมูลกลุ่ม/การแจ้งเตือนรายการใหม่ผู้มาใหม่

• สอบถาม

การค้นหาผู้ใช้ && การค้นหากลุ่ม: สนับสนุนการค้นหาฟัซซี่ front-end และการค้นหาฟัซซี่ back-end

• วิธีการแชทที่เข้มข้น

ส่งรูปภาพ/โพสต์นิพจน์/ส่งไฟล์/ดาวน์โหลดไฟล์/ป้อนคีย์ทางลัดเพื่อส่งข้อมูล/@ใครบางคน/รูปภาพดู/ส่งรูปภาพคัดลอก (เช่นภาพหน้าจอวางและรูปภาพโพสต์โดยตรง)/ตารางแชทหน้าจอแสดงผลตามคำสั่งลดลง/แบ่งปัน

• เคล็ดลับข่าวใหม่

เบราว์เซอร์การแจ้งเตือนเดสก์ท็อป/การตั้งค่าสวิตช์สำหรับข้อความแจ้งข้อความ/จำนวนของรายการข้อความที่ยังไม่ได้อ่าน/รีเฟรช | เปิดใหม่ | (บัญชีที่แตกต่างกัน) ไปยังหน้าล็อกใหม่จำนวนข้อความที่ยังไม่ได้อ่านในรายการจะยังคงปรากฏอย่างถูกต้อง

• การสร้างใหม่และการเพิ่มประสิทธิภาพอย่างต่อเนื่อง

GZIP การบีบอัด/subcontracted files/lazy chat content loading/routing on demand/interface request requency limit/กลไกการจัดการ WebSocket

• อื่น

หุ่นยนต์แชทแชทตอบ / ปรับใช้ใบรับรอง SSL / สนับสนุน PWA / สนับสนุนแบ็กเอนด์ TS

• สิ่งที่ต้องทำ

สนับสนุน Markdown/สนับสนุนการอ้างอิงเนื้อหาแชท/การห่อหุ้มแบ็กเอนด์ลงในซีดี SDK/Internationalization/CI

แผนภาพโครงสร้างโครงการ

คลิกเพื่อดู

 ├── LICENSE
├── README-zh_CN.md
├── README.md
├── package-lock.json
├── package.json
├── postcss.config.js
├── server // 后端代码
│   ├── ecosystem.config.js
│   ├── init // 初始化mysql数据库的脚本
│   ├── nodemon.json
│   ├── package-lock.json
│   ├── package.json
│   ├── secrets.ts // 放一些非公开的secret
│   ├── src
│     ├── app
│     ├── context
|     ├── controllers
|     ├── index.ts
|     ├── middlewares
|     ├── routes // 后端路由，跟登录注册模块有关
|     ├── server.ts
|     ├── services
|     ├── socket // 除了登录注册，其他都用socket 来通信
|     └── utils
|     ├── configs
|       ├── configs.common.ts // 后端通用配置
|       ├── configs.dev.ts // 后端开发配置
|       └── configs.prod.ts // 后端生产配置
    └── main.ts
│   ├── tsconfig.json
│   ├── tslint.json
│   └── webpack.config.js
├── src // 前端代码
│   ├── App.js
│   ├── app.scss
│   ├── assets
│   ├── components
│   ├── containers
│   ├── index.html
│   ├── index.js
│   ├── manifest.json // PWA需要
│   ├── modules
│   ├── redux
│   ├── router
│   ├── service-worker.js // PWA需要
│   └── utils
├── webpack.common.config.js  // 通用webpack设置
├── webpack.prod.config.js //生产相关的webpack配置
└── webpack.dev.config.js //开发相关的webpack配置

การพัฒนาท้องถิ่น

คลิกเพื่อดู

1. โครงการถูกดึงออกมาในพื้นที่

 git clone https://github.com/aermin/ghChat.git

2. ดาวน์โหลดแพ็คเกจ NPM front-end

 cd ghChat

 npm i

3. ดาวน์โหลดแพ็คเกจ NPM ในแบ็กเอนด์

 cd ghChat/server

 npm i

4. เริ่มต้นฐานข้อมูล

 //需要先在本地建一个名为ghchat的mysql数据库
数据库配置参考如下(ghChat/server/src/configs/configs.dev.ts) 的dbConnection

npm run init_sql    //然后查看下数据库是否init成功

PS: หากคุณต้องการใช้การอนุญาต GitHub เพื่อเข้าสู่ระบบส่งรูปภาพและไฟล์ (โดยใช้ Qiniu Cloud CDN) คุณต้องกรอกการกำหนดค่าที่สอดคล้องกันในไฟล์ (GHCHAT/SERVER/SRC/Configs/configs.dev.ts) มิฉะนั้นจะไม่ถูกใช้ตามค่าเริ่มต้น

5. เรียกใช้รหัสส่วนหน้าและส่วนหลัง

 npm run start

 cd ..      // 返回到ghChat/目录

 npm run start

ใช้ในสภาพแวดล้อมการผลิต

คลิกเพื่อดู

วิชาบังคับก่อน: สร้างไฟล์ secrets.ts ใน ghchat/ เซิร์ฟเวอร์/ โฟลเดอร์

 export default {
  port: '3000', // server 端口
  dbConnection: {
    host: '', // 数据库IP
    port: 3306, // 数据库端口
    database: 'ghchat', // 数据库名称
    user: '', // 数据库用户名
    password: '', // 数据库密码
  },
  client_secret: '', // github的client_secret
  jwt_secret: '', // jwt的secret
  qiniu: { // 七牛云cdn配置
    accessKey: '',
    secretKey: '',
    bucket: ''
  },
  robot_key: '', // 机器人聊天用到的key => 请自己申请 http://www.tuling123.com/
};

1. รหัสส่วนหน้าสร้าง

 cd src
npm run build:prod

2. รหัสแบ็กเอนด์สร้าง

 cd sever
npm run build:prod

3. วางโฟลเดอร์ (build, dist) ที่สร้างขึ้นตามขั้นตอนที่ 1 และ 2 บนเซิร์ฟเวอร์ของคุณเรียกใช้ไฟล์ dist/index.js (คุณสามารถคัดลอก ghchat/server/package.json ไปยังเซิร์ฟเวอร์ของคุณจากนั้นเรียกใช้ npm run start:prod )

ที่นี่เรามีกระบวนการพัฒนา GHCHAT ซึ่งจะปรับปรุงและสรุปปัญหาจุดความรู้และข้อผิดพลาดที่จะพบเมื่อทำโครงการเต็มรูปแบบนี้

ใบอนุญาต

มิกซ์

รหัสไม่ใช่เรื่องง่ายโปรดระบุแหล่งที่มาสำหรับการอ้างอิง

ผู้มีส่วนร่วม

ขอบคุณพวกคุณสำหรับการประชาสัมพันธ์ของคุณ

ในที่สุด

หากเป็นประโยชน์กับคุณหรือคิดว่ามันไม่เลวคุณสามารถแสดงหรือให้รางวัลแก่ฉัน (〃 '▽' 〃)

ให้รางวัลสองมิติ