什么是 socket.io
socket.io 是一个基于 Node.js 的实时网络库，它可以让你在浏览器和服务器之间建立实时的双向通信。socket.io 的主要特点是跨浏览器和跨平台，它可以在不同的浏览器和不同的操作系统中使用。
socket.io 的实现原理是通过 WebSocket 协议建立实时的双向通信，如果浏览器不支持 WebSocket，socket.io 会自动降级成使用轮询的方式来实现实时通信。
为什么要使用 socket.io
在 web 应用中，很多场景需要实时的双向通信，比如多人在线游戏、在线聊天、协作编辑等。传统的 HTTP 协议是一种单向的请求-响应协议，不能满足这些场景的需求。
使用 socket.io 可以让你快速地实现这些场景，而且它的使用非常简单，只需要几行代码就可以建立实时的双向通信。
如何使用 socket.io
使用 socket.io 需要分为客户端和服务器端两部分来实现。下面我们以一个在线协作编辑器为例，介绍如何使用 socket.io 实现多用户在线协作。
服务器端实现
首先我们需要在服务器端安装 socket.io：
npm install socket.io
然后在服务器端代码中引入 socket.io：
const io = require('socket.io')(server);其中 server 是一个 HTTP 服务器实例。
接着我们监听客户端的连接事件，当有客户端连接到服务器时，就会触发 connection 事件：
io.on('connection', (socket) => {
console.log('a user connected');
});在 connection 事件中，我们可以获取到客户端的 socket 对象，通过这个对象可以向客户端发送消息，也可以接收客户端发送过来的消息。
下面我们来实现在线协作编辑器的功能，当一个用户在编辑器中输入文字时，我们需要将这个文字发送给所有在线的用户。
首先我们需要监听客户端发送过来的消息事件：
socket.on('message', (msg) => {
console.log('message: ' + msg);
});然后我们需要将这个消息发送给所有在线的用户：
io.emit('message', msg);完整的服务器端代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- ------ - ----------------------- ---- -- -
--------------------- - -------------- ----- ----- -- -
-- ----- -
-------------------
------ -------------- ------- -------------
-
-------------------
--------------
---
---
----- -- - -----------------------------
------------------- -------- -- -
-------------- ---- ------------
-------------------- ----- -- -
--------------------- - - -----
------------------ -----
---
----------------------- -- -- -
----------------- ---------------
---
---
------------------- -- -- -
---------------------- -- ---------
---客户端实现
接下来我们需要在客户端中使用 socket.io 来建立实时的双向通信。
首先我们需要在 HTML 文件中引入 socket.io：
<script src="/socket.io/socket.io.js"></script>
然后在客户端代码中创建一个 socket 对象：
const socket = io();
这里的 io() 函数会自动连接到服务器端，如果连接失败会自动重试。
接着我们需要监听服务器端发送过来的消息事件：
socket.on('message', (msg) => {
console.log('message: ' + msg);
});然后我们需要将用户在编辑器中输入的文字发送给服务器端：
const input = document.querySelector('input');
input.addEventListener('input', () => {
const msg = input.value;
socket.emit('message', msg);
});完整的客户端代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
-------
------
------ ------------
------- ---------------------------------------
--------
----- ------ - -----
-------------------- ----- -- -
--------------------- - - -----
---
----- ----- - --------------------------------
------------------------------- -- -- -
----- --- - ------------
---------------------- -----
---
---------
-------
-------总结
本文介绍了 socket.io 的基本使用和实现多用户在线协作的例子。socket.io 的使用非常简单，而且跨浏览器和跨平台，可以让你快速地实现实时通信的功能。在实际应用中，你可以根据自己的需求来使用 socket.io，比如实现多人在线游戏、在线聊天、协作编辑等功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6514197e95b1f8cacdc91865