第05篇，前端知识之webAPI总结本文主要总结了webAPI相关的知识点，如DOM、BOM、事件处理、ajax、存储、

一、DOM（文档对象模型）

1. DOM的本质与核心概念

DOM（Document Object Model）是HTML和XML文档的编程接口，提供了结构化的文档表示，并定义了如何访问和操作这些结构。通过DOM，开发者可以动态修改页面内容、样式和结构，而不需要重新加载页面。

核心概念：

节点（Node）：DOM中一切元素都可以被视为节点，节点有不同的类型，如元素节点、文本节点等。
DOM树：整个HTML文档被解析为一个树结构，其中每个节点都是树的一部分。

2. DOM的定义与作用

DOM的主要作用是将文档（HTML或XML）与脚本（JavaScript）连接起来，使开发者能够通过JavaScript操控页面内容和结构。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Example</title>
</head>
<body>
  <h1 id="title">Hello, World!</h1>
  <button onclick="changeTitle()">Click Me</button>

  <script>
    function changeTitle() {
      document.getElementById('title').textContent = "Title Changed!";
    }
  </script>
</body>
</html>

解释：在这个例子中，通过 document.getElementById 方法，我们可以获取并修改页面上的 h1 元素的内容。

3. DOM树结构解析

DOM树类似于一个家族树，HTML文档的每个元素和属性都是节点，按照层级排列。根节点通常是 <html>，它包含着其他节点如 <head> 和 <body>，进一步层级递进。

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Tree Example</title>
  </head>
  <body>
    <div>
      <p>This is a paragraph inside a div.</p>
    </div>
  </body>
</html>

在这个HTML文档中，DOM树的结构可以表示为：

html
├── head
│   └── title
├── body
    └── div
        └── p

4. DOM节点类型与层次关系

DOM节点分为以下几种主要类型：

元素节点：代表HTML元素，如 <div>、<p> 等。
文本节点：存储在元素内部的文本内容。
属性节点：元素的属性，如 id、class 等。
注释节点：HTML注释。

每个节点都有层次关系：

父节点：一个节点上层的节点（如 body 是 html 的子节点）。
子节点：节点的下级节点。
兄弟节点：同一父节点下的节点。

let parentNode = document.body.parentNode;  // html
let childNodes = document.body.childNodes;  // NodeList of children
let firstChild = document.body.firstChild;  // First child of body
let sibling = document.body.nextSibling;    // Sibling node

5. DOM节点操作

5.1 创建、插入、删除与复制节点

通过DOM，可以动态创建、插入、删除或复制节点。

创建与插入节点：

let el = document.createElement('div');
el.textContent = "hello world";
document.body.appendChild(el);

删除节点：

let el = document.getElementById('div');
el.parentNode.removeChild(el);

复制节点：

let clonedNode = el.cloneNode(true);  // true 代表深度复制
document.body.appendChild(clonedNode);

5.2 修改节点内容

你可以使用不同的方法修改节点的内容，包括文本、属性、HTML等。

修改文本：

document.getElementById('div').textContent = "hello world";

修改属性：

let img = document.getElementById('myImage');
img.setAttribute('src', 'new-image.jpg');

修改HTML内容：

document.body.innerHTML = '<h2>New HTML Content</h2>';

6. 遍历与查找节点

你可以使用DOM提供的各种属性和方法来遍历和查找节点。

常用属性：

parentNode：获取父节点
childNodes：获取子节点列表
firstChild 和 lastChild：获取第一个和最后一个子节点

常用方法：

getElementById：通过ID查找元素
getElementsByClassName：通过类名查找元素
getElementsByTagName：通过标签名查找元素
querySelector 和 querySelectorAll：通过CSS选择器查找元素

let allDivs = document.getElementsByTagName('div');
let specificElement = document.querySelector('#title');

7. DOM性能优化策略

7.1 减少DOM操作次数与频率

DOM操作的开销较大，频繁的DOM操作会影响页面性能。为了优化，应该尽量减少DOM操作次数。

7.2 使用文档片段（DocumentFragment）

文档片段允许你一次性进行多个节点操作，然后将整个片段一次性插入DOM，这样可以减少页面的重绘和回流。

