HTML5 通信

### HTML5 通信

HTML5引入了几种新的通信技术，使得Web应用能够实现更高效的数据交换和实时通信。以下是两种主要的通信技术：

#### WebSockets

WebSockets提供了一个全双工通信渠道，通过一个单一的长连接允许服务器主动向客户端发送消息，客户端也可以向服务器发送消息。

1. **创建WebSocket连接**：
   使用`WebSocket`对象创建一个新的连接。
   ```javascript
   var socket = new WebSocket('wss://example.com/socket');
   ```

2. **监听连接事件**：
   可以监听连接的打开、消息、错误和关闭事件。
   ```javascript
   socket.onopen = function(event) {
     console.log('Connection established');
   };

socket.onmessage = function(event) {
     console.log('Message from server:', event.data);
   };

socket.onerror = function(event) {
     console.error('WebSocket error:', event);
   };

socket.onclose = function(event) {
     console.log('WebSocket connection closed');
   };
   ```

3. **发送和接收消息**：
   通过`send`方法发送消息，通过`onmessage`事件接收消息。
   ```javascript
   socket.send('Hello, server!');
   ```

4. **关闭连接**：
   使用`close`方法关闭WebSocket连接。
   ```javascript
   socket.close();
   ```

WebSockets适用于需要实时数据传输的应用，如在线游戏、实时聊天应用和股票交易平台。

#### Server-Sent Events (SSE)

Server-Sent Events允许服务器向客户端推送数据，是一种单向通信机制。与WebSockets不同，SSE主要用于服务器向客户端发送消息，而不是客户端向服务器发送消息。

1. **创建SSE连接**：
   使用`EventSource`对象创建一个新的连接。
   ```javascript
   var eventSource = new EventSource('sse.php');
   ```

2. **监听消息事件**：
   可以监听`message`事件来接收服务器发送的消息。
   ```javascript
   eventSource.onmessage = function(event) {
     console.log('Message from server:', event.data);
   };
   ```

3. **监听自定义事件**：
   服务器可以发送自定义事件，客户端可以监听这些事件。
   ```javascript
   eventSource.addEventListener('customEvent', function(event) {
     console.log('Custom event:', event.data);
   });
   ```

4. **关闭连接**：
   使用`close`方法关闭SSE连接。
   ```javascript
   eventSource.close();
   ```

Server-Sent Events适用于需要服务器向客户端单向推送数据的场景，如新闻订阅、股票价格更新和实时通知。

### 总结

WebSockets和Server-Sent Events都是HTML5提供的强大的通信API，它们使得Web应用能够实现更高效的数据交换和实时通信。WebSockets适用于需要双向通信的场景，而SSE适用于服务器向客户端的单向数据推送。开发者可以根据应用的具体需求选择合适的技术。