阅读量:0
WebSocket是HTML5中一种全双工通信协议，允许客户端和服务器间进行持久性连接，实现实时双向数据传输。
HTML5中的WebSocket是一种在单个TCP连接上进行全双工通讯的协议，它允许客户端和服务器之间进行实时双向通信，以下是对HTML5中WebSocket的详细介绍：
WebSocket的基本概念
1、定义：WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。
2、作用：它使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
3、特点：WebSocket建立在TCP协议之上，与HTTP协议有着良好的兼容性，能通过各种HTTP代理服务器；数据格式比较轻量，性能开销小，通信高效；可以发送文本，也可以发送二进制数据；没有同源限制，客户端可以与任意服务器通信。
WebSocket的工作原理
WebSocket的工作原理可以分为三个阶段：握手、数据传输和断开连接。
1、握手：客户端发起WebSocket连接时，通过向服务器发送一个特殊的HTTP请求头来建立连接，服务器检查请求头中的特定字段，确认支持WebSocket协议后，发送特殊的HTTP响应头进行握手确认，握手成功后，双方建立了WebSocket连接，可以进行后续的数据传输。
2、数据传输：一旦建立了WebSocket连接，客户端和服务器可以通过该连接进行双向的实时数据传输，双方可以发送和接收消息，消息以帧的形式进行传输，WebSocket协议定义了不同类型的帧，如文本帧和二进制帧，用于传输不同类型的数据。
3、断开连接：当连接不再需要时，客户端或服务器可以发起关闭连接的请求，双方会交换特殊的关闭帧，以协商关闭连接，并确保双方都接收到了关闭请求。
WebSocket的API使用
在JavaScript中，可以通过WebSocket对象来创建WebSocket连接，并通过send()方法向服务器发送数据，通过onmessage()方法接收服务器返回的数据。
1、创建WebSocket对象：var ws = new WebSocket(url, [protocol]); url指定连接的URL，protocol是可选的，指定了可接受的子协议。
2、对象属性：readyState表示连接状态，是一个只读属性；bufferedAmount已被放入等待传输队列，但是还没有发出的UTF8文本字节数，也是只读属性。
3、对象事件：onopen 连接时触发；onclose 关闭时触发；onmessage 客户端接收服务端数据时触发；onerror 通信发生错误时触发。
4、对象方法：send() 用于向服务器发送数据；close() 关闭连接。
WebSocket的应用场景
WebSocket广泛应用于社交聊天、直播、弹幕、多玩家游戏、协同编辑、股票基金实时报价、体育实况更新、视频会议/聊天、基于位置的应用、在线教育、智能家居等需要高实时的场景。
FAQs
1、Q：WebSocket和HTTP有什么区别？
A：WebSocket可以实现双向通信，而HTTP是单向的，WebSocket只需一次握手就可以保持长链接，而HTTP每次请求都需要建立新的连接。
2、Q：为什么需要学习WebSocket？
A：WebSocket提供了一种高效的实时通信方式，适用于需要高实时性的应用场景，如在线游戏、实时聊天等。
HTML5中的WebSocket为开发者提供了一种强大的实时通信工具，它简化了客户端和服务器之间的数据交换过程，提高了通信效率，广泛应用于各种需要实时交互的场景中。
HTML5中的WebSocket
简介
WebSocket是一种网络通信协议，它提供了一种在单个TCP连接上进行全双工通信的机制，它允许服务器和客户端之间进行实时数据交换，而无需轮询（polling）或HTTP长轮询（long polling）等传统方法。
特点
全双工通信：WebSocket允许客户端和服务器同时进行数据交换，无需等待对方。
低延迟：由于是持久的连接，数据传输的延迟大大降低。
高效性：减少了HTTP请求的开销，减少了带宽的使用。
兼容性：尽管WebSocket在浏览器中得到了广泛支持，但也有一些旧版浏览器需要通过polyfill来支持。
建立连接
WebSocket连接的建立过程如下：
1、握手：客户端通过HTTP请求与服务器建立WebSocket连接，这个请求包含一个特定的Upgrade头，表明客户端希望将协议从HTTP升级到WebSocket。
2、服务器响应：如果服务器支持WebSocket，它会响应一个升级响应，并包含101 Switching Protocols状态码。
3、连接建立：一旦服务器确认升级，客户端和服务器之间的WebSocket连接就建立成功了。
API
HTML5提供了WebSocket API来操作WebSocket连接：
WebSocket：用于创建WebSocket连接。
onopen：连接打开时触发。
onmessage：接收到消息时触发。
onclose：连接关闭时触发。
onerror：发生错误时触发。
示例
以下是一个简单的WebSocket客户端和服务器端的示例：
服务器端（Python，使用websockets库）
import asyncio import websockets async def echo(websocket, path): async for message in websocket: await websocket.send(message) start_server = websockets.serve(echo, "localhost", 8765) asyncio.get_event_loop().run_until_complete(start_server) asyncio.get_event_loop().run_forever()
客户端（JavaScript）
const ws = new WebSocket("ws://localhost:8765"); ws.onopen = function() { console.log("WebSocket connection established."); ws.send("Hello, server!"); }; ws.onmessage = function(event) { console.log("Message from server: " + event.data); }; ws.onclose = function() { console.log("WebSocket connection closed."); }; ws.onerror = function() { console.log("WebSocket error."); };WebSocket是一种强大的技术，它使得实时通信变得简单而高效，在需要实时数据传输的应用中，如在线游戏、聊天应用等，WebSocket是非常有用的，通过上述介绍，我们可以看到WebSocket的建立过程、API以及一个简单的示例。
