移动端应用与电脑浏览器点对点通信指南：WebSocket vs. LAN 多播

2024-03-03 13:02:08

移动端应用与电脑浏览器之间的点对点通信在许多场景下都扮演着至关重要的角色，例如远程控制、实时数据同步和游戏联机等。实现这种通信的关键在于选择合适的技术方案，并进行合理的代码设计。

WebRTC: 点对点通信的利器

WebRTC（Web Real-Time Communication）是一种强大的技术，它允许浏览器和移动应用之间建立直接的点对点连接，无需依赖中间服务器进行数据转发。这使得 WebRTC 成为实现低延迟、高带宽通信的理想选择，尤其是在实时音视频传输和数据共享方面表现出色。

WebRTC 的工作原理

WebRTC 的核心在于三个主要的 API：

MediaStream API : 用于访问用户的摄像头和麦克风等媒体设备，并将音视频数据转换为流。
RTCPeerConnection API : 用于建立点对点连接，并管理音视频流的传输和协商。
RTCDataChannel API : 用于在点对点连接上发送和接收任意数据。

通过这些 API，WebRTC 可以实现以下功能：

NAT 穿透 : WebRTC 利用 STUN 和 TURN 服务器来克服 NAT（Network Address Translation）的限制，使得位于不同网络环境下的设备能够建立连接。
信令 : 在建立点对点连接之前，需要进行信令交换，以便设备之间协商媒体格式、网络配置等信息。信令可以使用 WebSocket 或其他协议来实现。
媒体协商 : WebRTC 使用 SDP（Session Description Protocol）来媒体流的格式和属性，并通过 Offer/Answer 机制进行协商。
数据传输 : 一旦建立连接，就可以使用 RTCDataChannel API 来发送和接收任意数据，例如文本消息、文件等。

代码示例：使用 WebRTC 实现简单的文本聊天

以下是一个使用 WebRTC 实现简单文本聊天的示例代码：

浏览器端 (JavaScript):

// 获取本地媒体流（例如麦克风和摄像头）
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .then(stream => {
    // 创建 RTCPeerConnection 对象
    const peerConnection = new RTCPeerConnection();

    // 将本地媒体流添加到 RTCPeerConnection
    stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));

    // 创建 RTCDataChannel
    const dataChannel = peerConnection.createDataChannel('chat');

    // 监听 RTCDataChannel 的消息事件
    dataChannel.onmessage = event => {
      console.log('Received message:', event.data);
    };

    // 创建 Offer
    peerConnection.createOffer()
      .then(offer => peerConnection.setLocalDescription(offer))
      .then(() => {
        // 将 Offer 发送给对方
        // ... (使用信令服务器或其他方式发送 Offer)
      });

    // 监听对方的 Answer
    peerConnection.onicecandidate = event => {
      if (event.candidate) {
        // 将 ICE candidate 发送给对方
        // ... (使用信令服务器或其他方式发送 ICE candidate)
      }
    };

    // 监听对方的 Offer
    // ... (接收对方发送的 Offer)

    // 设置远程
    peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
      .then(() => peerConnection.createAnswer())
      .then(answer => peerConnection.setLocalDescription(answer))
      .then(() => {
        // 将 Answer 发送给对方
        // ... (使用信令服务器或其他方式发送 Answer)
      });

    // 监听对方的 ICE candidate
    // ... (接收对方发送的 ICE candidate)

    // 添加 ICE candidate
    peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
  })
  .catch(err => console.error('Error accessing media devices:', err));

// 发送消息
dataChannel.send('Hello from browser!');

移动端 (Android, 使用 libjingle):

// ... (省略部分代码) ...

// 创建 PeerConnectionFactory
PeerConnectionFactory factory = PeerConnectionFactory.builder()
    .setOptions(options)
    .createPeerConnectionFactory();

// 创建 PeerConnection
PeerConnection peerConnection = factory.createPeerConnection(iceServers, observer);

// 创建 DataChannel
DataChannel dataChannel = peerConnection.createDataChannel("chat", init);

// 监听 DataChannel 的消息事件
dataChannel.registerObserver(new DataChannel.Observer() {
  @Override
  public void onMessage(DataChannel.Buffer buffer) {
    // 处理消息...
  }
  // ... (其他回调函数)
});

// 创建 Offer
peerConnection.createOffer(sdpObserver, constraints);

// 监听对方的 Answer
// ... (接收对方发送的 Answer)

// 设置远程描述
peerConnection.setRemoteDescription(sdpObserver, sdp);

// 创建 Answer
peerConnection.createAnswer(sdpObserver, constraints);

// 监听对方的 ICE candidate
// ... (接收对方发送的 ICE candidate)

// 添加 ICE candidate
peerConnection.addIceCandidate(candidate);

// 发送消息
dataChannel.send(new DataChannel.Buffer(ByteBuffer.wrap("Hello from Android!".getBytes()), false));