let fragment = document.createDocumentFragment();
for (let i = 0; i < 5; i++) {
  let newParagraph = document.createElement('p');
  newParagraph.textContent = "Paragraph " + i;
  fragment.appendChild(newParagraph);
}
document.body.appendChild(fragment);  // 一次性插入

7.3 最小化页面重绘与回流

重绘（Repaint）：当元素的外观改变但不影响布局时发生，如颜色变化。
回流（Reflow）：当页面布局发生变化时触发，如窗口大小变化或内容大小变化。

为了减少重绘和回流，应尽量批量进行DOM操作。

8. 异步操作DOM的技巧与注意事项

异步操作可以通过 setTimeout 或 requestAnimationFrame 来完成，以避免阻塞主线程。

setTimeout(() => {
  document.body.style.backgroundColor = 'blue';
}, 1000);

9. DOM查询缓存与高效操作

9.1 缓存DOM查询结果

在频繁操作DOM时，应将查询结果缓存起来，避免每次操作都重新查找节点。

let button = document.getElementById('myButton');
button.style.backgroundColor = 'red';
button.textContent = 'Clicked!';

9.2 一次性完成多项DOM操作

将多个操作放在一起完成，而不是逐个操作。

let elem = document.getElementById('myElement');
elem.style.color = 'blue';
elem.style.fontSize = '20px';
elem.textContent = 'Updated Text';

9.3 利用事件委托减少事件监听器的数量

使用事件委托可以将事件绑定到父元素上，而不是为每个子元素单独绑定事件监听器。

document.body.addEventListener('click', function(event) {
  if (event.target.tagName === 'BUTTON') {
    console.log('Button clicked');
  }
});

二、BOM（浏览器对象模型）

1. navigator对象

navigator 对象表示浏览器的信息，并可以用于获取浏览器和用户的系统环境相关的数据。

1.1 获取浏览器与平台信息

你可以通过 navigator 对象来获取用户浏览器的版本、操作系统类型以及浏览器厂商等信息。

console.log(navigator.userAgent); // 获取浏览器的用户代理字符串  检查浏览器或者是某个app等常用到
console.log(navigator.platform);  // 获取用户的操作系统信息
console.log(navigator.language);  // 获取用户的语言设置信息

1.2 检测浏览器特性与兼容性

你可以使用 navigator 来检测当前浏览器是否支持某些功能，从而实现浏览器兼容性处理。例如，可以检查浏览器是否支持 serviceWorker，从而决定是否启用它。

if ('serviceWorker' in navigator) {
  console.log('Service Worker supported');
} else {
  console.log('Service Worker not supported');
}

2. location对象

location 对象包含了当前页面的URL信息，并提供了对URL进行操作的各种方法。

2.1 URL的获取与设置

location.href 属性可以获取当前页面的URL，还可以通过设置它来导航到新的URL。

console.log(location.href);  // 获取当前页面的URL

location.href = "https://example.com";  // 跳转到另一个页面

2.2 页面跳转与刷新操作

你可以通过以下方式实现页面的跳转或刷新：

location.assign('https://example.com');  // 跳转到另一个页面
location.reload();                       // 刷新当前页面
location.replace('https://example.com'); // 跳转并替换当前页面，无法回退

2.3 URL参数解析与操作

通过 location.search 获取URL中的查询字符串，并使用 URLSearchParams 解析和操作参数。

let params = new URLSearchParams(location.search);
console.log(params.get('name'));  // 获取URL中的'name'参数
params.set('age', 30);            // 设置新的参数
console.log(params.toString());   // 输出新的查询字符串

3. screen对象

screen 对象用于获取用户设备的屏幕信息，如分辨率和颜色深度。

3.1 获取屏幕信息与分辨率

通过 screen 对象，可以获取屏幕的宽度、高度以及其他信息。这些信息在响应式设计中很有用，尤其是根据不同设备调整页面布局时。

console.log(screen.width);   // 获取屏幕宽度
console.log(screen.height);  // 获取屏幕高度
console.log(screen.availWidth);   // 获取可用的屏幕宽度（减去系统UI的高度）
console.log(screen.availHeight);  // 获取可用的屏幕高度

