我如何在HTML中实现浏览器到浏览器「点对点」连接？

了解「点对点」连接

「点对点」连接 (P2P) 是一种直接将两个浏览器连接的方式，允许在不需要服务器干涉的情况下进行实时通信。平均而言，这种连接比基于服务器的解决方案更快、更高效、更可扩展。

这种可以直接从浏览器到浏览器的连接为你和你的用户带来了解锁的场景，例如可以提供更快的即时聊天、实时游戏，数据交换等。

WebRTC

WebRTC（Web实时通信）是HTML5标准的一部分，是一个支持Web浏览器之间进行点对点实时通信的API集合。然而，WebRTC是一个非常庞大、强大、高级的工具，因此，需要一些研究才能了解如何使用它。

使用WebRTC进行点对点通信的基本步骤

我将介绍一些使用WebRTC在浏览器之间建立点对点通信的基本步骤：

1.获取对等端设备的媒体录制阶段

要实现WebRTC的点对点通信，每个浏览器都需要访问本地音频和视频输入设备，例如麦克风和摄像头。有许多API可用于实现这一点，例如getUserMedia。以下是一个简单的getUserMedia示例:

navigator.mediaDevices.getUserMedia({ audio: true, video: true })

    .then(function(mediaStream) {
        // success
    })
    .catch(function(err) {
        // error handling
    });

提示：您还可以使用适用于Safari、Firefox和Chrome的adapter.js库来处理浏览器之间的差异，该库提供了对getUserMedia、RTCPeerConnection和RTCDataChannel等API的跨浏览器支持。

2.建立对等端连接

在建立对等端之间的连接之前，必须使用信令服务器进行通信。信令是WebRTC的核心组件之一，用于促进对等端的安全连接。当两个浏览器建立端对端连接时，将使用信令来建立连接。

在此过程中，每个浏览器要执行以下操作：

使用createOffer（）方法创建一个元素；

然后发送该元素给其他浏览器，并等待对等端的回复；

使用createAnswer（）方法接收元素并发送答案；

当浏览器之间建立连接后，每个浏览器都可以通过连接安全地共享流的数据。

数据可以是双向的或单向的，这取决于您的需求。以下是使用WebRTC建立点对点连接的大致过程:

var peerConnection = new RTCPeerConnection(configuration);

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
    .then(function(mediaStream) {
        // 添加音视频流到连接中
        peerConnection.addStream(mediaStream);
    });
peerConnection.onicecandidate = function(event) {
    if (event.candidate) {
        // 发送本地ICE候选对象到其他浏览器
        signalingChannel.send(JSON.stringify({'ice': event.candidate}));
    }
};
signalingChannel.onmessage = function(event) {
    // 监听其他浏览器的消息
    var signal = JSON.parse(event.data);
    if (signal.sdp) {
        // 将SDP描述符添加到对等连接中
        peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp))
            .then(function() {
                // 如果远程SDP是一个offer，将发送一个answer
                if(signal.sdp.type == 'offer') {
                    return peerConnection.createAnswer();
                }
            })
            .then(function(answer) {
                // 向其他浏览器发送SDP答案
                peerConnection.setLocalDescription(answer);
                signalingChannel.send(JSON.stringify({'sdp': answer}));
            })
            .catch(function(error) {
                console.log('Error setting remote description', error);
            });
    } else if (signal.ice) {
        // 将远程ICE候选对象添加到连接中
        peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice))
            .catch(function(error) {
                console.log('Error adding received ice candidate', error);
            });
    }
}

3.在对等端连接上打开数据通道

整个过程大致分为三部分：建立本地连接、建立远程连接并打开数据通道。 Once a connection is established, you can use the RTCDataChannel API to open a peer-to-peer data channel between two browsers.

这是一些打开数据通道的基本步骤:

创建一个在浏览器之间传输数据的自定义数据通道；

注册事件侦听器接收从其他浏览器发送的消息；

将消息发送到其他浏览器。

以下是创建数据通道并注册事件侦听器的示例代码:

var dataChannel = peerConnection.createDataChannel('channelName', { reliable: true });

// 侦听其他浏览器发送的消息
dataChannel.onmessage = function(event) {
    console.log(event.data);
};
// 发送一个消息到其他浏览器
dataChannel.send('Hello, world!');

总结

在本文中，我向您介绍了使用WebRTC在浏览器之间轻松建立点对点连接。由于WebRTC是使用复杂的API来构建的，因此它需要一些学习时间和训练。不过，如果您花一些时间研究它，就可以构建出漂亮、功能齐全的实时应用程序。