Xedge>> tyloo-chat>> 返回
项目作者： BoBoooooo

项目描述 ：
vue + nestjs IM即时通讯聊天室(仿wechat)
高级语言： TypeScript
项目地址: git://github.com/BoBoooooo/tyloo-chat.git
创建时间： 2020-11-17T02:27:13Z
项目社区：https://github.com/BoBoooooo/tyloo-chat
开源协议：MIT License
下载


Tyloo-Chat(仿wechat)

author
author
Node.js Version
License: MIT
author

线上访问地址暂时关闭

说明

本项目fork自genal-chat做了优化升级,感谢大佬Genal开源提供思路!

目前还在抽空持续优化中,敬请期待!!!

觉得还不错的话可以点个Star鼓励一下!!!

🚀 Electron版本客户端已出炉,详见release

部分功能截图

  • 整体界面

  • 通讯录

  • 群聊功能(群成员列表,在线状态,支持添加群成员)
  • 会话列表(置顶/删除)

  • 消息撤回功能

Electron版本客户端(位于electron_version分支)

  • windows版本(exe)

  • mac版本(dmg)

Feature

  • 用户登陆注册 (支持嵌入第三方系统单点登陆)
  • 群聊 (类似qq群)
    • 邀请好友加入群聊
    • 修改群名/群公告
  • 好友功能
  • 通讯录功能(支持接入第三方系统组织架构,直接发起聊天)
  • 聊天功能
    • Emoji表情包
    • 图片发送/图片预览
    • 发送附件
    • 消息分页
    • 消息撤回/复制
  • 自定义主题
  • 会话置顶/删除
  • 重连提醒
  • 智能助手(默认,位于main分支,采用ES搜索引擎需要手动创建ES词库)
  • 第三方API机器人(当前线上demo版本,位于feature_APIROBOT分支)
  • Electron版本(位于electron_version分支,支持生成dmg,exe客户端)

    技术栈

  • 前端
    • vue cli 4.x
    • Antd for vue
  • 后端
    • NestJS
    • TypeORM
    • Mysql

  • Socket.io

  • ElasticSearch ES搜索引擎(用于机器人快捷自动回复)

  • Nodejieba node版本中文分词器

    数据库表结构设计

环境准备

  • mysql
  • chat数据库 (需要手动创建,注意数据库编码格式为 utf8bm64``utf8bm64``utf8bm64 !!!)
  • node v10.16.3

拉取代码时注意事项

  1. // windows系统需要配置一下,提交时转换为LF，检出时不转换
  2. git config --global core.autocrlf input
  1. // 设置为区分大小写
  2. git config core.ignorecase false

运行项目

  1. // client
  2. cd client 
  3. cnpm i
  4. npm start
  1. // server
  2. cd server
  3. cnpm i
  4. npm run start

如何部署

Deploy

CentOS下部署聊天室

第三方集成/单点登陆

  • 第三方系统里嵌入如下跳转代码,需要携带userId以及username参数
  1. let chatUrl // 当前聊天室客户端地址
  2. let userId // 当前系统用户userId
  3. let username // 当前系统用户昵称
  5. window.open(`${chatUrl}?userId=${userId}&username=${username}`);

  • 聊天室获取参数并自动完成登陆(若为首次登陆会自动注册账号)

  • 设置聊天室client VUE_APP_ORG_URL 为获取第三方系统组织架构的接口地址

    • 设置VUE_APP_ORG_URL

      2. // .env.xxx
      3. // 此接口可以获取到第三方系统的所有部门和人员信息,注意为嵌套tree结构
      4. VUE_APP_ORG_URL=http://127.0.0.1:8080/api/getDeptUsersTree

    • 切换到联系人界面自动发出请求

      1. // Contact.vue
      2. axios.post(process.env.VUE_APP_ORG_URL).then((res) => {
      3.   this.organizationArr = res.data.data;
      4. });

    • 返回值格式如下

      1. interface node {
      2.   id: string; // id
      3.   label: string;// 名称
      4.   flag: boolean;// 是否有下级结点
      5.   children: node[];// 下级结点
      6. }
    • 若不需要集成第三方组织架构清空VUE_APP_ORG_URL即可,其他情况自行定制修改。

思路概述

webSocket建立流程

TODO

  • @功能实现
  • 消息转发
  • 代码性能优化
  • 群聊功能继续完善
  • 微信快捷登陆
  • Electron客户端检查更新

交流群