前端 通信方式总结

2023-12-18 19:12:01

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

概念:

  • 实时通信是指在通信过程中,消息的传输延迟非常小,可以几乎立即传递到接收方。实时通信通常用于需要及时响应的场景,比如聊天应用、在线游戏等。常见的实时通信方式包括 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');

文章来源:https://blog.csdn.net/qq_44327851/article/details/134956387
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。