在 Web 应用开发中，实现表格的在线编辑功能是一项常见的需求。传统的实现方式，通常是通过发送 Ajax 请求或者重载页面来更新表格数据，这种方式需要频繁的网络请求，用户体验不佳。而使用 Node.js 和 Socket.io 技术可以实现实时在线表格编辑功能，同时也可以提升应用的性能和用户体验。
Node.js 介绍
Node.js 是一种基于 V8 引擎的 JavaScript 运行环境，它能够使 JavaScript 脱离浏览器，以服务端应用的形式运行在计算机上。Node.js 具有事件驱动、异步式 I/O 等特性，适合编写高并发的网络应用。同时，Node.js 拥有庞大的第三方库，许多常用的工具和框架都可以在 Node.js 中找到。
Socket.io 介绍
Socket.io 是一个基于 Node.js 的实时网络通信库，它可以在客户端和服务端之间双向通信，支持多个协议（WebSocket、FlashSocket、AJAX 等）。Socket.io 提供了简单易用的 API，可以让开发人员快速搭建实时应用。
实现在线表格编辑
在本文中，我们将介绍如何使用 Node.js 和 Socket.io 技术来实现在线表格编辑功能。我们将创建一个简单的 Web 应用，在该应用中用户可以实时编辑表格，并且其他在线用户也能够即时看到表格的变化。
1. 安装 Node.js 和 Socket.io
在开始之前，需要先安装 Node.js 和 Socket.io。在 Node.js 官网下载页面（https://nodejs.org/en/download/）可以找到适合不同操作系统的安装包。安装完成后，在命令行中执行以下命令来安装 Socket.io：
npm install socket.io --save
这将在项目文件夹中安装 Socket.io 库。
2. 创建 Web 应用
在项目文件夹中创建一个名为 index.js 的文件，该文件是我们的应用入口。在该文件中引入 Socket.io 库：
const io = require('socket.io')(http);
// http 表示 http 服务器实例，下文会详细介绍3. 创建 HTTP 服务器
我们需要创建一个 HTTP 服务器来监听用户请求并转发 Socket.io 消息。在 index.js 文件中新增以下代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------ - ----------------------- ---- -- - -- -- ---- -- --- ------------------- -- -- - ---------------------- -- --------- ---
这将在本地的 3000 端口启动一个 HTTP 服务器。现在我们可以在浏览器中访问 http://localhost:3000，看到页面空白。
4. 客户端脚本
我们将使用 jQuery 库来实现前端页面动态操作。在 HTML 页面头部引入 jQuery 库：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
在页面中新增一个表格，并且为表格中的每个单元格添加 contenteditable 属性，使其可编辑：
-- -------------------- ---- -------
------ -------------------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
--- ----------------------
--- ----------------------
--- ----------------------
-----
----
--- ----------------------
--- ----------------------
--- ----------------------
-----
----
--- ----------------------
--- ----------------------
--- ----------------------
-----
--------
--------5. 实现 Socket.io 服务端
我们需要为服务端添加事件监听器，以便在用户编辑表格时将其数据广播给在线的其他用户。在 index.js 文件中新增以下代码：
-- -------------------- ---- -------
------------------- -------- -- -
-------------- ---- ------------
----------------------- -- -- -
----------------- ---------------
---
----------------------- ------ -- -
------------------------- ------
----------------------------------- ------
---
---这里的 io.on('connection') 监听器将处理用户连接事件。socket.on('table-edit') 监听器将处理用户编辑表格时发送的消息。socket.broadcast.emit('table-edit') 方法将广播接收到的消息给所有在线用户。
6. 实现 Socket.io 客户端
现在我们需要将客户端页面与 Socket.io 服务连接起来。在 HTML 页面中，我们使用以下代码初始化 Socket.io：
-- -------------------- ---- ------- --- ------ - ----- ----------------------------------- -------- -- - --- --- - ------------------------- --- --- - ---------------- --- ----- - --------------- ------------------------- - ---- ---- ---- ---- ------ ----- --- --- ----------------------- -------- ------ - --- --- - --------- --- --- - --------- --- ----- - ----------- --- ------ - ----------------- ----- -------------------------------- ------------------- ---
这里的 io() 方法将初始化一个 Socket.io 实例，该实例与服务端建立长连接。socket.emit('table-edit') 方法将在用户编辑表格时发送消息给服务端。socket.on('table-edit') 方法将在接收到服务端发送的消息时更新前端页面中的表格数据。
总结
本文介绍了如何使用 Node.js 和 Socket.io 技术实现在线表格编辑功能。我们创建了一个简单的 Web 应用，其中用户可以实时编辑表格并且其他在线用户也能够实时看到表格的变化。通过本文的学习，读者可了解如何使用 Node.js 和 Socket.io 实现实时应用，以及如何使用 jQuery 库操作 HTML 元素，同时还有一些前端实战经验。
示例代码：https://github.com/bstcine/web-socket-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ea542968c7c53b0cffda2