Work in progress

The content of this page was not yet updated for Godot 4.2 and may be outdated. If you know how to improve this page or you can confirm that it’s up to date, feel free to open a pull request.

WebRTC

HTML5、WebSocket、WebRTC

Godot的一大特点是它能够导出到HTML5/WebAssembly平台, 当用户访问你的网页时, 你的游戏可以直接在浏览器中运行.

这对于演示和完整的游戏来说都是一个很好的机会, 但过去有一些限制, 在网络领域, 浏览器过去只支持HTTPRequests, 直到最近, 首先是WebSocket, 然后是WebRTC被提出为标准.

WebSocket

When the WebSocket protocol was standardized in December 2011, it allowed browsers to create stable and bidirectional connections to a WebSocket server. The protocol is a very powerful tool to send push notifications to browsers, and has been used to implement chats, turn-based games, etc.

不过,WebSockets仍然使用TCP连接, 这对可靠性有好处, 但对减少延迟没有好处, 所以不适合实时应用, 比如VoIP和快节奏的游戏.

WebRTC

为此, 从2010年开始, 谷歌开始研究一项名为WebRTC的新技术, 后来在2017年, 这项技术成为W3C候选推荐.WebRTC是一套复杂得集合规范, 并且在后台依靠许多其他技术(ICE, DTLS, SDP)来提供两个对等体之间快速, 实时, 安全的通信.

其想法是找到两个对等体之间最快的路线, 并尽可能建立直接通信(尽量避开中继服务器).

然而, 这是有代价的, 那就是在通信开始之前, 两个对等体之间必须交换一些媒介信息(以会话描述协议—SDP字符串的形式). 这通常采取所谓的WebRTC信号服务器的形式.

../../_images/webrtc_signaling.png

对等体连接到信号服务器(例如 WebSocket 服务器)并发送其媒介信息. 然后, 服务器将此信息转发到其他对等体, 允许它们建立所需的直接通信. 这一步完成后, 对等体可以断开与信号服务器的连接, 并保持直接的点对点(P2P)连接打开状态.

在 Godot 中使用 WebRTC

WebRTC is implemented in Godot via two main classes WebRTCPeerConnection and WebRTCDataChannel, plus the multiplayer API implementation WebRTCMultiplayerPeer. See section on high-level multiplayer for more details.

备注

These classes are available automatically in HTML5, but require an external GDExtension plugin on native (non-HTML5) platforms. Check out the webrtc-native plugin repository for instructions and to get the latest release.

警告

当导出到 Android 时，在导出项目或使用一键部署之前，确保在 Android 导出预设中启用 INTERNET 权限。否则，任何形式的网络通信都会被 Android 系统阻止。

最小连接示例

这个例子将向你展示如何在同一应用程序中的两个对等体之间创建WebRTC连接. 这在现实场景中并不是很有用, 但会让你对如何设置WebRTC连接有一个很好的概览.

  1. extends Node
  3. # Create the two peers
  4. var p1 = WebRTCPeerConnection.new()
  5. var p2 = WebRTCPeerConnection.new()
  6. # And a negotiated channel for each each peer
  7. var ch1 = p1.create_data_channel("chat", {"id": 1, "negotiated": true})
  8. var ch2 = p2.create_data_channel("chat", {"id": 1, "negotiated": true})
  10. func _ready():
  11.     # Connect P1 session created to itself to set local description.
  12.     p1.session_description_created.connect(p1.set_local_description)
  13.     # Connect P1 session and ICE created to p2 set remote description and candidates.
  14.     p1.session_description_created.connect(p2.set_remote_description)
  15.     p1.ice_candidate_created.connect(p2.add_ice_candidate)
  17.     # Same for P2
  18.     p2.session_description_created.connect(p2.set_local_description)
  19.     p2.session_description_created.connect(p1.set_remote_description)
  20.     p2.ice_candidate_created.connect(p1.add_ice_candidate)
  22.     # Let P1 create the offer
  23.     p1.create_offer()
  25.     # Wait a second and send message from P1.
  26.     await get_tree().create_timer(1).timeout
  27.     ch1.put_packet("Hi from P1".to_utf8_buffer())
  29.     # Wait a second and send message from P2.
  30.     await get_tree().create_timer(1).timeout
  31.     ch2.put_packet("Hi from P2".to_utf8_buffer())
  33. func _process(_delta):
  34.     # Poll connections
  35.     p1.poll()
  36.     p2.poll()
  38.     # Check for messages
  39.     if ch1.get_ready_state() == ch1.STATE_OPEN and ch1.get_available_packet_count() > 0:
  40.         print("P1 received: ", ch1.get_packet().get_string_from_utf8())
  41.     if ch2.get_ready_state() == ch2.STATE_OPEN and ch2.get_available_packet_count() > 0:
  42.         print("P2 received: ", ch2.get_packet().get_string_from_utf8())

