Socket.io 是一个专门为实时通信开发的 JavaScript 库。HTTP 协议是一种请求-响应协议，即浏览器向服务器发出请求，服务器响应客户端的请求。而 Socket.io 则允许我们创建双向通信通道，这样服务器可以主动向客户端传输数据，而不需要接收来自客户端的请求。本文将介绍 Socket.io 的工作原理、如何在 Node.js 中使用 Socket.io 进行实时通信、如何在浏览器中使用 Socket.io，以及实现聊天室的示例代码。
工作原理
Socket.io 使用了两个主要的 Web 技术，WebSocket 和长轮询。WebSocket 是一种协议，它提供了全双工通信通道，可以在客户端和服务器之间建立实时连接。长轮询则是客户端向服务器发送请求，服务器会在有数据的时候返回响应，并在一段时间后断开连接，以达到实时通信的目的。
Socket.io 在建立连接时，首先会尝试使用 WebSocket 建立连接。如果 WebSocket 不可用，它会自动切换到长轮询。
在 Node.js 中使用 Socket.io 进行实时通信
在 Node.js 中使用 Socket.io 可以快速构建实时应用程序。首先，我们需要在 Node.js 中安装 Socket.io：
$ npm install socket.io
接下来，我们需要创建一个 HTTP 服务器并侦听连接请求。我们可以使用 Node.js 自带的 HTTP 模块或者使用 Express 框架。下面是使用 Express 框架创建 HTTP 服务器的代码：
const express = require('express')
const app = express()
const http = require('http').createServer(app)
http.listen(3000, () => {
console.log('listening on *:3000')
})在创建 HTTP 服务器后，我们可以使用 Socket.io 建立客户端和服务器之间的连接。下面是创建服务器端和客户端连接的代码：
const io = require('socket.io')(http)
io.on('connect', (socket) => {
console.log('a user connected')
})这段代码将在客户端与服务器之间建立连接时执行，并输出 “a user connected” 日志。
现在我们已经成功建立了服务器端和客户端之间的连接，接下来就可以使用 Socket.io 发送和接收消息了。例如，当服务器收到来自客户端的消息时，可以向所有连接的客户端广播消息：
socket.on('chat message', (msg) => {
console.log('message: ' + msg)
io.emit('chat message', msg)
})在浏览器中使用 Socket.io
在浏览器中使用 Socket.io 可以方便地与服务器进行实时通信，并展现实时数据。使用 Socket.io 首先需要在 HTML 中导入 Socket.io 的客户端库：
<script src="/socket.io/socket.io.js"></script>
接着，我们可以使用 Socket.io 客户端的 io() 函数连接到服务器：
const socket = io('http://localhost:3000')在连接成功后，我们可以使用 emit 方法向服务器发送数据：
socket.emit('chat message', 'Hello, Socket.io')服务器可以处理来自客户端的消息并发送数据给所有客户端：
io.on('connection', (socket) => {
socket.on('chat message', (msg) => {
console.log('message: ' + msg)
io.emit('chat message', msg)
})
})搭建聊天室
现在我们已经了解了 Socket.io 是如何工作的，以及如何在 Node.js 和浏览器中使用 Socket.io 进行实时通信。接下来，我们将使用 Socket.io 创建一个简单的聊天室。首先，我们需要在 HTML 中创建一个表单，让用户可以输入聊天消息：
<form action=""> <input id="m" autocomplete="off" /><button>Send</button> </form>
然后，在客户端代码中，我们可以监听表单提交事件，并使用 emit 方法向服务器发送聊天消息：
$('form').submit(() => {
socket.emit('chat message', $('#m').val())
$('#m').val('')
return false
})在服务器端代码中，我们需要处理来自客户端的聊天消息，并将消息发送给所有连接的客户端：
io.on('connection', (socket) => {
socket.on('chat message', (msg) => {
console.log('message: ' + msg)
io.emit('chat message', msg)
})
})最后，我们还需要在浏览器中展示聊天消息：
socket.on('chat message', (msg) => {
$('#messages').append($('<li>').text(msg))
})完整的聊天室示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ---- ---------------
-------
- - ------- -- -------- -- ----------- ----------- -
---- - ----- ---- ---------- ------ -
---- - ----------- ----- -------- ---- --------- ------ ------- -- ------ ----- -
---- ----- - ------- -- -------- ----- ------ ---- ------------- ---- -
---- ------ - ------ --- ----------- -------- ---- ----- ------- ----- -------- ----- -
--------- - ---------------- ----- ------- -- -------- -- -
--------- -- - -------- --- ----- -
--------- ----------------- - ----------- ----- -
--------
-------
------
--- -------------------
----- ----------
------ ------ ------------------ -----------------------
-------
------- ---------------------------------------
------- --------------------------------------------------------
--------
----- ------ - ----
------------------- -- -
----------------- --------- --------------
---------------
------ -----
--
--------------- --------- ----- -- -
------------------------------------------
--
---------
-------
-------总结
本文详细介绍了 Socket.io 的工作原理以及如何在 Node.js 和浏览器中使用 Socket.io 进行实时通信。通过实现聊天室示例，我们可以更深入地理解 Socket.io 的应用。在实际开发中，Socket.io 是实现实时通信的常用工具之一，可以用于创建实时聊天室、游戏、股票行情等实时应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64701055968c7c53b0e36277