知识问答
如何全面掌握HTML5 WebSockets的全双工通信机制？
HTML5的WebSockets全双工通信是一种在单个TCP连接上进行双向数据传输的高级技术，它通过一次HTTP握手升级为WebSocket协议，从而允许服务器和客户端高效、实时地进行数据交换。
WebSocket的基本概念
1、WebSocket握手：为了建立WebSocket通信，客户端和服务器在初始握手时将HTTP协议升级到WebSocket协议，一旦连接建立成功，就可以在全双工模式下在客户端和服务器之间来回传送WebSocket消息。
2、WebSocket接口：WebSocket接口提供了与WebSocket服务器交互的API，包括URL、readyState、bufferedAmount等属性，以及onopen、onmessage、onclose事件处理函数和send、close方法。
WebSocket的使用方法
1、检测浏览器支持：可以通过window.WebSocket来判断浏览器是否支持WebSocket。
2、创建WebSocket对象并连接：使用new WebSocket(url)来创建WebSocket对象并与服务器建立连接。
3、添加事件**器：WebSocket遵循异步编程模型，需要添加回调函数来**open、message和close事件。
4、发送消息：当socket处于打开状态时，可以使用send方法发送消息。
WebSocket的应用示例
以下是一个结合Geolocation接口的WebSocket应用示例，展示了如何在Web页面中计算距离：
<!DOCTYPE html><html><head> <title>HTML5 WebSocket / Geolocation 追踪器</title></head><body> <h1>HTML5 WebSocket / Geolocation 追踪器</h1> <p id="websocketStatus">WebSocket: </p> <p id="geolocationStatus">Geolocation: </p> <ｓｃｒｉｐｔ> var ws; var myId = Math.random().toString(36).substring(7); // 生成唯一随机ID function loadDemo() { if (!window.WebSocket) { document.getElementById('websocketStatus').innerHTML = "你的浏览器不支持HTML5 Web Sockets"; return; } ws = new WebSocket("ws://localhost:8080"); ws.onopen = function () { updateSocketStatus("连接已建立"); }; ws.onmessage = function (e) { updateSocketStatus("更新位置数据：" + dataReturned(e.data)); }; if (!navigator.geolocation) { document.getElementById('geolocationStatus').innerHTML = "你的浏览器不支持HTML5 Geolocation"; return; } navigator.geolocation.watchPosition(updateLocation, handleLocationError, {maximumAge: 20000}); // 每20秒更新一次 } function updateLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var timestamp = position.timestamp; updateGeolocationStatus("位置更新时间：" + timestamp); var toSend = JSON.stringify([myId, latitude, longitude]); sendMyLocation(toSend); } function updateSocketStatus(status) { document.getElementById('websocketStatus').innerHTML = status; } function updateGeolocationStatus(status) { document.getElementById('geolocationStatus').innerHTML = status; } function sendMyLocation(toSend) { ws.send(toSend); } function handleLocationError(error) { switch(error.code) { case error.PERMISSION_DENIED: updateGeolocationStatus("用户拒绝了对地理位置的访问"); break; case error.POSITION_UNAVAILABLE: updateGeolocationStatus("位置信息不可用"); break; case error.TIMEOUT: updateGeolocationStatus("请求用户地理位置超时"); break; case error.UNKNOWN_ERROR: updateGeolocationStatus("发生未知错误"); break; } } loadDemo(); </ｓｃｒｉｐｔ></body></html>FAQs
问题1：WebSocket与传统HTTP轮询相比有什么优势？
答：WebSocket相比传统HTTP轮询具有显著的优势，WebSocket只需要进行一次握手，之后就可以在客户端和服务器之间直接创建持久连接，进行双向数据传输，而不需要每次都重新建立连接，WebSocket减少了不必要的网络流量和延迟，因为它避免了每次请求都携带完整的HTTP头部信息，WebSocket支持全双工通信，即客户端和服务器可以同时发送数据，这大大提高了实时性，特别适用于在线游戏、聊天室等实时应用。
问题2：如何检测浏览器是否支持WebSocket？
答：可以通过检查window对象上是否存在WebSocket属性来检测浏览器是否支持WebSocket，如果存在该属性，则表示浏览器支持WebSocket；否则，表示不支持。
if (window.WebSocket) { // 浏览器支持WebSocket} else { // 浏览器不支持WebSocket}| 序号 | 概念/功能 | 说明 |
| 1 | WebSocket协议 | WebSocket协议是一种在单个TCP连接上进行全双工通信的协议，它允许服务器和客户端之间进行实时、双向的数据交换。 |
| 2 | WebSocket API | WebSocket API是HTML5提供的一套用于在浏览器和服务器之间进行WebSocket通信的API。 |
| 3 | WebSocket连接 | WebSocket连接是客户端与服务器之间建立的一个持久连接，用于实现全双工通信，连接建立后，双方可以随时发送和接收消息。 |
| 4 | WebSocket事件 | WebSocket API定义了几个事件，用于处理WebSocket连接的建立、消息接收、错误处理等。 |
| 5 | WebSocket连接事件 | WebSocket连接事件包括：onopen、onclose、ｏｎｅｒｒｏｒ、onmessage。 |
| 6 | onopen事件 | 当WebSocket连接成功建立时触发。 |
| 7 | onclose事件 | 当WebSocket连接关闭时触发。 |
| 8 | ｏｎｅｒｒｏｒ事件 | 当WebSocket连接发生错误时触发。 |
| 9 | onmessage事件 | 当WebSocket接收到消息时触发。 |
| 10 | WebSocket连接建立步骤 | 1. 客户端向服务器发送一个特殊的HTTP请求，请求建立WebSocket连接，2. 服务器收到请求后，响应一个HTTP请求，包含WebSocket协议升级信息，3. 客户端和服务器完成握手，建立WebSocket连接。 |
| 11 | WebSocket消息发送 | 客户端和服务器通过WebSocket连接发送和接收消息，消息可以是文本或二进制数据。 |
| 12 | WebSocket消息类型 | WebSocket消息类型包括：文本消息、二进制消息、关闭消息。 |
| 13 | 文本消息 | 文本消息是使用UTF8编码的字符串，客户端和服务器可以使用文本消息进行通信。 |
| 14 | 二进制消息 | 二进制消息可以是任何二进制数据，例如图片、音频等。 |
| 15 | 关闭消息 | 关闭消息用于关闭WebSocket连接。 |
以下是一个简单的HTML5 WebSocket通信示例：
<!DOCTYPE html><html><head> <title>WebSocket通信示例</title></head><body> <input type="text" id="messageInput" placeholder="输入消息"> <button onclick="sendMessage()">发送消息</button> <p id="messageOutput"></p> <ｓｃｒｉｐｔ> var ws = new WebSocket('ws://localhost:8080'); // 假设服务器地址为 ws://localhost:8080 ws.onopen = function() { console.log('WebSocket连接已建立'); }; ws.onmessage = function(event) { var messageOutput = document.getElementById('messageOutput'); messageOutput.innerHTML += '接收到消息：' + event.data + '<br>'; }; ws.ｏｎｅｒｒｏｒ = function(error) { console.error('WebSocket连接发生错误：', error); }; ws.onclose = function() { console.log('WebSocket连接已关闭'); }; function sendMessage() { var messageInput = document.getElementById('messageInput'); var message = messageInput.value; ws.send(message); messageInput.value = ''; // 清空输入框 } </ｓｃｒｉｐｔ></body></html>在上述示例中，客户端通过WebSocket连接向服务器发送消息，服务器接收到消息后，将消息显示在页面上。
