HTML5 WebSocket API 提供了一种在单个连接上进行全双工通信的方式。这意味着客户端和服务器可以同时发送和接收数据，而不需要像传统的 HTTP 请求那样进行多次请求和响应的轮询。WebSocket 允许更实时的交互，非常适合需要快速、连续数据交换的应用场景，如在线游戏、实时通讯和股票行情更新等。
以下是使用 WebSocket 的基本步骤：
1. **创建 WebSocket 对象**：
创建一个新的 WebSocket 对象，指定服务器的 URL。
```javascript
var ws = new WebSocket('ws://example.com/socketserver');
```
2. **连接到服务器**：
当 WebSocket 对象创建后，它会自动尝试连接到指定的服务器。连接成功后，会触发 `onopen` 事件。
```javascript
ws.onopen = function(event) {
console.log('Connection open ...');
// 可以在这里发送消息到服务器
ws.send('Hello Server!');
};
```
3. **接收服务器消息**：
当服务器发送消息时，会触发 `onmessage` 事件。
```javascript
ws.onmessage = function(event) {
console.log('Message from server:', event.data);
};
```
4. **发送消息到服务器**：
使用 `send` 方法向服务器发送数据。
```javascript
ws.send('Hello Server!');
```
5. **处理错误**：
当连接过程中发生错误时，会触发 `onerror` 事件。
```javascript
ws.onerror = function(error) {
console.error('WebSocket Error:', error);
};
```
6. **关闭连接**：
使用 `close` 方法关闭 WebSocket 连接。
```javascript
ws.close();
```
7. **处理关闭事件**：
当连接关闭时，会触发 `onclose` 事件。
```javascript
ws.onclose = function(event) {
console.log('Connection closed');
};
```
8. **重连机制**：
在某些情况下，可能需要实现自动重连机制，比如在连接断开时尝试重新连接。
```javascript
function connect() {
ws = new WebSocket('ws://example.com/socketserver');
ws.onopen = function(event) {
// ...
};
ws.onclose = function(event) {
// 尝试重连
console.log('Attempting to reconnect...');
setTimeout(connect, 1000);
};
// ...
}
```
WebSocket 还支持子协议，允许客户端和服务器之间协商使用特定的通信协议。此外，还有 `Sec-WebSocket-Protocol` 和 `Sec-WebSocket-Extensions` 等 HTTP 头部用于协商这些子协议和扩展。
请注意，WebSocket 连接是持久的，但它们可能会因为多种原因而断开，例如网络问题、服务器重启或客户端关闭。因此，实现适当的错误处理和重连逻辑是很重要的。
