前端 通信方式总结

前端的通信方式分为：实时通信和异步通信。

概念：

• 实时通信是指在通信过程中，消息的传输延迟非常小，可以几乎立即传递到接收方。实时通信通常用于需要及时响应的场景，比如聊天应用、在线游戏等。常见的实时通信方式包括 WebSocket、WebRTC 等。
• 异步通信是指消息的发送和接收是独立的，发送方不需要等待接收方的响应，可以继续执行其他操作。接收方在消息到达时会进行处理。异步通信通常用于需要提高系统吞吐量和性能的场景，比如在网络请求、文件 I/O 等操作中。常见的异步通信方式包括 Ajax 请求、Promise、事件监听等。

????????在实际应用中，实时通信和异步通信通常会结合使用，以满足不同的需求。例如，一个在线聊天应用可能会使用 WebSocket 进行实时通信，同时使用异步的 Ajax 请求来获取历史消息记录。

在前端实现通信的方式有多种方法，主要包括以下几种：

1. Ajax 请求
2. 轮询
3. HTTP 长轮询（Long Polling）
4. WebSocket
5. Server-Sent Events (SSE)
6. WebRTC
7. 使用第三方服务的 API
8. 使用浏览器的本地存储（如 localStorage 或 IndexedDB）

实时通信有：

1. WebSocket：在客户端和服务器之间建立持久的双向通信连接，可以实现实时的消息传输。
2. WebRTC：用于在浏览器之间实现实时的音视频通话和数据传输。
3. Server-Sent Events (SSE)：用于从服务器向客户端推送实时事件和数据的技术，属于实时通信方式。

异步通信有：

1. Ajax 请求：通过异步的方式向服务器发送 HTTP 请求，并在请求返回时进行处理。
2. 轮询：客户端定时向服务器发送请求，以获取最新的数据或状态更新。
3. HTTP 长轮询：客户端发送一个 HTTP 请求到服务器，服务器保持该请求的连接打开一段时间，直到有新的数据时再返回响应。这种方式模拟了实时通信，但实际上仍然是基于 HTTP 的。
4. EventSource：用于接收服务器端推送的事件流，属于异步通信方式。
5. 使用第三方服务的 API（例如 Twitter API、Google Maps API 等）：通过调用第三方服务提供的 API，实现与服务提供商的异步通信。
6. 使用浏览器的本地存储（例如 localStorage 或 IndexedDB）：用于在客户端进行数据存储和读取，属于异步数据存储方式。
7. Promise：用于处理异步操作的一种编程模式，可以更方便地处理异步操作的结果和错误。
8. 事件监听：通过注册事件监听器来处理异步事件，比如 DOM 事件、自定义事件等。

?注意！！！：

????????WebRTC 是一种实时通信技术。它允许浏览器之间直接进行实时的音视频通话和数据传输，而无需通过服务器中转。WebRTC 提供了一种基于浏览器的实时通信解决方案，可以在客户端之间建立点对点的连接，实时传输音频、视频和数据。

????????虽然 WebRTC 本身是实时通信技术，但在实际应用中，它也可以用于异步数据传输。例如，可以使用 WebRTC 进行文件传输，实现在浏览器之间异步地传输文件。因此，WebRTC 在实时通信和异步通信方面都具有一定的灵活性。

1. Ajax 请求

????????Ajax 是一种通过 JavaScript 发起异步 HTTP 请求的技术。可以使用 XMLHttpRequest 对象或 Fetch API 发起 Ajax 请求。

// 使用 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
? if (xhr.readyState === 4 && xhr.status === 200) {
? ? const response = xhr.responseText;
? ? // 处理返回的数据
? }
};
xhr.send();

// 使用 Fetch API
fetch('/api/data')
? .then(response => response.json())
? .then(data => {
? ? // 处理返回的数据
? });

2. 轮询

????????客户端定时向服务器端发送请求，询问是否有新数据。服务器端在收到请求后立即返回响应，无论是否有新数据。客户端在收到响应后立即发起下一次请求。

function fetchData() {
  fetch('/data')
    .then(response => response.json())
    .then(data => {
      console.log('Received data:', data);
      // 在这里处理接收到的数据，比如更新页面内容等操作
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

// 每隔一定时间向服务器端请求数据
setInterval(fetchData, 5000); // 间隔 5 秒发送一次请求

3. HTTP 长轮询

???????客户端向服务器端发送请求后，服务器保持连接打开一段时间，直到有新数据可用或者超时才返回响应。客户端在收到响应后立即发起下一次请求。

function subscribeForData() {
  fetch('/subscribe')
    .then(response => response.json())
    .then(data => {
      console.log('Received data:', data);
      // 在这里处理接收到的数据，比如更新页面内容等操作
      // 再次发起长轮询请求
      subscribeForData();
    })
    .catch(error => {
      console.error('Error fetching data:', error);
      // 处理错误，再次发起长轮询请求
      subscribeForData();
    });
}

// 初始发起长轮询请求
subscribeForData();

4. WebSocket

????????WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许在客户端和服务器之间进行双向通信。

const socket = new WebSocket('ws://localhost:8080');
socket.onopen = function() {
? console.log('WebSocket 连接已建立');
};
socket.onmessage = function(event) {
? const message = event.data;
? // 处理接收到的消息
};
socket.onclose = function() {
? console.log('WebSocket 连接已关闭');
};

5. Server-Sent Events (SSE)

????????Server-Sent Events (SSE) 允许服务器向客户端推送事件流，是一种单向通信机制，是一种基于 HTTP 的、服务器主动推送事件的机制。它允许服务器发送任意数量的数据到客户端，而客户端可以通过监听事件接收到这些数据。与 WebSocket 相比，SSE 仅支持服务器向客户端单向推送数据。

const eventSource = new EventSource("/api/stream");

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  // 处理从服务器推送的数据
  console.log(data);
};

eventSource.onerror = (error) => {
  console.error('Error:', error);
  // 处理错误，如重新建立 SSE 连接
};

6. WebRTC

????????WebRTC 是一种支持浏览器之间实时通信的开放标准。它可以用于实现视频通话、音频通话等功能。

// 创建本地媒体流
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
? .then(function(stream) {
? ? // 将媒体流发送给远程端
? })
? .catch(function(error) {
? ? console.error('获取媒体流失败', error);
? });

7. 使用第三方服务的 API

????????许多第三方服务提供了 API，可以通过调用这些 API 来实现与服务提供商的通信，例如使用 Twitter API、Google Maps API 等。

// 通过 Fetch API 调用 Twitter API
fetch('https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=twitterapi&count=5')
? .then(response => response.json())
? .then(data => {
? ? // 处理返回的数据
? });

8. 使用浏览器的本地存储

????????浏览器的本地存储技术（如 localStorage 或 IndexedDB）可以用于在客户端之间进行数据交换。

// 使用 localStorage 存储和读取数据
localStorage.setItem('username', 'john_doe');
const username = localStorage.getItem('username');