❝前期回顾：
1. Page Visibility API
2. Broadcast Channel API
3. Beacon API
4. Resize Observer API
5. Clipboard API
6. Fetch API
7. Performance API
8. Web Storage API
❞
WebSockets API 提供了一种在客户端和服务器之间建立持久连接的机制，使得实时数据的传输变得更加简单和高效。
🏝 1. 什么是 WebSockets API
1.1 概念介绍
WebSockets API 「允许在浏览器和服务器之间进行双向通信」。相比传统的 HTTP 请求-响应模式，WebSockets 允许服务器主动向客户端推送数据，实现实时性和双向通信。它建立在标准的 HTTP 协议之上，使用标准的 WebSocket URL 进行通信。
1.2 作用和使用场景
WebSockets API 有许多有用的场景场景，包括实时聊天应用、多人协作工具、实时数据监控和游戏等。通过使用 WebSockets，开发者可以轻松地实现实时更新、即时通知和实时数据传输等功能，提供更好的用户体验。
🎨 2. 如何使用 WebSockets API
WebSockets API 的使用相对简单，只需要几个基本步骤：
「建立 WebSocket 连接」
在客户端代码中，使用 JavaScript 创建一个 WebSocket 对象，并通过 WebSocket URL 建立与服务器的连接。
const socket = new WebSocket("ws://example.com/socket");「处理连接事件」
在连接建立后，WebSocket 对象会触发不同的事件，我们可以监听这些事件来处理连接状态和接收数据。
socket.onopen = () => {console.log("WebSocket 连接已建立");
};socket.onmessage = (event) => {console.log("收到消息:", event.data);
};socket.onclose = () => {console.log("WebSocket 连接已关闭");
};「发送和接收数据」
通过 WebSocket 对象的 send() 方法发送数据到服务器，服务器可以使用 send() 方法将数据发送给客户端。
// 发送数据
socket.send("Hello, Server!");// 接收数据
socket.onmessage = (event) => {console.log("收到消息:", event.data);
};「关闭连接」
当不再需要使用 WebSocket 连接时，可以通过调用 WebSocket 对象的 close() 方法来关闭连接。
socket.close();🧭 3. WebSockets API 的实际应用
WebSockets API 在许多实际应用中发挥着重要作用。下面是几个常见的应用场景：
3.1 实时聊天应用
WebSockets 可以用于构建实时聊天应用，其中用户可以实时地发送和接收消息。通过建立持久的 WebSocket 连接，用户可以即时收到其他用户发送的消息，从而实现实时的聊天体验。
// 客户端代码
const socket = new WebSocket("ws://example.com/chat");socket.onmessage = (event) => {const message = JSON.parse(event.data);displayMessage(message);
};function sendMessage(message) {socket.send(JSON.stringify(message));
}3.2 实时数据监控
WebSockets 可以用于监控实时数据的变化。例如，一个实时股票市场监控应用可以通过 WebSocket 连接获取实时的股票价格，并将其实时显示给用户。
// 客户端代码
const socket = new WebSocket("ws://example.com/stocks");socket.onmessage = (event) => {const stockData = JSON.parse(event.data);displayStockPrices(stockData);
};3.3 游戏开发
WebSockets API 为多人游戏开发提供了强大的基础。游戏服务器可以使用 WebSockets 与客户端建立双向通信，并实时传输游戏状态和玩家的动作。
// 客户端代码
const socket = new WebSocket("ws://example.com/game");socket.onmessage = (event) => {const gameData = JSON.parse(event.data);updateGame(gameData);
};function sendPlayerAction(action) {socket.send(JSON.stringify(action));
}📋 4. 兼容性和优缺点
4.1 兼容性
以下是 WebSockets API 的兼容性列表，包含了主流浏览器及其支持的最低版本：
Chrome 4+✅
Firefox 4+✅
Safari 5+✅
Edge 12+✅
Opera 11.5+✅
Internet Explorer 10+✅
iOS Safari 4.2+✅
Android Browser 4.4+✅
Chrome for Android 33+✅
Firefox for Android 4+✅
可以在 Can I use[1] 网站上查看 WebSockets API 的兼容性详情。
4.2 优缺点
WebSockets API 具有以下优点：
「实时性」
通过建立持久连接，实现「实时数据传输」和「双向通信」。
「较低的延迟」
相比传统的轮询机制，WebSockets 可以「减少无效的请求和响应」，降低延迟。
「节省带宽」
由于「不需要频繁的请求和响应」，WebSockets 在传输数据方面更加高效。
然而，WebSockets API 也有一些缺点：
「兼容性问题」
尽管现代浏览器广泛支持 WebSockets，但某些旧版本浏览器可能不支持或存在一些限制。在设计应用程序时，需要考虑到兼容性问题，并提供备选方案来处理不支持 WebSockets 的情况。
「服务器开销」
与传统的 HTTP 请求-响应模式相比，WebSockets 需要服务器维护持久连接，这可能增加服务器的负载。
「安全性考虑」
由于 WebSockets 允许服务器主动推送数据到客户端，因此需要仔细考虑安全性问题，防止潜在的安全漏洞。
4.3 工具推荐
推荐几个常用工具：
Socket.IO[2] 58.2K⭐
一个面向实时应用程序的 JavaScript 框架，提供了跨浏览器的双向通信。它支持实时聊天、实时分析和实时协作等场景。
ws[3] 19.8K⭐
一个简单易用的 WebSocket 客户端和服务器库，适用于 Node.js。它提供了基本的 WebSocket 功能，并支持自定义扩展。
uWebSockets[4] 15.4K⭐
一个快速、轻量级的 WebSocket 库，可用于构建高性能的实时应用程序。它提供了简单易用的接口，并支持多线程和事件驱动的架构。
SignalR[5] 8.9K⭐
一个为 ASP.NET 开发人员提供的实时 Web 功能库，可在浏览器和服务器之间建立双向通信。它支持多种客户端技术，包括 JavaScript、.NET 和 Xamarin。
sockjs-client[6] 8.2K⭐
一个用于创建跨浏览器实时应用程序的 JavaScript 库，它提供了类似 WebSocket 的 API，并在不支持 WebSocket 的浏览器中使用轮询技术进行回退。
👍 5. 使用建议和注意事项
以下是一些使用建议和注意事项：
「考虑兼容性」
在设计和实施应用程序时，需要考虑到不同浏览器和平台的兼容性，并提供备选方案来处理不支持 WebSockets 的情况。
「处理连接中断」
在客户端代码中，需要处理连接中断和错误的情况，例如网络故障或服务器断开连接。可以通过监听 onclose 和 onerror 事件来捕获这些情况。
「安全性措施」
确保对 WebSocket 连接进行适当的安全性措施，以防止潜在的安全漏洞和攻击。使用安全的连接（wss://）和合适的认证和授权机制。
「考虑服务器负载」
由于 WebSockets 需要维护持久连接，服务器的负载可能会增加。在设计服务器架构时，需考虑负载均衡和扩展性。
「数据传输量控制」
注意控制数据传输量，避免过多的数据传输对带宽和性能产生负面影响。
🍭 6. 总结
WebSockets API 为实时性和双向通信提供了便捷的解决方案。通过使用 WebSockets，开发者可以轻松构建实时聊天应用、实时数据监控和多人游戏等应用程序。WebSockets API 的广泛支持和强大功能使其成为现代 Web 开发中不可或缺的一部分。通过合理的使用和注意事项，我们可以充分利用 WebSockets 实现更好的用户体验和功能。
🎯 7. 拓展阅读
WebSockets API 文档[7]
WebSockets 兼容性[8]
Introducing WebSockets - Bringing Sockets to the Web[9]
Reference
[1]
Can I use: https://caniuse.com/?search=websockets
[2]Socket.IO: https://socket.io/
[3]ws: https://github.com/websockets/ws
[4]uWebSockets: https://github.com/uWebSockets/uWebSockets
[5]SignalR: https://github.com/SignalR/SignalR
[6]sockjs-client: https://github.com/sockjs/sockjs-client
[7]WebSockets API 文档: https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
[8]WebSockets 兼容性: https://caniuse.com/websockets
[9]Introducing WebSockets - Bringing Sockets to the Web: https://web.dev/websockets-basics/
往期回顾
#
如何使用 TypeScript 开发 React 函数式组件？
#
11 个需要避免的 React 错误用法
#
6 个 Vue3 开发必备的 VSCode 插件
#
3 款非常实用的 Node.js 版本管理工具
#
6 个你必须明白 Vue3 的 ref 和 reactive 问题
#
6 个意想不到的 JavaScript 问题
#
试着换个角度理解低代码平台设计的本质
回复“加群”，一起学习进步
