首页 前端知识 html5:webSocket 基础使用

html5:webSocket 基础使用

2024-05-10 08:05:56 前端知识 前端哥 739 182 我要收藏

一、理解 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博客

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7803.html
标签
websocket
评论
发布的文章

JSON加密的看法

2024-05-14 23:05:47

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!