3.2 响应不同屏幕尺寸与分辨率的适配策略

结合JavaScript和CSS的媒体查询，可以为不同屏幕尺寸和分辨率提供不同的页面布局。

/* 在CSS中使用媒体查询适配不同的屏幕尺寸 */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 601px) {
  body {
    font-size: 18px;
  }
}

4. history对象

history 对象允许你访问浏览器的历史记录并进行导航操作。它提供了操作浏览器会话历史的方法，如前进、后退和跳转。

4.1 浏览器历史记录的访问与操作

你可以使用 history.back() 或 history.forward() 方法来导航浏览器历史记录。

history.back();    // 回退到上一个页面
history.forward(); // 前进到下一个页面

4.2 监听历史记录变化事件

通过 popstate 事件，可以监听用户通过前进或后退按钮对历史记录的操作。

window.addEventListener('popstate', function(event) {
  console.log('The URL changed!');
});

三、事件处理

1. 事件基础与类型

事件是用户与页面交互的关键。DOM中的事件是浏览器提供的标准接口，用于处理用户的操作，例如点击、键盘输入、鼠标移动等。

1.1 事件的定义与触发机制

事件是一种信号，用来通知应用程序发生了某种行为。每当用户与页面交互时，浏览器都会生成一个事件对象，并将其传递给事件处理函数。

常见的事件类型：

鼠标事件：click, dblclick, mousemove, mouseover, mouseout
键盘事件：keydown, keyup, keypress
表单事件：submit, change, focus, blur

<button onclick="alert('Button clicked!')">Click Me</button>

1.2 常见事件类型与事件流

事件流包括三个阶段：

捕获阶段：事件从 window 开始，逐层向下传播到目标元素。
目标阶段：事件到达目标元素时触发。
冒泡阶段：事件从目标元素开始，逐层向上传播回 window。

<div onclick="alert('Div clicked!')">
  <button onclick="alert('Button clicked!')">Click Me</button>
</div>

在这个例子中，点击按钮会触发 button 和 div 上的点击事件，先触发按钮的点击事件，再冒泡到 div 的点击事件。

2. 事件绑定与解绑

2.1 使用`addEventListener`与`removeEventListener`进行事件监听与解绑

使用 addEventListener 可以为元素添加事件监听器，而 removeEventListener 则用于解绑事件。

let btn = document.getElementById('myButton');

function handleClick() {
  console.log('Button clicked!');
}

btn.addEventListener('click', handleClick);  // 绑定事件
btn.removeEventListener('click', handleClick); // 解绑事件

2.2 传统事件绑定方式的优缺点

传统的事件绑定方式是将事件处理函数直接写在HTML元素的属性中，如 onclick="..."。这种方式简单直观，但有以下缺点：

难以解绑：无法灵活控制事件的添加和移除。
与HTML混杂：降低了HTML的可读性，不符合分离关注点的编程原则。

<button onclick="alert('Button clicked!')">Click Me</button>

3. 事件冒泡与阻止

3.1 事件冒泡机制解析

事件冒泡是指事件从目标元素逐级向上传播到祖先元素的过程。例如，在嵌套的元素中触发点击事件，事件会先在目标元素上触发，然后在其父元素、祖父元素上触发。

3.2 阻止事件冒泡与默认行为的方法

通过 event.stopPropagation() 可以阻止事件冒泡，防止事件继续传播。

document.getElementById('child').addEventListener('click', function(event) {
  event.stopPropagation();  // 阻止事件冒泡
  console.log('Child clicked');
});

通过 event.preventDefault() 可以阻止元素的默认行为。

<a href="https://example.com" onclick="event.preventDefault()">Click me</a>

在这个例子中，点击链接后不会跳转到 example.com，因为我们阻止了默认行为。

4. 事件代理与委托

4.1 事件代理的原理与实现

事件代理是指将事件处理器添加到父元素上，利用事件冒泡机制来处理子元素的事件，而不是为每个子元素单独添加事件处理器。

4.2 使用事件代理优化事件绑定与性能

