WebChat前后端分离分布式微服务架构版,本地启动指南

webchat采用当下主流前后端分离分布式微服务架构,最主流的java全栈技术,包含IM通信流、社交、社区、电商、红包、圈子、支付、客服、大模型、智能化、图搜等众多核心业务场景及企业级技术解决方案。

100%对标互联网大厂级实战java项目(https://chat4j.com)

更多项目教程 获取 WebChat 源码

视频演示

观看部署流程录屏(该视频录制与25年5月份版本,内容可能不全,后续在更新最新版本,可先参考大体思路)。如果无法播放,请检查网络连接。

微服务架构介绍

前端服务比较简单,这里就不单独介绍啦。后段服务因为模块比较多,可以了解下分层微服务拆分思想和各模块职责。

环境要求

部署前请确保服务器或本地电脑满足以下配置:

前端环境

服务端环境

一、代码获取

订阅完课程后联系作者(CODER-77)申请开通代码仓库权限,通过代码仓库(前端:webchat-front 后段 webchat-server),推荐使用git拉取项目代码。

TERMINAL
# 1. 克隆前端项目到本地
$git clone https://**********************************/webchat-front.git

# 2. 克隆后段项目到本地
$git clone https://**********************************/webchat-server.git

二、数据库初始化

使用 SQL 工具(如 Navicat)连接 MySQL,执行webchat-server/resource/database-sql/webchat-*.sql文件夹下的脚本(注意数据库有多个,先创建数据库在执行脚本):

SQL
-- 1. 创建数据库 (必须 utf8mb4) 对应脚本文件:00-create-db.sql
CREATE DATABASE IF NOT EXISTS `webchat_act` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE DATABASE IF NOT EXISTS `webchat_aigc` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE DATABASE IF NOT EXISTS `webchat_payment` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE DATABASE IF NOT EXISTS `webchat_pgc` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE DATABASE IF NOT EXISTS `webchat_ugc` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE DATABASE IF NOT EXISTS `webchat_user` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;


-- 2. 导入表结构&初始化数据
-- 请依次运行项目根目录下的 webchat-server/resource/database-sql/webchat-*.sql (注意先选择对应的数据库在执行脚本)

三、Docker 启动中间件

如果你觉得中间件比较多,又熟练使用docker,可以选择docker安装,必须安装中间件:nacos、mysql、redis、minio、milvus、mongodb、es、rocketmq、n8n。

为了快速搭建环境,我们提供了 docker-compose.yml 文件。

BASH
$cd docker-env
$后续更新...

# 查看容器状态 (MySQL, Redis, Nacos 应为 Up 状态)
$docker ps

四、Nacos配置

修改 nacos配置 中的各个服务配置信息:

启动nacos

URL
http://localhost:8848/nacos/

空间id,建议保持一致,可以减少后续配置的麻烦。

Shell
2cdfb8e3-f127-4020-93df-2d4c3dc805b5

空间名

Shell
dev

导入配置,下载nacos配置,直接导入即可

配置文件修改

依次打开所有配置文件,检查所有配置链接、账号、密码、ak、sk等是否修改正确。
yaml
#---------------------------------数据库配置----------------------------------#
spring:
  datasource:
    # 配置你的 MySQL地址、用户名、密码等信息
    url: jdbc:mysql://127.0.0.1:3306/webchat_act?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=GMT%2b8&allowPublicKeyRetrieval=true
    username: root
    password: 12345678
    driver-class-name: com.mysql.jdbc.Driver
    hikari:
      maximum-pool-size: 10
  jpa:
    show-sql: true
  #---------------------------------redis----------------------------------#
  data:
    redis:
      port: 6379
      database: 6
      jedis:
        pool:
          max-active: 100
          max-wait: -1
          min-idle: 10

rocketmq:
  name-server: 127.0.0.1:9876 # 配置你的 RocketMQ NameServer 地址
  consumer:
    group: web_chat
  producer:
    group: web_chat

.... 省略

四、后端启动

依次启动 application.java ,注意看ide启动日志是否有报错,确认服务都启动成功

不管学习那部分内容必须启动服务

URL
webchat-gateway、webchat-user、webchat-sso

学习[IM]还需启动

URL
webchat-client-chat、webchat-connect、webchat-pgc、webchat-ugc

学习[企业级问答助手]还需启动

URL
webchat-client-chat、webchat-connect、webchat-pgc、webchat-ugc、webchat-aigc、webchat-search

学习[电商]还需启动

URL
webchat-client-mall、webchat-pgc、webchat-ugc、webchat-search、webchat-pay

学习[电商客服]还需启动

URL
webchat-netty-gateway、webchat-netty-server、webchat-client-mall、webchat-pgc、webchat-ugc、webchat-search、n8n

学习[管理后台]还需启动

URL
webchat-admin、webchat-pgc、webchat-ugc、webchat-aigc

其他问题欢迎学习交流群随时沟通

五、前端启动

我们已启动 webchat-front-client 为例子,其他都是一样的道理

TERMINAL
# 进入对应服务
$cd ~/你的本地目录/webchat-front/webchat-front-client

# 安装依赖
$npm install

# 启动服务
$npm run dev

# 测试访问
http://localhost:5001/ # IM客户端
http://localhost:5000/ # 统一登录
http://localhost:5002/ # 大后台
http://localhost:5003/ # 电商
http://localhost:5003/ # 三方支付
                

六、附件下载

n8n智能工作流

项目技术设计源文件

还在整理,请稍等