How to talk to UDP sockets with HTML5?

In HTML5, directly using UDP sockets for communication is not natively supported because traditional HTML and web technologies primarily rely on TCP for communication, such as HTTP/HTTPS protocols. However, there is a technology called WebRTC (Web Real-Time Communication) that enables real-time audio and video communication between browsers and also supports the exchange of arbitrary data. Under the hood, it can transmit data over UDP, leveraging its low-latency characteristics.

Using UDP in WebRTC

WebRTC uses a framework called ICE (Interactive Connectivity Establishment), which can establish the optimal peer-to-peer communication through various technologies, including UDP. During the ICE connection establishment process, it considers all possible network paths (including UDP, TCP, or TCP forwarding) and selects the best path.

Practical Application Example

Suppose we need to transmit data over UDP between two browser clients; we can use WebRTC as follows:

1. Obtain Media Permissions: First, if audio and video are involved, we need to obtain the user's media device permissions.

javascript
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .then(function(stream) {
    // Use this stream for subsequent processing
  })
  .catch(function(error) {
    console.log('Failed to get media device:', error);
  });

1. Create RTCPeerConnection: This is the core object in WebRTC for managing audio and video transmission.

javascript
var peerConnection = new RTCPeerConnection();

1. Exchange Information (Signaling): WebRTC uses signaling to exchange information, such as ICE candidates and media metadata (SDP descriptors).

javascript
peerConnection.onicecandidate = function(event) {
  if (event.candidate) {
    // Send candidate to remote peer
  }
};

peerConnection.createOffer().then(function(offer) {
  return peerConnection.setLocalDescription(offer);
}).then(function() {
  // Send offer to remote peer
}).catch(function(error) {
  console.log('Failed to create or send Offer', error);
});

1. Establish Connection and Transmit Data: Once the signaling exchange is complete, the peers can transmit data through the established channel.

2. Transmit Data: Besides audio and video streams, we can also transmit arbitrary data using RTCDataChannel.

javascript
var dataChannel = peerConnection.createDataChannel("myChannel");

dataChannel.onmessage = function(event) {
  console.log("Received data:", event.data);
};

// Send data
dataChannel.send("Hello, this is a message transmitted over UDP!");

In summary, although HTML5 and web technologies do not natively support UDP sockets, through WebRTC, we can exchange real-time data between two browsers over UDP (via the best path selected by the ICE framework). This is very useful in scenarios requiring low-latency communication, such as online gaming and real-time communication.