在传统的 Web 开发中，客户端与服务器的通讯是通过 HTTP 协议实现的。但是，HTTP 协议是一种无状态协议，每次请求都需要重新建立连接，无法实现实时通讯。为了解决这个问题，HTML5 引入了 WebSocket 技术，使得 Web 应用能够实现实时通讯。
WebSocket 简介
WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。它允许服务器主动向客户端推送消息，而不需要客户端重新发送请求。WebSocket 协议基于 HTTP 协议，握手时使用 HTTP 协议，但是握手成功后，数据传输时使用 WebSocket 协议。
WebSocket 的 API 很简单，只需要通过 JavaScript 创建 WebSocket 对象，然后监听相应的事件即可。下面是一个简单的示例代码：
// javascriptcn.com 代码示例
var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('WebSocket 已连接');
};
ws.onmessage = function(event) {
console.log('收到消息：' + event.data);
};
ws.onclose = function() {
console.log('WebSocket 已关闭');
};上面的代码创建了一个 WebSocket 对象，并监听了三个事件：onopen（连接建立成功）、onmessage（收到消息）和onclose（连接关闭）。当服务器向客户端发送消息时，onmessage事件会被触发。
Socket.io 简介
Socket.io 是一个基于 WebSocket 的实时通讯库。它能够在客户端和服务器之间建立实时、双向的通讯，并且支持多种传输协议（如 WebSocket、XHR、JSONP 等）。Socket.io 采用事件驱动的方式，通过事件来传递消息。
Socket.io 有两个部分：客户端库和服务器库。客户端库可以在浏览器中直接使用，服务器库可以在 Node.js 中使用。下面是一个简单的示例代码：
// javascriptcn.com 代码示例
// 服务器端代码
var io = require('socket.io')(server);
io.on('connection', function(socket) {
console.log('有客户端连接');
socket.on('message', function(data) {
console.log('收到消息：' + data);
// 向客户端发送消息
socket.send('服务器收到消息：' + data);
});
socket.on('disconnect', function() {
console.log('客户端断开连接');
});
});
// 客户端代码
var socket = io.connect('http://localhost:8080');
socket.on('connect', function() {
console.log('连接成功');
});
socket.on('message', function(data) {
console.log('收到消息：' + data);
});
socket.on('disconnect', function() {
console.log('连接断开');
});
// 发送消息
socket.send('Hello, Server!');上面的代码创建了一个基于 Node.js 的服务器，并使用 Socket.io 库来处理客户端的连接。当客户端连接成功后，会触发connection事件，然后可以监听客户端发送的消息和断开连接事件。客户端也可以通过connect事件来监听连接成功事件，然后可以发送消息和监听服务器发送的消息。
总结
WebSocket 和 Socket.io 都是实现 Web 实时通讯的技术，它们可以使得 Web 应用能够实现实时、双向的通讯。WebSocket 是一种基于 TCP 的协议，它的 API 很简单，可以直接使用 JavaScript 来创建 WebSocket 对象。Socket.io 是一个基于 WebSocket 的实时通讯库，它支持多种传输协议，并且采用事件驱动的方式来传递消息。
在实际开发中，我们可以根据实际需求来选择使用 WebSocket 还是 Socket.io，它们都有各自的优点和适用场景。例如，WebSocket 适用于需要大量数据传输的场景，而 Socket.io 则适用于需要实现实时通讯和多协议支持的场景。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653b7db87d4982a6eb5d4cd9