GithubHelp home page GithubHelp logo

boboooooo / tyloo-chat Goto Github PK

View Code? Open in Web Editor NEW
204.0 7.0 57.0 8.74 MB

vue2.x + nestjs IM即时通讯聊天室(仿WeChat) ⛱⛱

Home Page: http://server.boboooooo.top:9999

License: MIT License

JavaScript 2.40% HTML 0.45% Vue 47.47% TypeScript 47.23% SCSS 2.44%
nestjs typescript chat websocket socket-io vue

tyloo-chat's Introduction

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

拉取代码时注意事项

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

运行项目

// client
cd client 
cnpm i
npm start
// server
cd server
cnpm i
npm run start

如何部署

Deploy

CentOS下部署聊天室

第三方集成/单点登陆

  • 第三方系统里嵌入如下跳转代码,需要携带userId以及username参数
let chatUrl // 当前聊天室客户端地址
let userId // 当前系统用户userId
let username // 当前系统用户昵称

window.open(`${chatUrl}?userId=${userId}&username=${username}`);
  • 聊天室获取参数并自动完成登陆(若为首次登陆会自动注册账号)

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

    • 设置VUE_APP_ORG_URL
    // .env.xxx
    // 此接口可以获取到第三方系统的所有部门和人员信息,注意为嵌套tree结构
    VUE_APP_ORG_URL=http://127.0.0.1:8080/api/getDeptUsersTree
    • 切换到联系人界面自动发出请求
    // Contact.vue
    axios.post(process.env.VUE_APP_ORG_URL).then((res) => {
        this.organizationArr = res.data.data;
    });
    • 返回值格式如下
    interface node {
        id: string; // id
        label: string;// 名称
        flag: boolean;// 是否有下级结点
        children: node[];// 下级结点
    }
    • 若不需要集成第三方组织架构清空VUE_APP_ORG_URL即可,其他情况自行定制修改。

思路概述

webSocket建立流程

TODO

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

交流群

tyloo-chat's People

Contributors

boboooooo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

tyloo-chat's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.