当前位置：首页 > JavaScript

js实现通信

2026-04-05 18:59:45JavaScript

JavaScript 实现通信的方法

JavaScript 提供了多种方式实现不同场景下的通信，包括前端与后端、前端组件间、跨域通信等。以下是常见方法：

XMLHttpRequest (XHR)

传统的前后端通信方式，通过创建 XMLHttpRequest 对象发送异步请求。

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

Fetch API

现代浏览器支持的更简洁的异步请求方式，基于 Promise 实现。

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

WebSocket

实现全双工实时通信，适用于聊天应用、实时数据推送等场景。

const socket = new WebSocket('wss://example.com/socket');
socket.onopen = () => socket.send('Hello Server!');
socket.onmessage = (event) => console.log('Received:', event.data);

PostMessage

跨窗口或跨域通信的安全方法，常用于 iframe 与父页面交互。

// 发送消息
window.parent.postMessage('Hello Parent!', 'https://parent-origin.com');

// 接收消息
window.addEventListener('message', (event) => {
  if (event.origin === 'https://trusted-origin.com') {
    console.log('Received:', event.data);
  }
});

EventEmitter 模式

通过自定义事件实现组件间通信，常见于前端框架或模块化开发。

class EventEmitter {
  constructor() {
    this.events = {};
  }
  on(event, listener) {
    (this.events[event] || (this.events[event] = [])).push(listener);
  }
  emit(event, ...args) {
    (this.events[event] || []).forEach(listener => listener(...args));
  }
}

const emitter = new EventEmitter();
emitter.on('message', (data) => console.log(data));
emitter.emit('message', 'Hello Event!');

BroadcastChannel

允许同源下的不同浏览器上下文（如多个标签页、iframe）通信。

const channel = new BroadcastChannel('app_channel');
channel.postMessage('Hello other tabs!');
channel.onmessage = (event) => console.log('Received:', event.data);

Server-Sent Events (SSE)

服务器单向推送数据到客户端，适用于实时通知等场景。

const eventSource = new EventSource('/sse-endpoint');
eventSource.onmessage = (event) => console.log('Update:', event.data);

WebRTC

点对点通信技术，适用于视频聊天、文件传输等场景。

js实现通信

// 示例：建立简单的 WebRTC 连接需结合信令服务器
const peerConnection = new RTCPeerConnection();
peerConnection.onicecandidate = (event) => {
  if (event.candidate) {
    // 发送 candidate 到对等端
  }
};