这将打印:

  1. P1 received: Hi from P1
  2. P2 received: Hi from P2

本地信号示例

这个例子在上一个例子的基础上进行了扩展, 将对等体分离在两个不同的场景中, 并使用 singleton 作为信号服务器.

  1. extends Node
  2. # An example p2p chat client.
  4. var peer = WebRTCPeerConnection.new()
  6. # Create negotiated data channel.
  7. var channel = peer.create_data_channel("chat", {"negotiated": true, "id": 1})
  9. func _ready():
  10.     # Connect all functions.
  11.     peer.ice_candidate_created.connect(self._on_ice_candidate)
  12.     peer.session_description_created.connect(self._on_session)
  14.     # Register to the local signaling server (see below for the implementation).
  15.     Signaling.register(String(get_path()))
  18. func _on_ice_candidate(mid, index, sdp):
  19.     # Send the ICE candidate to the other peer via signaling server.
  20.     Signaling.send_candidate(String(get_path()), mid, index, sdp)
  23. func _on_session(type, sdp):
  24.     # Send the session to other peer via signaling server.
  25.     Signaling.send_session(String(get_path()), type, sdp)
  26.     # Set generated description as local.
  27.     peer.set_local_description(type, sdp)
  30. func _process(delta):
  31.     # Always poll the connection frequently.
  32.     peer.poll()
  33.     if channel.get_ready_state() == WebRTCDataChannel.STATE_OPEN:
  34.         while channel.get_available_packet_count() > 0:
  35.             print(String(get_path()), " received: ", channel.get_packet().get_string_from_utf8())
  38. func send_message(message):
  39.     channel.put_packet(message.to_utf8_buffer())

现在是本地信号服务器:

备注

这个本地信号服务器应该是作为一个 singleton 来连接同一场景中的两个对等体.

  1. # A local signaling server. Add this to autoloads with name "Signaling" (/root/Signaling)
  2. extends Node
  4. # We will store the two peers here
  5. var peers = []
  7. func register(path):
  8.     assert(peers.size() < 2)
  9.     peers.append(path)
  10.     if peers.size() == 2:
  11.         get_node(peers[0]).peer.create_offer()
  14. func _find_other(path):
  15.     # Find the other registered peer.
  16.     for p in peers:
  17.         if p != path:
  18.             return p
  19.     return ""
  22. func send_session(path, type, sdp):
  23.     var other = _find_other(path)
  24.     assert(other != "")
  25.     get_node(other).peer.set_remote_description(type, sdp)
  28. func send_candidate(path, mid, index, sdp):
  29.     var other = _find_other(path)
  30.     assert(other != "")
  31.     get_node(other).peer.add_ice_candidate(mid, index, sdp)

然后, 你可以这样使用它:

  1. # Main scene (main.gd)
  2. extends Node
  4. const Chat = preload("res://chat.gd")
  6. func _ready():
  7.     var p1 = Chat.new()
  8.     var p2 = Chat.new()
  9.     add_child(p1)
  10.     add_child(p2)
  12.     # Wait a second and send message from P1
  13.     await get_tree().create_timer(1).timeout
  14.     p1.send_message("Hi from %s" % String(p1.get_path()))
  16.     # Wait a second and send message from P2
  17.     await get_tree().create_timer(1).timeout
  18.     p2.send_message("Hi from %s" % String(p2.get_path()))

将打印出类似这样的内容:

  1. /root/main/@@3 received: Hi from /root/main/@@2
  2. /root/main/@@2 received: Hi from /root/main/@@3

使用 WebSocket 进行远程信号传输

A more advanced demo using WebSocket for signaling peers and WebRTCMultiplayerPeer is available in the godot demo projects under networking/webrtc_signaling.

Previous Next

© 版权所有 2014-present Juan Linietsky, Ariel Manzur and the Godot community (CC BY 3.0). Revision b1c660f7.

Built with Sphinx using a theme provided by Read the Docs.