文章目录
- 前言
- 一、概念
- 二、案例
- 三、属性
- 四、事件
- 五、方法
- 六、常见问题
前言
HTML5是HTML的最新版本，它引入了许多新的元素和功能，以适应现代网页开发的需求。以下是HTML5的一些主要特点：
- 新增语义元素：HTML5引入了许多新的语义元素，如
<header>、<footer>、<article>、<section>等，这些元素有助于提高网页的结构化和可访问性。 - 媒体支持：HTML5引入了
<audio>和<video>元素，使得开发者可以在网页上直接嵌入音频和视频内容，而不需要依赖第三方插件。 - Canvas绘图：HTML5引入了
<canvas>元素，使得开发者可以使用JavaScript在网页上绘制图形和动画。 - 语义化标签：HTML5的语义化标签使得网页的结构更加清晰和易于理解。例如，使用
<nav>元素表示导航链接，使用<article>元素表示独立的内容等。 - 交互性：HTML5提供了更多的API和事件处理程序，使得开发者可以创建更加交互式的网页和应用。例如，拖放功能、文件上传和下载、地理定位等。
- 离线和存储：HTML5提供了离线存储和会话存储功能，使得开发者可以在用户的设备上存储数据，以便在离线时使用。
- 更好的表单控制：HTML5改进了表单元素和输入类型，使得表单的验证和输入更加方便和智能。
HTML5是一个非常强大的工具，它为开发者提供了更多的功能和灵活性，使得他们可以创建出更加丰富、交互性更强、功能更全面的网页和应用。
一、概念
WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。它使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
当获取WebSocket连接后，可以通过send()方法来向服务器发送数据，并通过onmessage事件来接收服务器返回的数据。同时，WebSocket协议也提供了一些额外的机制，如关闭连接、发送广播消息等。
WebSocket的优点包括：
- 持久连接：WebSocket保持了TCP连接的开启状态，避免了HTTP协议中频繁的握手操作，提高了数据传输的效率和实时性。
- 双向通信：WebSocket允许客户端和服务器之间进行双向通信，即同时支持客户端向服务器发送数据和服务器向客户端推送数据。
- 自定义协议：WebSocket可以与各种应用层协议一起使用，如HTTP、MQTT等。这使得WebSocket在各种应用场景下都能够得到广泛的应用。
- 跨域通信：WebSocket支持跨域通信，即客户端和服务器可以在不同的域名下进行通信。
- 协议透明：WebSocket是一种透明的协议，对于开发者来说，它就像一个普通的TCP连接一样，可以发送任何类型的数据。
WebSocket是一个非常强大和灵活的协议，适用于需要实时通信的Web应用程序，如在线游戏、聊天室、股票交易等。
二、案例
要在HTML5中使用WebSocket，您需要创建一个新的WebSocket对象，并指定要连接到的服务器的URL。以下是一个示例：
var socket = new WebSocket("ws://example.com/socket");
// WebSocket event listeners
socket.onopen = function() {
console.log("WebSocket connection established.");
};
socket.onmessage = function(event) {
var message = event.data;
console.log("Received message: " + message);
};
socket.onclose = function(event) {
console.log("WebSocket connection closed with code: " + event.code);
};
// Sending messages
socket.send("Hello, server!");
// Closing the connection
socket.close();
在上面的例子中，WebSocket对象是用URL“ws://example.com/socket”创建的。当成功建立连接时，会触发onopen事件侦听器。当从服务器接收到新消息时，onmessage事件侦听器会被触发。当连接关闭时，会触发onclose事件侦听器。
您可以使用WebSocket对象的send方法向服务器发送消息。close方法用于关闭WebSocket连接。
WebSocket提供了实时双向通信通道，适用于需要实时更新的应用程序，如聊天应用程序、实时游戏和协作编辑工具。
三、属性
| 属性 | 描述 |
|---|---|
| Socket.readyState | 只读属性 readyState 表示连接状态，可以是以下值：0 - 表示连接尚未建立。1 - 表示连接已建立，可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。 |
| Socket.bufferedAmount | 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。 |
四、事件
| 事件 | 事件处理程序 | 描述 |
|---|---|---|
| open | Socket.onopen | 连接建立时触发 |
| message | Socket.onmessage | 客户端接收服务端数据时触发 |
| error | Socket.onerror | 通信发生错误时触发 |
| close | Socket.onclose | 连接关闭时触发 |
五、方法
| 方法 | 描述 |
|---|---|
| Socket.send() | 使用连接发送数据 |
| Socket.close() | 关闭连接 |
六、常见问题
- WebSocket与HTTP有什么区别？
WebSocket是一种全双工通信协议，提供了客户端和服务器之间的实时通信能力，而HTTP是一种请求-响应协议，每次客户端需要服务器的响应时都需要发送一个新的请求。WebSocket连接是持续的，并可以在客户端和服务器之间发送任意数量的消息，而HTTP连接则是短暂的，每个请求都需要重新建立连接。 - WebSocket是否安全？
WebSocket本身并不提供安全性，但可以通过使用WebSocket over TLS (wss://) 来在传输层上进行安全加密，类似于HTTP over TLS (https://)。这样可以确保数据在传输过程中受到保护。 - 如何处理WebSocket连接中断？
当WebSocket连接中断时，可以使用onclose事件来处理连接关闭的逻辑。可以在该事件的回调函数中尝试重新连接服务器，或者执行其他必要的操作，以确保保持通信的连续性。 - 是否可以在浏览器之间建立WebSocket连接？
是的，WebSocket连接不限于浏览器和服务器之间的通信，而是可以在任何支持WebSocket协议的客户端和服务器之间建立连接。这使得WebSocket可以用于构建跨浏览器的实时应用程序。 - WebSocket是否支持跨域通信？
是的，WebSocket支持跨域通信。当使用WebSocket建立跨域连接时，需要服务器配置允许来自其他域的连接。在服务器端，可以使用CORS（跨域资源共享）来配置允许跨域WebSocket连接。 - WebSocket是否支持浏览器的兼容性？
WebSocket在现代浏览器中得到广泛支持，包括Google Chrome、Mozilla Firefox、Safari、Microsoft Edge等主流浏览器。然而，一些旧版本的浏览器可能不支持WebSocket或支持较差。在开发时，需要考虑到浏览器的兼容性，可以使用polyfill库来为不支持WebSocket的浏览器提供类似的功能。