通过事件代理，可以减少绑定事件处理器的数量，优化性能。例如，有一个列表中有许多 li 元素，你可以将点击事件绑定到父 ul 元素上，而不是为每个 li 元素单独绑定事件。

document.getElementById('list').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('List item clicked: ' + event.target.textContent);
  }
});

四、AJAX技术

1. AJAX基础与工作流程

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下与服务器通信的技术。通过AJAX，用户与网页进行交互时可以实时更新内容，而不会刷新页面。

1.1 AJAX的定义与用途

AJAX允许网页在后台与服务器交换数据，实时更新页面的部分内容，从而提升用户体验。其主要应用场景包括：

表单数据的提交
实时加载更多内容
动态更新表格数据
提示和校验输入内容

1.2 AJAX请求的工作流程与原理

AJAX的工作流程通常如下：

创建一个XMLHttpRequest对象。
使用 open 方法设置请求类型和目标URL。
使用 send 方法发送请求。
服务器处理请求并返回响应。
使用回调函数处理响应结果，更新页面内容。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('Response:', xhr.responseText);
  }
};
xhr.send();

在上面的代码中，xhr.open 设置了一个GET请求，并在 xhr.onload 回调函数中处理响应数据。

2. AJAX使用与实现

2.1 发送GET与POST请求的方法与技巧

GET和POST是AJAX请求中最常用的两种HTTP方法。

GET请求：通常用于从服务器获取数据。
POST请求：用于向服务器发送数据。

GET请求示例：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('Data received:', JSON.parse(xhr.responseText));
  }
};
xhr.send();

POST请求示例：

let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('Response received:', xhr.responseText);
  }
};
xhr.send('name=John&age=30');

2.2 处理响应数据（包括JSON、XML等）

响应数据可以是JSON、XML或纯文本。处理响应时，我们通常会使用 JSON.parse 将JSON字符串转换为JavaScript对象，或直接操作XML数据。

处理JSON数据：

xhr.onload = function() {
  if (xhr.status === 200) {
    let jsonData = JSON.parse(xhr.responseText);
    console.log('Name:', jsonData.name);
  }
};

处理XML数据：

xhr.onload = function() {
  if (xhr.status === 200) {
    let xmlData = xhr.responseXML;
    let name = xmlData.getElementsByTagName('name')[0].textContent;
    console.log('Name:', name);
  }
};

3. 异步回调与Promise的使用与注意事项

3.1 异步回调

AJAX操作是异步的，因此需要在请求完成后执行回调函数。上面的例子使用了 onload 来处理响应。回调函数被执行的时间是不可预测的，因此需要确保所有逻辑都在回调中执行。

3.2 使用Promise优化AJAX请求

为了解决嵌套回调的问题，可以使用 Promise 或者基于 Promise 的 fetch API。

使用Promise的AJAX请求：

function ajaxRequest(url) {
  return new Promise(function(resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject('Error: ' + xhr.status);
      }
    };
    xhr.send();
  });
}

ajaxRequest('https://api.example.com/data')
  .then(data => console.log('Data:', data))
  .catch(error => console.error(error));

使用fetch API：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

4. 解决AJAX跨域问题

4.1 JSONP原理与实现

JSONP（JSON with Padding）是一种解决跨域请求的技术，通过动态插入 script 标签来加载跨域的JavaScript数据。

<script>
  function handleResponse(data) {
    console.log('Data from server:', data);
  }
</script>
<script src="https://example.com/data?callback=handleResponse"></script>

服务器返回的数据格式如下：

handleResponse({ name: 'John', age: 30 });

4.2 CORS配置与跨域资源共享

现代浏览器通过 CORS（Cross-Origin Resource Sharing）来允许跨域请求。服务器需要在响应头中设置 Access-Control-Allow-Origin 以允许特定来源的跨域请求。

Access-Control-Allow-Origin: https://example.com

4.3 使用代理服务器解决跨域问题

通过设置代理服务器，你可以避免跨域问题。代理服务器（如Nginx）可以转发请求到目标服务器，从而隐藏跨域请求。

Nginx反向代理配置：

server {
  location /api/ {
    proxy_pass https://example.com/api/;
  }
}

五、Web存储技术

1. Cookie存储

1.1 Cookie的定义与作用

