WebSockets 是一种全双工通信协议，它允许客户端和服务器之间建立实时的双向通信。与传统的 HTTP 连接不同，WebSockets 允许多个客户端同时连接到服务器，而且它们可以在没有 HTTP 请求或响应的情况下通信。
在 Web 开发中，使用 WebSockets 实现 P2P 通信是非常有用的。P2P 即点对点通信，意味着两个浏览器之间可以直接通信，而无需经过服务器。这种方式非常适合用于实时在线游戏、聊天应用程序等场景。 在本文中，我们将学习如何使用 WebSockets 实现 P2P 通信。
如何使用 WebSockets 实现 P2P 通信？
使用 WebSockets 实现 P2P 通信需要以下步骤：
步骤1：创建 WebSocket 对象
首先，我们需要在客户端代码中创建一个 WebSocket 对象，以便连接到服务器。我们可以使用标准的 JavaScript WebSocket API 来完成此操作。以下是创建 WebSocket 对象的示例代码：
const socket = new WebSocket('ws://localhost:8080');步骤2：建立连接
一旦创建了 WebSocket 对象，我们就可以使用 socket 的 onopen 属性来监听连接事件。当连接成功建立时，我们可以在该函数中执行一些特定的操作。例如，在本示例中，我们可以向服务器发送一个消息以告知其我们已经成功连接：
socket.onopen = function() {
console.log('WebSocket 连接已建立');
socket.send('我已经连接了！');
};步骤3：发送和接收数据
现在，我们已经可以与服务器通信了，我们可以使用 socket 的 send() 方法来发送数据。 以下是一个简单的例子，演示如何发送字符串消息：
socket.send('你好，我是浏览器！');我们也可以使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串，并使用 socket.send() 方法将其发送到服务器。
客户端接收服务器发送的消息可以使用 socket 的 onmessage 属性监听消息事件。以下是示例代码：
socket.onmessage = function(event) {
console.log('接收到消息：', event.data);
};步骤4：关闭连接
最后，当我们完成通信时，我们可以使用 socket 的 close() 方法来关闭连接。示例代码如下：
socket.close();
总结
WebSockets 允许我们创建实时的双向通信，并使用 P2P 模式实现直接浏览器之间的通信，这对于实时聊天应用程序、在线游戏等场景非常有用。 在本文中，我们学习了如何使用 WebSockets 在浏览器中实现 P2P 通信。我们学习了创建 WebSocket 对象、建立连接、发送和接收数据以及关闭连接的步骤。 我们希望这篇文章对您有所帮助，以便在未来的项目中更好地利用 WebSockets 实现 P2P 通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14339