当前位置：首页 > news >正文

html5：webSocket 基础使用

news 2025/8/5 5:03:21

一、理解 HTML5 WebSocket

HTML5 WebSocket是一种新型的网络协议，它能够在客户端和服务器之间建立实时的双向通信通道，使得浏览器和服务器之间的数据传输更加高效、快速和可靠。相比传统的HTTP协议，WebSocket协议使用更少的网络开销，能够实现较小的数据包传输和更低的延迟，能够支持实时数据更新的场景。

HTML5 WebSocket的使用方式比较简单，可以通过JavaScript中的WebSocket对象来创建WebSocket连接，并通过send()方法向服务器发送数据，通过onmessage()方法接收服务器返回的数据。目前，WebSocket协议已经广泛应用于实时聊天、在线游戏、语音视频聊天、股票行情等领域。

二、WebSocket协议的特点

1、支持双向通信：WebSocket协议允许客户端和服务器之间实时、双向的通信，无需像HTTP协议那样需要发送请求来获取数据。
2、更少的网络开销：WebSocket协议使用更少的网络开销，能够实现较小的数据包传输和更低的延迟。
3、长连接：WebSocket协议使用长连接，不需要频繁地建立和关闭连接，减少了传输数据的延迟时间。
4、跨域访问：WebSocket协议支持跨域访问，允许浏览器和服务器之间跨域实现实时通信。
5、WebSocket 是一个独立的协议，不同于 HTTP，但是在使用时可以通过 HTTP 来建立连接；6、WebSocket 的协议标识符是 "ws" 或 "wss"，分别对应于普通的 WebSocket 和基于 SSL 的 WebSocket；
7、WebSocket 支持带有握手的协议，类似于 HTTP/1.1 的 Upgrade 和 Connection 头；
8、WebSocket 是一个双向数据传输的协议，也就是说服务器和客户端都可以主动发送数据；9、9、WebSocket 使用的是 TCP 协议，在传输层上可靠性较高。

三、WebSocket 常用属性

1、WebSocket.readyState：只读属性，表示 WebSocket 连接的当前状态。它的值可以是以下四个常量之一：

WebSocket.CONNECTING (0)：表示正在建立连接。
WebSocket.OPEN (1)：表示连接已经建立成功。
WebSocket.CLOSING (2)：表示连接正在关闭。
WebSocket.CLOSED (3)：表示连接已经关闭或者没有建立成功。

2、WebSocket.bufferedAmount：只读属性，表示还没有被发送到服务器的字节数。当调用 send() 方法发送数据时，数据会被放入发送缓存区中，直到被实际发送出去。这个属性可以用来检查发送缓存区中是否还有待发送的数据。

3、WebSocket.extensions：只读属性，表示服务器选择的 WebSocket 扩展列表。WebSocket 扩展是一种标准化的协议扩展，可以提供额外的功能和性能优化。

4、WebSocket.protocol：只读属性，表示服务器选择的子协议名称。子协议是一种应用层协议扩展，可以在 WebSocket 连接中定义一组特定的数据格式或行为。

5、WebSocket.url：只读属性，表示 WebSocket 对象连接的 URL 地址。该属性包含了协议、主机名、端口号和资源路径等信息。

四、WebSocket 生命周期四个阶段

1、连接建立阶段：WebSocket 对象创建后，需要连接 WebSocket 服务器，完成握手协议。在这个阶段，WebSocket 对象会触发 open 事件，表示连接已经建立成功。

2、数据传输阶段：连接建立成功后，可以通过 WebSocket 对象进行双向数据传输。在这个阶段，WebSocket 对象会触发 message 事件，表示收到了来自服务器的数据，也可以使用 send() 方法向服务器发送数据。

3、关闭连接阶段：当通信结束，或者出现异常情况时，需要关闭 WebSocket 连接。在这个阶段，WebSocket 对象会触发 close 事件，表示连接已经关闭。

4、异常处理阶段：在进行 WebSocket 通信时，有可能出现网络故障、服务端异常等问题。在这些异常情况下，WebSocket 对象会触发 error 事件，表示出现了错误。

需要注意的是，WebSocket 生命周期的第一个阶段是必须的，而后面三个阶段则是可选的，取决于实际的业务需求和网络情况。例如，在某些情况下，WebSocket 连接可能会一直保持打开状态，直到用户手动关闭或者网络中断。

五、HTML5 WebSocket 接收的参数

1、URL：要连接的 WebSocket 服务器的 URL。

2、Protocols（可选）：一个可选的协议字符串或协议数组，表示与服务器通信时使用的协议。如果不指定，则可以使用任何协议。

3、Options（可选）：一些可选的配置参数，用于控制 WebSocket 连接的行为，如超时、缓冲区大小等。这些选项通常与底层的操作系统或浏览器实现有关。

例如，以下代码演示了如何创建一个 WebSocket 对象：

var socket = new WebSocket("ws://localhost:8080", ["protocol1", "protocol2"], {timeout: 5000});

其中，第一个参数是 URL，表示要连接的 WebSocket 服务器的地址和端口号；第二个参数是一个可选的协议字符串或协议数组，表示与服务器通信时使用的协议；第三个参数是一个可选的选项对象，包含一些可配置的参数，例如超时时间等。

六、使用 HTML5 WebSocket 的过程

1、在 Web 应用程序中创建 WebSocket 对象，指定连接的 URL；

2、建立连接后，可以发送数据给服务器端，服务器端也可以发送数据给客户端；

3、连接一旦关闭，就不能再发送数据，需要重新创建 WebSocket 对象进行连接。

七、HTML5 WebSocket 需要后端配合吗

是的，

HTML5 WebSocket 需要后端配合。具体来说，WebSocket 需要在后端实现一个 WebSocket 服务器，该服务器能够接收 WebSocket 请求，并在客户端和服务器之间建立 WebSocket 连接。通常情况下，后端可以使用一些 WebSocket 服务器库（如 Node.js 的 Socket.IO 或 Java 的 Java-WebSocket）来实现 WebSocket 服务器。在客户端，HTML5 提供了 WebSocket API，让客户端能够与服务器建立 WebSocket 连接、发送和接收 WebSocket 消息。因此，HTML5 WebSocket 需要客户端和服务器的配合。

八、简单的 HTML5 WebSocket 实例

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>WebSocket Test</title>
</head>
<body>
<script>var socket = new WebSocket("ws://localhost:8080");// 连接成功时触发socket.onopen = function(event) {socket.send("Hello, Server!");};// 接收到消息时触发socket.onmessage = function(event) {console.log("Received data: " + event.data);};// 连接关闭时触发socket.onclose = function(event) {console.log("Connection closed.");};
</script>
</body>
</html>

在这个例子中，创建了一个 WebSocket 对象并指定了连接的 URL，接着设置了 onopen、onmessage 和 onclose 事件的回调函数来处理连接状态和接收数据。最后，使用 socket.send() 方法发送数据到服务器。