随着互联网技术的飞速发展，实时通信（RTC）在Web应用中的地位日益重要。HTML5中的WebSockets API作为一种实现全双工通信的机制，为Web应用提供了强大的实时通信能力。本文将详细解析WebSockets API的原理、使用方法以及在实际项目中的应用。
一、WebSockets API简介
WebSockets API是HTML5提供的一种在单个TCP连接上进行全双工通信的协议。与传统的HTTP请求/响应模式不同，WebSockets允许服务器主动向客户端发送消息，从而实现了真正的实时通信。WebSockets API的使用场景包括但不限于在线聊天、实时数据更新、多人在线游戏等。
二、WebSockets API工作原理
WebSocket连接是通过HTTP握手建立的。客户端首先向服务器发送一个HTTP请求，请求升级连接到WebSocket。这个请求中包含了WebSocket协议的版本、支持的子协议以及一些自定义的头信息。服务器收到请求后，如果支持WebSocket，就会返回一个101 Switching Protocols响应，表示同意升级到WebSocket连接。一旦连接建立，客户端和服务器就可以通过这个连接进行全双工通信了。
三、WebSockets API使用方法
创建WebSocket对象
要使用WebSockets API，首先需要在客户端创建一个WebSocket对象。这个对象需要一个URL参数，指向WebSocket服务器。
javascript
var socket = new WebSocket('ws://example.com/socketserver');
注意，WebSocket的URL以“ws://”开头，表示使用的是非加密连接。如果需要加密连接，则应使用“wss://”。
监听事件
WebSocket对象提供了一系列事件供开发者监听，包括连接打开（open）、接收到消息（message）、连接关闭（close）以及发生错误（error）等。通过为这些事件绑定处理函数，开发者可以实现对WebSocket连接的全方位控制。
javascript
socket.onopen = function(event) {
console.log('WebSocket连接已打开');
};
socket.onmessage = function(event) {
console.log('收到消息：', event.data);
};
socket.onclose = function(event) {
console.log('WebSocket连接已关闭');
};
socket.onerror = function(event) {
console.log('WebSocket发生错误');
};
发送消息
当WebSocket连接打开后，客户端可以通过WebSocket对象的send()方法向服务器发送消息。发送的消息可以是字符串、Blob或ArrayBuffer对象。
javascript
socket.send('Hello, WebSocket!');
四、WebSockets API应用实例：实时在线聊天室
下面以一个简单的实时在线聊天室为例，说明如何使用WebSockets API实现实时通信。
服务器端（Node.js + ws模块）
首先，安装ws模块：
bash
npm install ws
然后，创建一个简单的WebSocket服务器：
javascript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
ws.on('message', (message) => {
wss.clients.forEach((client) => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
这个服务器会监听8080端口，当有客户端连接时，会将收到的消息广播给所有其他连接的客户端。
客户端（HTML + JavaScript）
在HTML页面中，我们使用WebSockets API连接服务器并发送/接收消息：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实时在线聊天室</title>
</head>
<body>
<textarea id="chatbox" readonly style="width: 100%; height: 200px;"></textarea><br>
<input type="text" id="message" placeholder="输入消息">
<button οnclick="sendMessage()">发送</button>
<script>
var socket = new WebSocket('ws://localhost:8080');
var chatbox = document.getElementById('chatbox');
var messageInput = document.getElementById('message');
socket.onmessage = function(event) {
chatbox.value += event.data + '\n';
};
function sendMessage() {
socket.send(messageInput.value);
messageInput.value = '';
}
</script>
</body>
</html>
来自：www.999sheng.com
来自：www.kxmaoyi.com
