WebSocket API 是 HTML5 开发中的一项重要技术，它已经成为了高效和可扩展的实时通信方案。改变了以往 Web 应用客户端和服务端通信的限制，通过 WebSocket API，可以实现浏览器与服务器之间的双向通信，极大地增强了 Web 应用的功能，为开发高交互性、实时化的 Web 应用提供了极大的帮助。
一、WebSocket API 的基本使用方法
WebSocket API 的基本使用非常简单，只需要如下步骤：
1.创建 WebSocket 实例
const socket = new WebSocket('ws://' + window.location.href.split('/')[2] + '/websocket');
创建实例时需要指定连接的地址，本例中使用了当前页面的域名并指定了端口号。然后在服务端开启这个地址监听客户端的连接，客户端与服务端建立连接后就能发送消息，接收消息了。
2.连接成功事件监听
socket.onopen = function() {
console.log("连接成功！");
};
通过这个事件可以监听到连接是否建立成功，这个事件触发后表示浏览器与服务器已经成功建立连接，可以进行数据传输了。
3.接收服务端发来的消息
socket.onmessage = function(event) {
console.log("接收到消息：" + event.data);
};
使用 onmessage 方法可以接收到服务端发来的消息，消息在 event 对象 Data 中，我们可以通过 event.data 获取到。
4.发送消息给服务端
socket.send("Hello Server!");
使用 send 方法可以向服务器发送消息，这里我们向服务端发送了一条简单的消息 "Hello Server!"。
二、WebSocket API 的高级用法
WebSocket API 还支持更高级的特性，如分片、二进制传输、ping-pong 等等。
1、WebSocket 二进制传输
使用 WebSocket 接收和发送二进制数据非常方便。我们可以使用二进制数组和 Blob 对象来处理数据的传输。
const socket = new WebSocket("wss://my-websocket-server.com");
socket.binaryType = "arraybuffer";
socket.onmessage = function(event) {
const data = new Uint8Array(event.data);
console.log("接收到二进制数据：", data);
};
// 发送二进制数据
const array = new Uint8Array([1, 2, 3, 4, 5]);
socket.send(array.buffer);
// 或者
const blob = new Blob([array]);
socket.send(blob);
上述代码演示了如何发送和接收二进制数据，需要注意的是，在发送二进制数据之前，需要使用 binaryType 属性将 WebSocket 实例设置为可以接收二进制数据。
2、WebSocket 分片传输
WebSocket 分片传输可以将大型消息分成多个片段进行传输，防止网络繁忙时传输过程中出现阻塞或延迟。
const socket = new WebSocket("wss://my-websocket-server.com");
const message = "Hello, world!";
const chunkSize = 1024;
const chunks = [];
while (message.length) {
chunks.push(message.slice(0, chunkSize));
message = message.slice(chunkSize);
}
chunks.forEach(function(chunk, index) {
const isLastChunk = index === chunks.length - 1;
socket.send(chunk, {
binary: false,
fin: isLastChunk
});
});
上述代码演示了如何将大型消息分成小块从而进行更快速和可靠的传输。
3、Ping-Pong 消息
WebSocket 可以通过 ping-pong 消息维持连接状态，避免连接断开。
const socket = new WebSocket("wss://my-websocket-server.com");
socket.onmessage = function(event) {
if (event.data === "ping") {
socket.send("pong");
}
};
setInterval(function() {
socket.send("ping");
}, 1000);
上述代码演示了如何定期发送 ping 消息，并在服务器返回 pong 消息后发送新的 ping 消息，从而维持连接状态。
三、本地测试 WebSocket API
我们可以在本地使用一些库或框架来模拟 WebSocket API 实现本地测试。
1、FakeWebSocket.js
FakeWebSocket.js 是一个可以在浏览器中模拟 WebSocket API 的库，用于本地测试 WebSocket 应用程序。可以拦截 WebSocket 上的所有操作，从而检查程序中发生的所有事情。
<script src="https://cdn.jsdelivr.net/gh/mozilla-services/react-jsonschema-form/playground/fake-websocket.js"></script>
<script>
const socket = new FakeWebSocket();
socket.on("open", function(event) {
console.log(event);
});
socket.on("message", function(event) {
console.log(event.data);
});
socket.on("close", function(event) {
console.log(event);
});
socket.send("Hello WebSocket Server!");
</script>
2、Socket.io
Socket.io 可以同时支持 WebSocket 和 HTTP 长轮询等多种传输方式，并提供了很多开箱即用的功能，包括事件、命名空间、房间等等。我们可以使用它作为本地测试 WebSocket API 的工具。
npm install socket.io
使用以下代码启动 Socket.io 服务器。
const io = require("socket.io")(3000);
io.on("connection", function(socket) {
console.log("A user connected.");
socket.on("message", function(message) {
console.log("Received message:", message);
});
socket.on("disconnect", function() {
console.log("A user disconnected.");
});
});
我们可以使用以下代码连接到 Socket.io 服务器：
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io.connect("http://localhost:3000");
socket.on("connect", function() {
console.log("Connected to Socket.io server.");
});
socket.on("message", function(message) {
console.log("Received message:", message);
});
socket.on("disconnect", function() {
console.log("Disconnected from Socket.io server.");
});
socket.send("Hello Socket.io server!");
</script>
四、总结
WebSocket API 是一项非常重要的技术，它提供了一种实时且可扩展的通信方案，提高了 Web 应用的速度和交互性。文章阐述了 WebSocket API 的基本使用方法和高级特性，并提供了本地测试 WebSocket API 的两种方案。希望本文能够对大家了解 WebSocket API 有所帮助。
