html5：webSocket 基础使用

朴灿烈づ我的快乐病毒、 2024-03-22 23:56 70阅读 0赞

#### **一、理解** 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() 方法发送数据到服务器。

#### 九、欢迎交流指正，关注我，一起学习 ####

#### 参考链接 ####

[滑动验证页面][Link 1]

[https://www.cnblogs.com/web-learn/p/15148141.html][https_www.cnblogs.com_web-learn_p_15148141.html]

[HTML5 WebSocket 详解及使用\_html websocket\_祖先森、的博客-CSDN博客][HTML5 WebSocket _html websocket_-CSDN]

[Link 1]: https://segmentfault.com/q/1010000020901464
[https_www.cnblogs.com_web-learn_p_15148141.html]: https://www.cnblogs.com/web-learn/p/15148141.html
[HTML5 WebSocket _html websocket_-CSDN]: https://blog.csdn.net/weixin_43221910/article/details/123642418