WebSocket 即时聊天系统（有点微信的味道）

RunTheCode 2022-06-13

650

大家好，我是小酷！

今天给大家推荐的开源项目是WebSocket 即时聊天系统。

系统介绍

WebSocket 即时聊天系统是个前端基于 Vue3 + Element-plus + websocket 开发，后端基于Spring Boot 和Netty的即时聊天系统。系统开发采用前后端分离模式。

功能介绍

系统功能包含添加好友，添加与拒绝好友申请，建群（在开发中），消息提示，搜索好友和组合等基础功能。即时聊天目前支持文字发送和图片发送。从项目演示界面来看有点像微信。

此项目设计与采用的技术都是比较流行的技术，功能简单实用，比较适合Vue3学者和Spring Boot微服务爱好者的学习和研究。

技术框架

* 后端框架：SpringBoot、Netty、Mybatis-plus

* 前端框架：Vue3、Element-Plus、Vue- router、Vuex、Axios

开发环境

JDK：1.8
MySql 8.0+

核心依赖

依赖	版本
Spring Boot	2.5.3
Mysql	8.0.23
Shiro	1.8.0
Mybatis-plus	3.4.2
Netty	4.1.67
FastJson	1.2.75
Lombok	1.18.20
Druid	1.2.5

项目结构

vue3-src
├─api 接口模块
│
├─assets 静态资源模块
│  ├─icon svg图标
│  ├─images 图片
│  └─sass 样式
│ 
├─components 组件模块
│ 
├─router 动态
│ 
├─store vuex
│  ├─modules
│  │  ├─conversation 会话模块
│  │  ├─friend 好友模块
│  │  ├─message 消息模块
│  │  ├─status 侧边栏状态模块
│  │  ├─user 用户登录信息模块
│  │  └─websocket websocket模块
│  └─index 动态加载模块
│ 
├─types typescript接口
│ 
├─utils 工具模块
│  ├─constants 常量
│  ├─index 工具
│  ├─request axios二次封装
│  ├─storage 本地缓存工具
│  └─websocket websocket工具类
│
├─views 视图模块
│  ├─chat 聊天页
│  ├─login 登录页面

启动流程

# 克隆项目
git clone https://github.com/gmingchen/im-vue.git


# 进入项目目录
cd im-vue


# 安装依赖
npm install


# 启动服务
npm run dev   # 开发环境
npm run prod  # 正式环境
npm run test  # 测试环境


# 发布
npm run build:dev   # 开发环境
npm run build:prod  # 正式环境
npm run build:test  # 测试环境