文章目录

• 诉求
• 相关技术
• 思路展开
• 相关步骤
• • pom配置
  • 服务端相关配置
  • 文本信息、用户广播处理逻辑
  • 前端功能代码
  • 功能测试
• 小结

诉求

       实现页面实时在线文本协同编辑,且显示当前同时编辑文本的用户。

相关技术

       Springboot(2.7.0)+Websocket+javascript

思路展开

1. 页面展示当前登陆用户
2. 页面有文本输入框(包含编辑、保存按钮)
3. 页面展示编辑当前文本的用户
4. 服务端广播处理文本信息的以及协同用户

相关步骤

pom配置

4.0.0org.springframework.bootspring-boot-starter-parent2.7.0com.exampledemo0.0.1-SNAPSHOTwardemoDemo project for Spring Boot8UTF-81.7.30org.springframework.bootspring-boot-starter-weborg.springframework.bootspring-boot-starter-websocketorg.springframework.bootspring-boot-starter-tomcatprovidedorg.slf4jslf4j-api${slf4j.version}org.slf4jslf4j-log4j12${slf4j.version}org.apache.logging.log4jlog4j-to-slf4j2.14.0com.alibabafastjson1.2.69org.apache.maven.pluginsmaven-compiler-plugin3.1${java.version}${java.version}${java.encoding}org.apache.maven.pluginsmaven-surefire-plugin2.6org.apache.maven.pluginsmaven-release-plugin-Preleaseorg.apache.maven.pluginsmaven-source-plugin2.1truecompilejar

服务端相关配置

       编写WebSocketConfig和WebSocketHandler配置类，实现对WebSocket的配置。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.*;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;/*** @author * @date 2023年01月31日 14:21*/
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {//    @Override
//    public void configureMessageBroker(MessageBrokerRegistry registry) {
//        registry.enableSimpleBroker("/topic");
//        registry.setApplicationDestinationPrefixes("/app");
//    }@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/doc-collaboration").withSockJS();}@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}}

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;import java.io.IOException;
import java.util.ArrayList;
import java.util.List;/*** handler * @date2023年01月31日 14:22*/
@Component
public class WebSocketHandler extends TextWebSocketHandler {private static final Logger LOGGER = LoggerFactory.getLogger(WebSocketHandler.class);private static final List sessions = new ArrayList<>();@Overridepublic void handleTextMessage(WebSocketSession session, TextMessage message) {LOGGER.info("Received message: {}", message.getPayload());for (WebSocketSession webSocketSession : sessions) {try {webSocketSession.sendMessage(message);} catch (IOException e) {LOGGER.error("Error: {}", e.getMessage());}}}@Overridepublic void afterConnectionEstablished(WebSocketSession session) {sessions.add(session);}@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) {sessions.remove(session);}
}

文本信息、用户广播处理逻辑

       定义 WebSocket 端点以处理来自客户端的传入消息。

/*** @author * @date 2023年01月31日 11:19*/import com.alibaba.fastjson.JSON;
import com.google.gson.Gson;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.*;@ServerEndpoint("/doc-collaboration")
@Component
@Slf4j
public class DocWebSocketServer {private static Set sessions = new HashSet<>();private static Set editingUsers = new HashSet<>();private static String content = "";@OnOpenpublic void onOpen(Session session) {sessions.add(session);}@OnClosepublic void onClose(Session session) {sessions.remove(session);String username = (String) session.getUserProperties().get("username");if (username != null) {editingUsers.remove(username);broadcastEditingUsers();}}@OnMessagepublic void onMessage(String message, Session session) {Gson gson = new Gson();Map data = gson.fromJson(message, Map.class);String type = (String) data.get("type");log.info("Message type: {}, message data: {}", type, data);String jsonStr = "";switch (type) {case "connect":String username = (String) data.get("username");session.getUserProperties().put("username", username);jsonStr = JSON.toJSONString(new HashMap() {{put("type", "update");put("content", content);}});broadcast(jsonStr);break;case "update":content = (String) data.get("content");jsonStr = JSON.toJSONString(new HashMap() {{put("type", "update");put("content", content);}});broadcast(jsonStr);break;case "start-editing":username = (String) session.getUserProperties().get("username");editingUsers.add(username);broadcastEditingUsers();break;case "stop-editing":username = (String) session.getUserProperties().get("username");editingUsers.remove(username);broadcastEditingUsers();break;case "getUser":broadcastEditingUsers();break;}}/*** 广播当前文本信息* @param message*/private void broadcast(String message) {log.info("message   {}", message);for (Session session : sessions) {try {session.getBasicRemote().sendText(message);} catch (IOException e) {e.printStackTrace();}}}/*** 广播当前正在编辑文本的用户*/private void broadcastEditingUsers() {broadcast(JSON.toJSONString(new HashMap() {{put("type", "editing");put("editingUsers", new ArrayList<>(editingUsers));}}));}
}

前端功能代码

       创建一个 JavaScript 客户端，它与端点建立 WebSocket 连接并将更新发送到服务器。展示当前用户以及同时编辑文本的人员名称。

好久没写前端了，写起来有点费劲！😂

编辑保存



当前用户:
 


同时编辑的用户:

功能测试

       同时打开多个页面，当编辑信息时会显示到同时编辑的用户列表。

       当前用户点击保存时推出当前同时编辑的用户列表

小结

       上面实现为简易实现，仅供参考，可能并不适用一些业务场景。

       下面的是我的一些想法，在真实生产应用在线文档协同编辑有多个点

• 实时协作编辑：多人同时在线编辑同一文档，显示协同编辑的人员，将信息更新为最新
• 历史版本控制：记录并保存文档的历史版本，当出现不可修复的错误可会退或者前进版本，以及用户的一些修改轨迹
• 讨论评论：在文档中添加评论和讨论功能，在一些文字或者图片附近可加以评论
• 权限管理：控制团队成员对文档的访问和编辑权限.