怎么使用JavaScript操作WebSocket？-js教程-PHP中文网

怎么使用JavaScript操作WebSocket？

夢幻星辰

发布： 2025-09-18 23:35:01

原创

1052人浏览过

答案：使用JavaScript操作WebSocket需掌握连接、发送、接收和关闭四个核心步骤。首先创建WebSocket对象并监听onopen事件建立连接；通过send()方法发送字符串或二进制数据；设置onmessage事件接收服务器消息；通过close()关闭连接，并利用onclose和onerror处理关闭状态与错误；可通过readyState查看连接状态，binaryType设置二进制数据类型，实现稳定通信。

怎么使用javascript操作websocket？

使用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

登录后复制

用于处理连接过程中发生的错误。

PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用

一键操作，智能生成专业级PPT

查看详情

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数据
  }
};

登录后复制

根据