仿微信PC端即时聊天系统源码，基于Html + Java + websocket + mysql （附带完整源代码和接入教程），包括前端后端，可接入DeepSeek R1满血版的Api

要仿制一个PC端的微信聊天界面，你需要掌握包括前端后端的知识，前端包括HTML5、CSS3和JavaScript等，后端则是Java、PHP、Nodejs、Python等基础知识。以下是一个简单的示例，指导你如何开始：

话不多说，先上截图：

移动端截图：

暗黑主题截图：

以下是一个基于HTML+Java+WebSocket+MySQL并集成DeepSeek R1 API的即时聊天系统实现方案，详细教程如下：

系统架构

项目结构
├── frontend/                 # 前端
│   ├── index.html            # 主界面
│   ├── chat.js               # 双WebSocket连接管理
│   └── deepseek-chat.js      # AI聊天组件
├── backend/
│   ├── src/main/java/com/chat/
│   │   ├── config/           # WebSocket配置
│   │   ├── controller/       # REST API
│   │   ├── service/          # 业务逻辑
│   │   └── entity/           # 数据库实体
│   └── application.yml       # 配置文件
└── sql/
    └── schema.sql            # 数据库表结构

数据库设计（schema.sql）

CREATE TABLE users (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  username VARCHAR(50) UNIQUE,
  password VARCHAR(100),
  avatar_url VARCHAR(200)
);

CREATE TABLE messages (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  session_id VARCHAR(36),      # 会话ID
  sender_id BIGINT,
  content TEXT,
  is_ai BOOLEAN DEFAULT false,# AI消息标记
  create_time TIMESTAMP
);

CREATE TABLE ai_chat_history (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  user_id BIGINT,
  prompt TEXT,
  response TEXT,
  tokens_used INT
);

核心代码实现

1. WebSocket配置（Java）

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws-chat")
                .setAllowedOriginPatterns("*")
                .withSockJS();
        
        // DeepSeek专用连接端点
        registry.addEndpoint("/ws-ai")
                .setAllowedOriginPatterns("*")
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic", "/queue");
        config.setApplicationDestinationPrefixes("/app");
    }
}

2. 消息控制器（Java）

@Controller
public class ChatController {

    @Autowired
    private DeepSeekService deepSeekService;

    @MessageMapping("/chat.send")
    @SendToUser("/queue/messages")
    public MessageDto sendMessage(@Payload MessageDto message, 
                                Principal principal) {
        // 保存到数据库
        messageService.saveMessage(message);
        
        // 如果包含AI指令
        if(message.getContent().startsWith("@AI ")) {
            String prompt = message.getContent().substring(4);
            CompletableFuture.runAsync(() -> 
                deepSeekService.processAIRequest(principal.getName(), prompt)
            );
        }
        return message;
    }
}

3. DeepSeek集成服务（Java）

@Service
public class DeepSeekService {

    @Value("${deepseek.api-key}")
    private String apiKey;

    public void processAIRequest(String username, String prompt) {
        // 调用DeepSeek R1 API
        OkHttpClient client = new OkHttpClient();
        MediaType JSON = MediaType.get("application/json; charset=utf-8");
        
        String jsonBody = String.format("{\"model\":\"deepseek-r1\","
            + "\"messages\":[{\"role\":\"user\",\"content\":\"%s\"}]}", prompt);

        Request request = new Request.Builder()
            .url("https://api.deepseek.com/v1/chat/completions")
            .header("Authorization", "Bearer " + apiKey)
            .post(RequestBody.create(jsonBody, JSON))
            .build();

        try (Response response = client.newCall(request).execute()) {
            String responseBody = response.body().string();
            JSONObject jsonResponse = new JSONObject(responseBody);
            
            // 解析并转发AI响应
            String aiResponse = jsonResponse.getJSONArray("choices")
                .getJSONObject(0).getJSONObject("message")
                .getString("content");
            
            messagingTemplate.convertAndSendToUser(username, 
                "/queue/ai-messages", 
                new AiMessageDto(aiResponse));
        }
    }
}

4. 前端双WebSocket连接（chat.js）

// 用户聊天连接
const userChatSocket = new SockJS('/ws-chat');
const stompClient = Stomp.over(userChatSocket);

// AI聊天连接 
const aiChatSocket = new SockJS('/ws-ai');
const aiStompClient = Stomp.over(aiChatSocket);

// 用户消息订阅
stompClient.connect({}, () => {
  stompClient.subscribe('/user/queue/messages', (message) => {
    const msg = JSON.parse(message.body);
    appendMessage(msg, false);
  });
});

// AI消息订阅
aiStompClient.connect({}, () => {
  aiStompClient.subscribe('/user/queue/ai-messages', (message) => {
    const aiMsg = JSON.parse(message.body);
    appendAIMessage(aiMsg.content);
  });
});

function sendMessage(content) {
  if(content.startsWith("@AI ")) {
    // 发送到AI处理队列
    aiStompClient.send("/app/ai.process", {}, 
      JSON.stringify({content: content}));
  } else {
    // 普通消息
    stompClient.send("/app/chat.send", {}, 
      JSON.stringify({content: content}));
  }
}

5. 消息实体（Java）

@Entity
@Table(name = "messages")
public class Message {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    @Column(name = "session_id")
    private String sessionId;
    
    @ManyToOne
    @JoinColumn(name = "sender_id")
    private User sender;
    
    @Column(columnDefinition = "TEXT")
    private String content;
    
    @Column(name = "is_ai")
    private Boolean isAi;
    
    @CreationTimestamp
    private LocalDateTime createTime;
}

部署配置

application.yml 关键配置：

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/chat_db
    username: root
    password: yourpassword
  jpa:
    hibernate.ddl-auto: update

deepseek:
  api-key: your-deepseek-api-key

启动命令：

mvn spring-boot:run -Dspring-boot.run.profiles=prod

扩展能力

消息加密传输：

// 使用AES加密消息内容
public class MessageEncryptor {
    private static final String SECRET_KEY = "your-256-bit-secret";
    
    public static String encrypt(String content) {
        // 实现AES加密逻辑
    }
    
    public static String decrypt(String encryptedContent) {
        // 实现解密逻辑
    }
}

性能优化建议：

// 使用Redis缓存活跃会话
@Bean
public RedisTemplate<String, ActiveSession> redisTemplate() {
    RedisTemplate<String, ActiveSession> template = new RedisTemplate<>();
    template.setConnectionFactory(redisConnectionFactory());
    template.setValueSerializer(new Jackson2JsonRedisSerializer<>(ActiveSession.class));
    return template;
}

该方案实现了以下核心功能：

1、双WebSocket通道分离用户聊天与AI交互
2、基于Spring Security的WebSocket认证
3、DeepSeek R1 API的异步处理
4、消息持久化与历史记录查询
5、智能指令识别（@AI开头的消息触发AI响应）

完整代码需要包含用户管理系统、消息分页查询、文件传输等功能，建议使用以下技术栈增强：

前端：Vue3 + Element Plus
后端：Spring Boot 3.x + Spring Data JPA
部署：Docker + Nginx反向代理

效果演示：

演示地址：点击前往

源码下载：

下载地址：点击下载