Cookie 是存储在用户浏览器中的小型数据，用于跟踪会话信息。Cookie可以存储用户的登录信息、偏好设置等，通常用于服务器和客户端之间的状态保持。

1.2 设置与读取Cookie的方法与技巧

通过JavaScript可以设置和读取Cookie，document.cookie 提供了Cookie的访问接口。

设置Cookie：

document.cookie = "username=John; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";

读取Cookie：

console.log(document.cookie);

1.3 Cookie的过期时间与路径等属性设置

Cookie可以通过 expires 属性设置过期时间，通过 path 属性指定在哪些路径下可访问。

document.cookie = "username=John; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";

2. localStorage与sessionStorage

localStorage 和 sessionStorage 是HTML5提供的客户端存储技术，用于在浏览器中存储键值对。不同的是，localStorage 数据没有过期时间，sessionStorage 数据会在页面会话结束时清除。

2.1 localStorage与sessionStorage的区别与用途

localStorage：存储的数据不会过期，浏览器关闭后仍然存在。
sessionStorage：只在页面会话期间存在，页面关闭后数据被清除。

2.2 存储与读取数据的方法与限制

localStorage示例：

// 存储数据
localStorage.setItem('username', 'John');

// 读取数据
console.log(localStorage.getItem('username'));

// 删除数据
localStorage.removeItem('username');

sessionStorage示例：

sessionStorage.setItem('token', 'abc123');
console.log(sessionStorage.getItem('token'));
sessionStorage.removeItem('token');

2.3 安全性与隐私保护考虑

虽然 localStorage 和 sessionStorage 使用方便，但由于它们存储在客户端浏览器中，数据的安全性较低。敏感信息不应存储在 localStorage 中，尤其是用户的密码或令牌等。

六、WebSocket

WebSocket的基本用法、常见问题与类库封装

WebSocket 是一种允许客户端与服务器之间建立全双工通信通道的协议。相比于传统的HTTP请求-响应模型，WebSocket可以在单个连接上实现数据的双向传输，无需反复创建连接，大大提升了实时通信的效率。

1、WebSocket的基本用法

WebSocket的API十分简洁，通常包括以下步骤：

创建连接
监听事件
发送消息
关闭连接

1.1 创建WebSocket连接

使用 new WebSocket(url) 创建一个新的WebSocket连接，url 指定了WebSocket服务器的地址。

let socket = new WebSocket('wss://example.com/socket');

这里的 wss 表示安全的WebSocket协议（类似于HTTPS），而 ws 则是不加密的WebSocket协议。

1.2 监听WebSocket事件

WebSocket提供了一些常见的事件来处理通信的生命周期：

onopen：连接成功建立时触发
onmessage：当接收到服务器发送的消息时触发
onerror：当发生错误时触发
onclose：连接关闭时触发

socket.onopen = function(event) {
  console.log('WebSocket connection opened:', event);
};

socket.onmessage = function(event) {
  console.log('Received message from server:', event.data);
};

socket.onerror = function(error) {
  console.log('WebSocket error:', error);
};

socket.onclose = function(event) {
  console.log('WebSocket connection closed:', event);
};

1.3 发送消息

通过 send() 方法可以向服务器发送消息。

socket.send('Hello Server!');

WebSocket支持发送字符串、Blob对象和ArrayBuffer等多种数据类型。

1.4 关闭连接

调用 close() 方法可以手动关闭WebSocket连接，并触发 onclose 事件。

socket.close();

2、WebSocket常见问题

在实际使用过程中，WebSocket可能会遇到一些常见问题，包括连接的管理、网络问题、协议兼容性等。

2.1 断开重连问题

WebSocket连接可能会因为网络中断、服务器问题等原因断开。为了确保应用的稳定性，通常需要实现自动重连机制。

function createWebSocket(url) {
  let socket = new WebSocket(url);

  socket.onopen = function() {
    console.log('Connection opened');
  };

  socket.onclose = function(event) {
    console.log('Connection closed', event);
    // 自动重连逻辑
    setTimeout(function() {
      createWebSocket(url);
    }, 1000); // 1秒后尝试重连
  };

  socket.onerror = function(error) {
    console.error('WebSocket error', error);
  };

  socket.onmessage = function(event) {
    console.log('Message from server:', event.data);
  };

  return socket;
}

