IM即时通讯源码/im源码基于uniapp框架从0开始设计搭建在线聊天系统_im前端框架

---

前言

随着人社交产品的不断发展，即时通讯聊天这门技术也越来越重要，很多人都开启了学习通讯技术，本文就介绍了即时通讯的基础内容。

---

一、确定技术栈

在开始设计和搭建聊天系统之前，需要确定所需技术栈。常用的技术栈包括前端、后端和数据库。例如，前端可以选择uni-app，后端可以选择java Srping Boot，WebSocket实时通信，非关系型数据库Redis，关系数据库可以选择MySql。

二、数据库设计：

1.引入库

我们将使用MySQL作为数据库。首先，创建以下数据表：
用户表（users）: 存储用户信息
好友关系表（friends）: 存储用户之间的好友关系
聊天记录表（messages）: 存储聊天记录

CREATE TABLE `users` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  `nickname` varchar(255) DEFAULT NULL,
  `avatar` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `username_UNIQUE` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `friends` (
  `user_id` bigint(20) NOT NULL,
  `friend_id` bigint(20) NOT NULL,
  PRIMARY KEY (`user_id`,`friend_id`),
  FOREIGN KEY (`user_id`) REFERENCES `users`(`id`),
  FOREIGN KEY (`friend_id`) REFERENCES `users`(`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `messages` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `sender_id` bigint(20) NOT NULL,
  `receiver_id` bigint(20) NOT NULL,
  `content` text NOT NULL,
  `timestamp` datetime(6) NOT NULL,
  PRIMARY KEY (`id`),
  FOREIGN KEY (`sender_id`) REFERENCES `users`(`id`),
  FOREIGN KEY (`receiver_id`) REFERENCES `users`(`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2.使用Spring Boot创建后端项目

选择以下依赖：

• Web：选择Spring Web模块，用于创建RESTful Web服务 MySQL
• Driver：选择MySQL驱动，用于连接MySQL数据库 JPA：选择Spring --Data JPA模块，用于操作数据库
• WebSocket：选择WebSocket模块，用于实现实时通信

3.实现WebSocket通信：

3.1创建WebSocket配置类：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Autowired
    private ChatWebSocketHandler chatWebSocketHandler;

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(chatWebSocketHandler, "/chat")
                .setAllowedOrigins("*")
                .withSockJS();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

3.2创建ChatWebSocketHandler类：

@Service
public class ChatWebSocketHandler extends TextWebSocketHandler {
    // 用于存储WebSocketSession
    private final Map<String, WebSocketSession> sessions = new ConcurrentHashMap<>();

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // TODO: 处理客户端发送的消息，如解析JSON，存储到数据库，转发给其他客户端等
    }

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        // TODO: 用户连接后的操作，如将session添加到sessions中
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        // TODO: 用户断开连接后的操作，如将session从sessions中移除
    }

    // 其他WebSocket处理方法
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3.3前端WebSocket连接与通信：

在uni-app项目中，使用WebSocket与后端进行实时通信。例如：

// 创建WebSocket连接
const socket = new WebSocket("ws://localhost:8080/chat");

// 监听WebSocket连接成功事件
socket.addEventListener("open", (event) => {
  console.log("WebSocket连接成功");
});

// 监听WebSocket接收消息事件
socket.addEventListener("message", (event) => {
  console.log("收到消息: ", event.data);
  // TODO: 处理收到的消息，如显示到聊天界面等
});

// 发送消息
function sendMessage(content) {
  const message = {
    senderId: 1,
    receiverId: 2,
    content: content,
    timestamp: new Date(),
  };
  socket.send(JSON.stringify(message));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

---

总结

提示：上述提供了一个设计思路过程详细设计还需要考虑掉线多端登录，消息同步等问题。
基于上面可能出现的一些疑难杂症可以看下开源的一些框架学习，如：宠友IM（https://www.chongyou.info/1/product/im.html）有5个端客户支撑：安卓、苹果APP、小程序、H5、PC端。