OnlineChat-web: OnlineChat在线聊天系统（前端）基于Ant Design Pro+WebChat组件+webSocket进行实现
登录 注册 开源 企业版 高校版 搜索 帮助中心 使用条款 关于我们 私有云 Gitee AI NEW 我知道了 查看详情
代码拉取完成，页面将自动刷新
捐赠
捐赠前请先登录
取消
前往登录
扫描微信二维码支付
支付完成
支付提示
将跳转至支付宝完成支付
确定
Watch
不关注
关注所有动态
仅关注版本发行动态
关注但不提醒动态
Star
Fork
王世磊
OnlineChat-web
代码
Issues
Pull Requests
Wiki
统计
流水线
服务
Gitee Pages
JavaDoc
PHPDoc
质量分析
Jenkins for Gitee
腾讯云托管
腾讯云 Serverless
悬镜安全
阿里云 SAE
Codeblitz
我知道了，不再自动展开
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目，私有仓库也完全免费 ：）
免费加入
已有帐号？
立即登录
返回
该仓库未声明开源许可证文件（LICENSE），使用请关注具体项目描述及其代码上游依赖。
项目仓库所选许可证以仓库主分支所使用许可证为准
master
管理
分支 (1)
标签 (1)
1.0
克隆/下载
HTTPS
SSH
SVN
SVN+SSH
下载ZIP
该操作需登录 Gitee 帐号，请先登录后再操作。
没有帐号，去注册
提示
下载代码请复制以下命令到终端执行
为确保你提交的代码身份被 Gitee 正确识别，请执行以下命令完成配置
git config --global user.name userName &#10git config --global user.email userEmail
初次使用 SSH 协议进行代码克隆、推送等操作时，需按下述提示完成 SSH 配置
生成 RSA 密钥
获取 RSA 公钥内容，并配置到
SSH公钥
在 Gitee 上使用 SVN，请访问
使用指南
使用 HTTPS 协议时，命令行会出现如下账号密码验证步骤。基于安全考虑，Gitee 建议
配置并使用私人令牌
替代登录密码进行克隆、推送等操作
Username for 'https://gitee.com': userName
Password for 'https://userName@gitee.com':
私人令牌
新建文件
新建 Diagram 文件
新建子模块
上传文件
分支 1
标签 1
贡献代码
同步代码
创建 Pull Request
了解更多
对比差异
通过 Pull Request 同步
同步更新到分支
将会在向当前分支创建一个 Pull
Request，合入后将完成同步
update README.md.
624149e
20 次提交
提交
提示:
由于 Git 不支持空文件夾，创建文件夹后会生成空的 .keep 文件
config
保存
lib
mock
public
src
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.prettierignore
.prettierrc.js
.stylelintrc.js
README.md
jest.config.js
jsconfig.json
package.json
tsconfig.json
Loading...
README


