WebSocket实现协同表单字段占用提示的核心在于服务端状态管理、客户端精准同步与UI及时响应：服务端用Redis存字段占用状态并超时释放，客户端focus时发送occupy、blur时release，监听广播更新DOM样式与占位标签，并通过乐观更新、心跳保活和重连同步保障体验。
WebSocket 可以实现实时双向通信，是网页端多人协同表单中“字段占用提示”（如某人正在编辑某个输入框，其他人看到该字段变灰+显示用户名）的核心技术。关键不在于 WebSocket 本身多复杂，而在于服务端状态管理 + 客户端精准同步 + UI 响应及时。
服务端需维护字段占用状态
每个表单字段（例如 input[name="title"]）需要一个唯一标识（如 form123:title），服务端用内存哈希表或 Redis 存储：{ "form123:title": { "userId": "u789", "username": "张三", "ts": 1715678901234 } }
超时自动释放（比如 30 秒无心跳则清空），避免假占用。
- 用户聚焦（
focus）某个输入框时，前端立即发{"action":"occupy","field":"title","formId":"form123"} - 用户离开（
blur或切换页面）时，发{"action":"release","field":"title","formId":"form123"} - 服务端收到 occupy 后校验该字段是否空闲，再写入并广播变更（含当前占用者信息）
客户端监听与 UI 渲染逻辑
WebSocket 连接建立后，监听服务端推送的占用事件（如 {"type":"field_occupied","formId":"form123","field":"title","user":"张三"}），然后定位对应 DOM 并更新样式和提示：
- 给目标
添加class="occupied"，CSS 设置opacity: 0.6; pointer-events: none; - 在输入框右侧插入小标签（如
张三正在编辑） - 若同一字段被多人快速切换占用，可加防抖（如只响应最近一次 occupy，忽略中间 release）
处理冲突与用户体验细节
纯提示不阻断操作，但要避免误操作和信息滞后：
- 本地 focus 时先乐观标记为“自己占用”，同时发 occupy 请求；若服务端拒绝（已被占），立刻还原 UI 并 toast 提示
- 监听
visibilitychange和beforeunload，主动释放所有字段，减少服务端残留 - 字段级心跳：客户端每 15 秒向服务端发送
{"action":"keepalive","field":"title"}，维持占用状态 - 服务端广播时只推给同表单的其他用户（按 formId 分组），不全量广播
简易前端集成示例
无需框架，原生 JS 即可实现核心流程：
const ws = new WebSocket('wss://api.example.com/ws');
ws.onmessage = ({data}) => {
const msg = JSON.parse(data);
if (msg.type === 'field_occupied') {
const el = document.querySelector(`[name="${msg.field}"][data-form="${msg.formId}"]`);
if (el) {
el.classList.add('occupied');
let badge = el.parentNode.querySelector('.occupier-badge');
if (!badge) {
badge = document.createElement('span');
badge.className = 'occupier-badge';
el.parentNode.appendChild(badge);
}
badge.textContent = `${msg.user} 正在编辑`;
}
}
if (msg.type === 'field_released') {
const el = document.querySelector(`[name="${msg.field}"][data-form="${msg.formId}"]`);
if (el) {
el.classList.remove('occupied');
el.parentNode.querySelector('.occupier-badge')?.remove();
}
}
};
// 用户聚焦时
document.addEventListener('focusin', e => {
if (e.target.matches('input, textarea, select')) {
const field = e.target.name;
const formId = e.target.closest('form')?.dataset.form;
if (field && formId) {
ws.send(JSON.stringify({action: 'occupy', field, formId}));
}
}
});
不复杂但容易忽略：字段标识必须全局唯一、服务端需做幂等处理、前端要处理连接断开重连后的状态同步（比如重连后拉一次当前占用快照）。做到这三点，协同提示就稳了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
