答案：使用JavaScript操作WebSocket需掌握连接、发送、接收和关闭四个核心步骤。首先创建WebSocket对象并监听onopen事件建立连接；通过send()方法发送字符串或二进制数据；设置onmessage事件接收服务器消息；通过close()关闭连接，并利用onclose和onerror处理关闭状态与错误；可通过readyState查看连接状态，binaryType设置二进制数据类型，实现稳定通信。
使用JavaScript操作WebSocket，简单来说，就是建立连接、发送消息、接收消息和关闭连接这几个步骤。理解了这几个核心操作，就能玩转WebSocket了。
解决方案
- 建立WebSocket连接
首先，你需要创建一个WebSocket对象，并传入WebSocket服务器的URL。这个URL以
ws://或
wss://开头（
wss://表示安全的WebSocket连接）。
const socket = new WebSocket('ws://example.com/socketserver'); // 替换为你的WebSocket服务器地址
socket.onopen = () => {
console.log('WebSocket连接已建立');
// 连接建立后，你可以发送消息
socket.send('你好，服务器！');
};这里，
socket.onopen是一个事件监听器，当连接成功建立时会被触发。
立即学习“Java免费学习笔记（深入）”；
- 发送消息
使用
socket.send()方法可以向服务器发送消息。消息可以是字符串、ArrayBuffer或Blob对象。
socket.send('这是一条消息'); // 发送字符串
socket.send(new Uint8Array([1, 2, 3])); // 发送ArrayBuffer需要注意的是，发送大量数据时，最好将其分割成小块，避免阻塞连接。
- 接收消息
当服务器向客户端发送消息时，
socket.onmessage事件会被触发。
socket.onmessage = (event) => {
const message = event.data; // 接收到的消息
console.log('收到消息：', message);
// 处理接收到的消息
};event.data包含了服务器发送的数据。根据数据的类型，你可能需要进行一些处理，比如将JSON字符串解析成对象。
- 关闭连接
使用
socket.close()方法可以关闭WebSocket连接。
socket.onclose = (event) => {
if (event.wasClean) {
console.log(`连接已关闭，code=${event.code}, reason=${event.reason}`);
} else {
console.error('连接意外断开');
}
};
socket.onerror = (error) => {
console.error('WebSocket错误：', error);
};
// 在适当的时候关闭连接
// socket.close(1000, '正常关闭');socket.onclose事件监听器会在连接关闭时被触发。
event.wasClean表示连接是否正常关闭，
event.code和
event.reason提供了关闭的原因。
socket.onerror用于处理连接过程中发生的错误。
WebSocket连接状态有哪些？
WebSocket对象有几个状态，了解这些状态可以帮助你更好地管理连接。
CONNECTING
(0): 连接正在建立中。OPEN
(1): 连接已建立，可以进行数据传输。CLOSING
(2): 连接正在关闭中。CLOSED
(3): 连接已关闭或无法建立。
你可以通过
socket.readyState属性来获取当前连接的状态。例如：
if (socket.readyState === WebSocket.OPEN) {
socket.send('状态正常，发送消息');
} else {
console.log('连接状态：', socket.readyState);
}如何处理WebSocket连接错误？
WebSocket连接可能会因为各种原因失败，比如服务器不可用、网络问题或协议错误。你需要适当地处理这些错误，以提供更好的用户体验。
除了
socket.onerror事件监听器，你还可以在
socket.onclose事件监听器中检查
event.code和
event.reason来判断关闭的原因。
例如，如果
event.code是1006，通常表示连接意外断开。你可以尝试重新连接。
socket.onclose = (event) => {
if (event.code === 1006) {
console.log('连接意外断开，尝试重新连接...');
setTimeout(() => {
// 重新建立连接的代码
const newSocket = new WebSocket('ws://example.com/socketserver');
// ...
}, 3000); // 3秒后重试
} else {
console.log(`连接已关闭，code=${event.code}, reason=${event.reason}`);
}
};如何在JavaScript中使用WebSocket发送和接收二进制数据？
WebSocket不仅可以发送和接收文本数据，还可以发送和接收二进制数据，比如图像、音频或视频。
要发送二进制数据，你可以使用
ArrayBuffer或
Blob对象。
// 发送ArrayBuffer
const buffer = new Uint8Array([0, 1, 2, 3]).buffer;
socket.send(buffer);
// 发送Blob
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
socket.send(blob);要接收二进制数据，你需要设置
socket.binaryType属性。
socket.binaryType可以是
'blob'或
'arraybuffer'。
socket.binaryType = 'arraybuffer'; // 或 'blob'
socket.onmessage = (event) => {
if (event.data instanceof ArrayBuffer) {
const buffer = event.data;
console.log('接收到ArrayBuffer数据：', buffer);
// 处理ArrayBuffer数据
} else if (event.data instanceof Blob) {
const blob = event.data;
console.log('接收到Blob数据：', blob);
// 处理Blob数据
}
};根据
socket.binaryType的设置，
event.data会是
ArrayBuffer或
Blob对象。你需要根据数据的类型进行相应的处理。例如，如果接收到的是图像数据，你可以将其转换为
<img>元素的
src属性。
