从零开始的使用SpringBoot和WebSocket打造实时共享文档应用

在现代应用中，实时协作已经成为了非常重要的功能，尤其是在文档编辑、聊天系统和在线编程等场景中。通过实时共享文档，多个用户可以同时对同一份文档进行编辑，并能看到其他人的编辑内容。这种功能广泛应用于 Google Docs、Notion 等产品中。

在本文中，我们将实现一个简单的共享文本框，使用 WebSocket 技术来实现多人实时编辑同一份文本。通过 WebSocket 协议，客户端和服务器可以保持一个持续的连接，使得文档的内容能够实时同步到所有参与者。
（引流：https://juejin.cn/post/7445187277558628387）
效果图如下：

1. 什么是 WebSocket？

WebSocket 是一种网络协议，它提供了一个全双工的通信通道，允许客户端和服务器之间进行实时、双向的数据传输。与传统的 HTTP 协议不同，WebSocket 连接在建立后会保持打开状态，不需要频繁的建立连接，从而大大提高了数据交换的效率。

WebSocket 协议通常用于实时聊天、在线游戏、金融行情推送等场景。在本文中，我们将利用 WebSocket 来实现一个共享文本框。

2. 项目需求

我们的目标是实现一个简单的共享文本框功能，要求如下：

• 多个用户可以同时连接到同一个文档并进行编辑。
• 每次用户编辑文本时，修改内容会即时同步到其他用户的浏览器。
• 实现基本的文本框功能，包括输入和显示。

3. 技术栈

• 前端：HTML、CSS、JavaScript（使用 WebSocket API）
• 后端：SpringBoot
• 通信协议：WebSocket

4. 实现步骤

4.1 搭建 WebSocket 服务端

首先，我们需要创建一个 WebSocket 服务器来处理客户端连接。具体步骤如下：

1. 是maven依赖中引入websocket的依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2. 对WebSocket进行一些配置

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @ Description: 开启WebSocket支持
 * 用于在Spring框架的应用中配置和启用WebSocket功能。
 * 通过相关注解和方法的定义，使得应用能够正确地处理WebSocket连接和通信。
 */
@Configuration
public class WebSocketConfig {
   
    //Bean生命周期的初始化
    // 用于将方法返回的ServerEndpointExporter对象作为一个Bean注册到Spring的容器中
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
   
        //创建并返回一个ServerEndpointExporter对象。
        // ServerEndpointExporter主要作用是扫描带有@ServerEndpoint注解的WebSocket端点类，并将它们注册到Servlet容器中，
        // 从而使得应用能够正确地处理WebSocket连接请求，实现WebSocket的通信功能。
        return new ServerEndpointExporter();
    }
}

3. WebSocket服务器实现

import com.fasterxml.jackson.core.JsonProcessingException;
import org.springframework.stereotype.Service;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

@Service
@ServerEndpoint("/api/websocket/sharedText/{sid}")
public class WebSocketServer {
   

    // 每个连接的 Session
    private Session session;
    private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<>();
    private static int onlineCount = 0