let ws = createWebSocket('wss://example.com/socket');

2.2 心跳机制与连接保活

在网络较差或空闲时，WebSocket连接可能会因为长时间没有数据传输而被中断。为了保持连接通常会实现心跳机制，定期向服务器发送“心跳”消息。

let heartbeatInterval;

socket.onopen = function() {
  heartbeatInterval = setInterval(function() {
    socket.send(JSON.stringify({ type: 'heartbeat' }));
  }, 30000); // 每30秒发送一次心跳
};

socket.onclose = function() {
  clearInterval(heartbeatInterval); // 连接关闭时停止心跳
};

2.3 数据丢失与重发

由于WebSocket是基于TCP协议的，理论上不会出现数据丢失问题，但如果连接意外关闭，仍有可能导致某些消息未成功发送。因此，在应用层有时需要实现消息确认机制，确保重要数据不会丢失。

function sendMessageWithAck(socket, message, callback) {
  socket.send(JSON.stringify(message));

  socket.onmessage = function(event) {
    let data = JSON.parse(event.data);
    if (data.ack) {
      callback(); // 服务器确认收到消息后回调
    }
  };
}

2.4 服务器兼容性与负载均衡

WebSocket与HTTP/2协议不直接兼容，如果后端使用负载均衡或者代理服务器（如Nginx），需要确保WebSocket连接的“粘性会话”支持，即多个请求都必须路由到同一个后端服务器。通常需要配置服务器的WebSocket代理支持。

3、WebSocket常用封装类库

虽然原生的WebSocket API已经足够简单，但在实际开发中，为了应对断线重连、消息队列、心跳检测等复杂场景，使用封装好的类库可以让开发更加便捷。

3.1 ReconnectingWebSocket

ReconnectingWebSocket 是一个非常流行的库，提供了自动重连的功能，并且保留了原生WebSocket的API。

let socket = new ReconnectingWebSocket('wss://example.com/socket', null, {
  debug: true, // 开启调试模式
  reconnectInterval: 1000, // 每秒重连一次
});

socket.onopen = function() {
  console.log('ReconnectingWebSocket connected');
};

socket.onmessage = function(event) {
  console.log('Message:', event.data);
};

ReconnectingWebSocket 支持丰富的配置选项，如重连间隔、最大重连次数等，非常适合需要高可用性连接的场景。

3.2 Socket.IO

Socket.IO 是一个功能更强大的实时通信库，它不仅支持WebSocket，还可以在不支持WebSocket的环境中回退到其他通信协议（如轮询）。它提供了更加丰富的事件机制，并且可以处理诸如自动重连、命名空间、广播等高级功能。

let socket = io('https://example.com');

// 连接成功
socket.on('connect', function() {
  console.log('Connected to server');
});

// 监听特定事件
socket.on('message', function(data) {
  console.log('Message received:', data);
});

// 发送消息
socket.emit('message', { content: 'Hello!' });

// 处理重连事件
socket.on('reconnect_attempt', () => {
  console.log('Reconnection attempt');
});

Socket.IO 还支持跨多个节点的消息广播和负载均衡，是大规模实时应用的理想选择。

3.3 ws (Node.js)

ws 是Node.js的WebSocket实现，它不仅可以用于客户端，还可以用于搭建WebSocket服务器。它性能极佳，支持二进制数据，并且易于扩展。

创建WebSocket服务器：

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', function(socket) {
  console.log('New connection established');

  socket.on('message', function(message) {
    console.log('Received:', message);
    socket.send('Hello from server!');
  });

  socket.on('close', function() {
    console.log('Connection closed');
  });
});

客户端连接服务器：

const WebSocket = require('ws');
const socket = new WebSocket('ws://localhost:8080');

socket.on('open', function() {
  console.log('Connected to server');
  socket.send('Hello Server!');
});

socket.on('message', function(message) {
  console.log('Received:', message);
});

ws 库提供了非常灵活的API，可以轻松实现高性能的实时Web应用。

第05篇，前端知识之webAPI总结