当前位置：首页 > JavaScript

js实现通信

2026-03-14 00:50:53JavaScript

JavaScript 通信实现方式

JavaScript 提供了多种实现通信的方式，适用于不同场景需求，包括客户端与服务器、页面间、跨域等场景。

AJAX (XMLHttpRequest 和 Fetch API)

XMLHttpRequest 是传统的异步通信方式，现代开发推荐使用 Fetch API 更简洁高效。

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

// Fetch API 示例
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

WebSocket

实现全双工通信，适用于实时应用如聊天室、在线游戏。

const socket = new WebSocket('wss://echo.websocket.org');
socket.onopen = () => socket.send('Hello Server');
socket.onmessage = event => console.log(event.data);

Server-Sent Events (SSE)

服务器单向推送技术，适用于实时通知场景。

js实现通信

const evtSource = new EventSource('/updates');
evtSource.onmessage = event => {
  console.log('New update:', event.data);
};

WebRTC

点对点通信技术，适合视频会议、文件传输。

// 建立连接示例
const pc = new RTCPeerConnection();
pc.onicecandidate = event => {
  if (event.candidate) {
    // 发送候选地址给对方
  }
};
pc.ondatachannel = event => {
  const channel = event.channel;
  channel.onmessage = event => console.log(event.data);
};

postMessage

跨窗口通信方法，适用于iframe/跨域场景。

// 父窗口发送
window.frames[0].postMessage('hello', 'https://child.example.com');

// 子窗口接收
window.addEventListener('message', event => {
  if (event.origin === 'https://parent.example.com') {
    console.log(event.data);
  }
});

Web Workers

后台线程通信，用于计算密集型任务。

js实现通信

// 主线程
const worker = new Worker('worker.js');
worker.postMessage('start');
worker.onmessage = event => console.log(event.data);

// worker.js
self.onmessage = event => {
  if (event.data === 'start') {
    self.postMessage('working');
  }
};

Broadcast Channel API

同源不同页面间广播通信。

const bc = new BroadcastChannel('app_channel');
bc.postMessage('User logged in');
bc.onmessage = event => console.log(event.data);

IndexedDB 共享数据

客户端数据库存储，可用于页面间共享数据。

const request = indexedDB.open('sharedDB');
request.onsuccess = event => {
  const db = event.target.result;
  const tx = db.transaction('store', 'readwrite');
  tx.objectStore('store').put('data', 'key');
};

跨文档通信 (Channel Messaging)

通过 MessageChannel 建立直接通信管道。

const channel = new MessageChannel();
port1 = channel.port1;
port2 = channel.port2;
port1.postMessage('hello');
port2.onmessage = event => console.log(event.data);