前言
所谓实时同步，是指在多个终端同时访问一个 web 页面时，可以实时地看到其他终端的操作结果。Socket.io 是一个基于 Node.js 的实时应用框架，可以轻松地实现实时通信。本文将介绍如何使用 Socket.io 实现 web 应用的实时同步。
准备工作
在使用 Socket.io 之前，需要先安装 Node.js，并使用 npm 安装 Socket.io。可以使用以下命令进行安装：
npm install socket.io
创建服务器
使用 Socket.io 实现实时同步的基础是一个服务器，我们需要先创建一个服务器，并监听客户端的连接。
-- -------------------- ---- -------
----- --- - -------------------------------------
----- -- - -------------------------
----- -- - -------------
----------------
-------- ------- ----- ---- -
--------------------- - -------------- ----- ----- -- -
-- ----- -
------------------
------ -------------- ------- ------------
-
------------------
-------------
--
-
------------------- -------- -- -
------------------- -----------
--以上代码首先创建一个服务器，使用 fs 模块读取名为 index.html 的文件，返回给客户端，然后启动监听端口为 3000 的服务。当客户端连接到服务器时，io.on('connection') 回调函数将被执行。
实现实时同步
接下来，我们需要为客户端连接到服务器后建立一个实时通信的通道。使用 socket.emit 可以向连接到服务器的客户端发送消息，使用 socket.on 可以处理客户端发来的消息。
io.on('connection', (socket) => {
console.log('client connected')
socket.on('message', (data) => {
console.log(data)
socket.emit('response', data)
})
})以上代码建立了一个 message 事件，客户端可以通过 socket.emit('message', 'hello') 来触发该事件。服务器接收到 message 事件并打印出相应的数据，然后将数据通过 socket.emit('response', data) 发送回客户端。客户端可以通过 socket.on('response', (data) => {console.log(data)}) 接收到服务器返回的数据。
应用示例
以下是一个简单的实时同步应用示例，当一个用户在输入框中输入文字时，所有其他用户能够实时地看到这个输入框中的内容。在 index.html 中，我们需要添加一个输入框和一个显示框：
<input type="text" id="input"> <div id="output"></div>
然后在客户端使用以下代码：
-- -------------------- ---- ------- ----- ------ - ---- ----- ----- - -------------------------------- ----- ------ - --------------------------------- ------------------------------- --- -- - ----- ----- - -------------- ------------------ - ----- ---------------------- ------ -- --------------------- ------ -- - ------------------ - ---- --
以上代码首先连接到服务器，并绑定了输入框的 input 事件，当输入框中输入内容时，将该内容通过 socket.emit('message', data) 发送到服务器。在服务器端，接收到这个消息后通过 socket.emit('response', data) 发送到其他终端。在客户端，通过 socket.on('response', (data) => {output.textContent = data}) 接收到其他终端发送过来的数据。
总结
使用 Socket.io 可以轻松地实现 web 应用的实时同步。我们可以使用上述示例代码，快速地将 Socket.io 应用到我们的 web 应用中，为用户带来更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d3f2848841e98949fd5e1