一、理解 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() 方法发送数据到服务器。
九、欢迎交流指正,关注我,一起学习
参考链接
滑动验证页面
https://www.cnblogs.com/web-learn/p/15148141.html
HTML5 WebSocket 详解及使用_html websocket_祖先森、的博客-CSDN博客