websockt初始化，创建一个webSocket示例

news2024/9/23 9:30:34

写文思路：

以下主要从几个方面着手写websocket相关，包括以下：什么是webSocket，webSocket的优点和劣势，webSocket工作原理，webSocket握手示例，如何使用webSocket(使用webSocket的一个示例)，应用场景。。。

一、什么是webSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。

它由 IETF 于 2011 年作为 RFC 6455 标准化，并由 Web IDL 中的 WebSocket API 支持。

它被设计用于在客户端和服务器之间建立长时间的双向通信通道，克服传统 HTTP 的一些限制，特别是在需要实时数据传输的场景下。

二、 webSocket的优点和劣势

全双工通信：
- 允许客户端和服务器在一个单一的连接上同时发送和接收消息。这与传统 HTTP 请求-响应模型不同，后者是半双工的。
长连接：
- 一旦建立连接，WebSocket 保持连接打开状态，直到客户端或服务器主动关闭。这减少了频繁建立连接的开销。
低延迟：
- 因为连接保持打开状态，所以无需为每个消息重建连接，从而显著降低延迟，适用于实时性要求高的应用。
数据格式：
- WebSocket 支持传输文本数据和二进制数据。消息传递可以更灵活，不受 HTTP 头信息的约束。
轻量级：
- 初始握手是基于 HTTP 协议进行的，但成功后，数据交换采用更轻量级的 WebSocket 帧格式，减少了数据包的开销。

三、webSocket工作原理

握手：

客户端通过 HTTP 请求发起 WebSocket 握手请求。请求中包含 Upgrade 头信息，表示希望将连接升级为 WebSocket 连接。
服务器接受请求并返回一个响应，包含 Upgrade 头信息，确认升级。

数据传输：

握手完成后，客户端和服务器之间可以通过 WebSocket 连接交换数据。数据以帧的形式传输，每个帧包含消息的一部分。

关闭连接：

任一方（客户端或服务器）可以随时发送关闭帧来终止连接。

四、webSocket握手示例

客户端请求

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

服务器响应：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

五、使用webSocket的一个示例

以下是一个使用 JavaScript 在浏览器中建立 WebSocket 连接的简单示例：

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Example</title>
</head>
<body>
  <script>
    // 创建 WebSocket 连接
    var socket = new WebSocket('ws://localhost:8080');

    // 连接建立时触发
    socket.onopen = function(event) {
      console.log('WebSocket is open now.');
      socket.send('Hello Server!');
    };

    // 接收到消息时触发
    socket.onmessage = function(event) {
      console.log('Message from server: ' + event.data);
    };

    // 连接关闭时触发
    socket.onclose = function(event) {
      console.log('WebSocket is closed now.');
    };

    // 发生错误时触发
    socket.onerror = function(error) {
      console.error('WebSocket Error: ' + error);
    };
  </script>
</body>
</html>