onlineChat在线聊天系统
零、主要功能
1）登录注册、手机登录
2）登录在线广播
3）个人信息维护修改、账号绑定
4）实时在线好友私聊
5）实时共同群聊
6）添加、删除好友
7）创建群聊、添加群聊、删除群聊
8）登录、人数等相关统计
一、地址相关
1、项目演示地址：
https://chat.wslhome.top
2、GitHub地址：
前端:
https://github.com/sirwsl/OnlineChat-web
后端：
https://github.com/sirwsl/OnlineChat
3、码云（Gitee地址）：
https://gitee.com/sirwsl/OnlineChat-web
https://gitee.com/sirwsl/OnlineChat
二、相关技术
1、该项目整体技术与框架包括：Ant Design Pro、 SpringBoot、WebSocket、MyBatis Plus、flyway 但不仅限于以上技术框架
2、项目整体采用前后端分离模式进行开发，前端主要采用TypeScript+Less文件进行编写，组件采用Ant Design组件进行实现
3、后端主要为SpringBoot进行实现，但也涉及到Redis、短信等相关内容
4、项目基本数据存储采用MYSQL形式，聊天记录采用本地localStorage的形式进行存储，如果需要可在此基础上加入mongoDB进行聊天数据持久化
三、项目运行与部署
项目运行
1、后端
运行之前请移除所有子模块pom文件中的以下部分，否则会报错
<build>
<plugins>
<plugin>
<groupId>
org.springframework.boot
</groupId>
<artifactId>
spring-boot-maven-plugin
</artifactId>
<configuration>
<classifier>
exec
</classifier>
</configuration>
</plugin>
</plugins>
</build>
1）拉取项目
https://gitee.com/sirwsl/OnlineChat.git
or
https://github.com/sirwsl/OnlineChat.git
2）安装依赖
mvn install
3)修改chat-web 模块下的resource中配置文件
a) 选择激活环境
profiles:
active: pro,all
b) 修改config配置文件中对应参数
4）数据库中创建对应数据库
PS：只需要创建数据库，在该系统中采用FlyWay进行数据库版本管理，启动项目后会自动运行flyway文件进行初始化数据库
5）找到chat-web模块下Application.java中main函数运行
2、前端
https://gitee.com/sirwsl/OnlineChat-web.git
https://github.com/sirwsl/OnlineChat-web.git
2）安装所需包
npm install
3)修改config中代理相关配置 proxy.ts文件
/api/
target
http://localhost:8080
changeOrigin
true
pathRewrite
^/api
''
},
4）修改src目录下layouts/BasicLayout.tsx文件与pages/Chat/index.tsx中的webSocket链接进行修改
let
listClient
new
WebSocket
ws://localhost:8080/xxx/
userId
5)运行项目
npm start
项目构建
构建jar包之前请再所有子模块pom文件中添加以下部分，否则会报错
1、后端项目构建参照chat-web模块下dockerfile文件
dockerfile:
FROM
java:8
MAINTAINER
wangshilei <sirwsl@163.com>
VOLUME
/tmp
COPY
target/chat-web-1.0-exec.jar onlinechat.jar
RUN
bash
-c
"touch /onlinechat.jar"
cp
/usr/share/zoneinfo/Asia/Shanghai /etc/localtime
echo
"Asia/Shanghai"
>>
/etc/timezone
EXPOSE
8001
ENTRYPOINT
["java","-Djava.security.egd=file:/dev/./urandom","-jar","onlinechat.jar"]
2、前端项目运行 npm run build后将disc目录复制到nginx的html目录下
nginx中添加代理、nginx配置文件如下：
server
listen
include
mime.types
default_type
application/octet-stream
sendfile
on
gzip
gzip_min_length
1k
gzip_comp_level
gzip_types
text/plain
application/javascript
application/x-javascript
text/css
application/xml
text/javascript
application/x-httpd-php
image/jpeg
image/gif
image/png
gzip_vary
gzip_disable
"MSIE
[1-6]
."
root
/usr/share/nginx/html/disc/
location
try_files
$uri
/index.html
/api
proxy_pass
http://localhost:8001/
proxy_set_header
Host
$host
$server_port
.*\.(images|img|javascript|js|css|flash|media|static|eot|otf|ttf|woff|woff2|map)$
autoindex
access_log
off
expires
7d
80
return
301
https://xxx
$request_uri
四、作者相关
项目作者：sirwsl
wx：sirwsl （可以一起交流技术、如果是帮忙看问题就别加了，烦的伤）
email：
sirwsl@163.com
（有问题可以进行反馈或者去github提bug）
一个初出茅庐的码农，该项目为antDesign与webSocket的实验品，喜欢就给个Star吧
个人博客：
https://www.wslhome.top
CSDN:
sirwsl:https://blog.csdn.net/qq_40432886
商城：
https://kill.wslhome.top
商城后端管理：
https://admin.wslhome.top
码云地址：
https://gitee.com/sirwsl
GitHub地址：
https://github.com/sirwsl
空文件
Starred
0 人次
举报
举报成功
我们将于2个工作日内通过站内信反馈结果给你！
请认真填写举报原因，尽可能描述详细。
举报类型
请选择举报类型
举报原因
发送
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
简介
OnlineChat在线聊天系统（前端）基于Ant Design Pro+WebChat组件+webSocket进行实现
展开
收起
TypeScript
Ant-Design
暂无标签
等 5 种语言
68.9%
JavaScript
14.7%
Less
6.3%
CSS
6.0%
HTML
4.1%
保存更改
发行版
(1)
全部
OnlineChat
贡献者
近期动态
加载更多
不能加载更多了
编辑仓库简介
简介内容
主页
git@gitee.com:sirwsl/OnlineChat-web.git
sirwsl
深圳市奥思网络科技有限公司版权所有
Git 大全
Git 命令学习
CopyCat 代码克隆检测
APP与插件下载
Gitee Reward
Gitee 封面人物
GVP 项目
Gitee 博客
Gitee 公益计划
Gitee 持续集成
OpenAPI
帮助文档
在线自助服务
更新日志
加入我们
意见建议
合作伙伴
售前咨询客服
技术交流QQ群
微信服务号
client#oschina.cn
企业版在线使用：400-606-0201
专业版私有部署：
13670252304
13352947997
开放原子开源基金会
合作代码托管平台
违法和不良信息举报中心
粤ICP备12009483号
简 体
繁 體
English
点此查找更多帮助
搜索帮助
Git 命令在线学习
如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大，如何减小？
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release（发行版）
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部
登录提示