创建信令信道

如 图4-2 所示，此处我们将重点放在示例调用流程的第一步。

让我们假设使用 Chrome 浏览器的第一个客户端加载 例4-1 的 HTML5 页面。 该页面首先连接到服务器，然后提示用户输入频道名称（图4-3）：

// Connect to server
var socket = io.connect('http://localhost:8181');
// Ask channel name from user
channel = prompt("Enter signaling channel name:");

图4-2 第一步：创建频道

图4-3 在 Chrome 中加载的示例页面（渠道发起者）

用户填写频道名称字段并单击 “OK” 按钮后，页面中的 JavaScript 代码将向服务器发送一条 create 或 join 消息：

if (channel !== "") {
  console.log('Trying to create or join channel: ', channel);
  // Send 'create or join' to the server
  socket.emit('create or join', channel);
}

收到客户的请求后，服务器将执行以下操作：

1. 验证所提及的渠道是一个全新的通道（即其中没有客户）
2. 将服务器端 room 与通道关联
3. 允许发出请求的客户端加入通道
4. 向客户端发送一条名为 created 的通知消息

以下代码段显示了此操作序列：

socket.on('create or join', function (channel) {
  var numClients = io.sockets.clients(channel).length;
  console.log('numclients = ' + numClients);
  // First client joining...
  if (numClients == 0) {
    socket.join(channel);
    socket.emit('created', channel);
...

图4-4 显示了执行上述操作后的服务器控制台。

当启动客户端收到服务器的答复时，它仅将事件记录在 JavaScript 控制台上和 HTML5 页面中包含的 <div> 元素内：

// Handle 'created' message
socket.on('created', function (channel) {
  console.log('channel ' + channel + ' has been created!');
  console.log('This peer is the initiator...');
  // Dynamically modify the HTML5 page
  div.insertAdjacentHTML( 'beforeEnd', '<p>Time: ' + (performance.now() / 1000).toFixed(3) + ' --> Channel ' + channel + ' has been created! </p>');
  div.insertAdjacentHTML( 'beforeEnd', '<p>Time: ' + (performance.now() / 1000).toFixed(3) + ' --> This peer is the initiator...</p>');
});

图4-4 信令服务器管理发起者的请求

上述情况如 图4-5 所示。

图4-5 频道创建后发起者的窗口