WebSocket简单介绍(WebSocket 实战)(3)

这一节里我们用一个案例来演示怎么使用 WebSocket 构建一个实时的 Web 应用。这是一个简单的实时多人聊天系统，包括客户端和服务端的实现。客户端通过浏览器向聊天服务器发起请求，服务器端解析客户端发出的握手请求并产生应答 信息返回给客户端，从而在客户端和服务器之间建立连接通道。服务器支持广播功能，每个聊天用户发送的信息会实时的发送给所有的用户，当用户退出聊天室时， 服务器端需要清理相应用户的连接信息，避免资源的泄漏。以下我们分别从服务器端和客户端来演示这个 Web 聊天系统的实现，在实现方式上我们采用了 C# 语言来实现 WebSocket 服务器，而客户端是一个运行在浏览器里的 HTML 文件。

WebSocket 服务器端实现

这 个聊天服务器的实现和基于套接字的网络应用程序非常类似，首先是服务器端要启动一个套接字监听来自客户端的连接请求，关键的区别在于 WebSocket 服务器需要解析客户端的 WebSocket 握手信息，并根据 WebSocket 规范的要求产生相应的应答信息。一旦 WebSocket 连接通道建立以后，客户端和服务器端的交互就和普通的套接字网络应用程序是一样的了。所以在下面的关于 WebSocket 服务器端实现的描述中，我们主要阐述 WebSocket 服务器怎样处理 WebSocket 握手信息，至于 WebSocket 监听端口的建立，套接字信息流的读取和写入，都是一些常用的套接字编程的方式，我们就不多做解释了，您可以自行参阅本文的附件源代码文件。

在描述 WebSocket 规范时提到，一个典型的 WebSocket Upgrade 信息如下所示：

 GET /demo HTTP/1.1
 Host: example.com
 Connection: Upgrade
 Sec-WebSocket-Key2:   Y3  .P00
 Upgrade: WebSocket
 Sec-WebSocket-Key1: @ 46546xW%0l
 Origin: http://example.com
 [-byte security key]

其中 Sec-WebSocket-Key1，Sec-WebSocket-Key2 和 [8-byte security key] 这几个头信息是 WebSocket 服务器用来生成应答信息的来源，依据 draft-hixie-thewebsocketprotocol-76 草案的定义，WebSocket 服务器基于以下的算法来产生正确的应答信息：

1. 逐个字符读取 Sec-WebSocket-Key1 头信息中的值，将数值型字符连接到一起放到一个临时字符串里，同时统计所有空格的数量；
2. 将在第 1 步里生成的数字字符串转换成一个整型数字，然后除以第 1 步里统计出来的空格数量，将得到的浮点数转换成整数型；
3. 将第 2 步里生成的整型值转换为符合网络传输的网络字节数组；
4. 对 Sec-WebSocket-Key2 头信息同样进行第 1 到第 3 步的操作，得到另外一个网络字节数组；
5. 将 [8-byte security key] 和在第 3，第 4 步里生成的网络字节数组合并成一个 16 字节的数组；
6. 对第 5 步生成的字节数组使用 MD5 算法生成一个哈希值，这个哈希值就作为安全密钥返回给客户端，以表明服务器端获取了客户端的请求，同意创建 WebSocket 连接

至 此，客户端和服务器的 WebSocket 握手就完成了，WebSocket 通道也建立起来了。下面首先介绍一下服务器端实现是如何根据用户传递的握手信息来生成网络字节数组的。.NET 平台提供了很方便的对字符串，数值以及数组操作的函数，所以生成字节数组的方法还是非常简单明了的，代码如下：

生成网络字节数组的代码

 private byte[] BuildServerPartialKey(string clientKey)
  {
       string partialServerKey = "";
      byte[] currentKey;
      int spacesNum = ;
      char[] keyChars = clientKey.ToCharArray();
      foreach (char currentChar in keyChars)
      {
          if (char.IsDigit(currentChar)) partialServerKey += currentChar;
         if (char.IsWhiteSpace(currentChar)) spacesNum++;
      }
      try
      {
               currentKey = BitConverter.GetBytes((int)(Int64.Parse(partialServerKey)
  / spacesNum));
         if (BitConverter.IsLittleEndian) Array.Reverse(currentKey);
      }
      catch
      {
         if (currentKey!= null) Array.Clear(currentKey, , currentKey.Length);
      }
      return currentKey;
   }

得到网络字节数组以后，服务器端生成 16 位安全密钥的方法如下所示：

生成 16 位安全密钥的代码

 private byte[] BuildCompleteServerKey(byte[] serverKey1, byte[] serverKey2,
  byte[] last8Bytes)
  {
      byte[] concatenatedKeys = new byte[];
     Array.Copy(serverKey1, , concatenatedKeys, , );
     Array.Copy(serverKey2, , concatenatedKeys, , );
     Array.Copy(last8Bytes, , concatenatedKeys, , );
     System.Security.Cryptography.MD5 MD5Service =
  System.Security.Cryptography.MD5.Create();
    return MD5Service.ComputeHash(concatenatedKeys);
  }

整个实现是非常简单明了的，就是将生成的网络字节数组和客户端提交的头信息里的 [8-byte security key] 合并成一个 16 位字节数组并用 MD5 算法加密，然后将生成的安全密钥作为应答信息返回给客户端，双方的 WebSocekt 连接通道就建立起来了。实现了 WebSocket 握手信息的处理逻辑，一个具有基本功能的 WebSocket 服务器就完成了。整个 WebSocket 服务器由两个核心类构成，一个是 WebSocketServer，另外一个是 SocketConnection，出于篇幅的考虑，我们不介绍每个类的属性和方法了，文章的附件会给出详细的源代码，有兴趣的读者可以参考。

服务器刚启动时的画面如下：

WebSocket 服务器刚启动的画面

aaarticlea/png;base64,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" alt="" />

客户端可以依据这个信息填写聊天服务器的连接地址，当有客户端连接到聊天服务器上时，服务器会打印出客户端和服务器的握手信息，每个客户的聊天信息也会显示在服务器的界面上，运行中的聊天服务器的界面如下：

有客户端连接到 WebSocket 服务器的

aaarticlea/png;base64,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" alt="" />

以上我们简单描述了实现一个 WebSocket 服务器的最基本的要素，下一节我们会描述客户端的实现。

客户端实现

客 户端的实现相对于服务器端的实现来说要简单得多了，我们只需要发挥想象去设计 HTML 用户界面，然后呼叫 WebSocket JavaScript 接口来和 WebSocket 服务器端来交互就可以了。当然别忘了使用一个支持 HTML5 和 WebSocket 的浏览器，在笔者写这篇文章的时候使用的浏览器是 Firefox。客户端的页面结构是非常简洁的，初始运行界面如下：

聊天室客户端初始页面

aaarticlea/png;base64,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" alt="" width="476" height="339" />

当页面初次加载的时候，首先会检测当前的浏览器是否支持 WebSocket 并给出相应的提示信息。用户按下连接按钮时，页面会初始化一个到聊天服务器的 WebSocekt 连接，初始化成功以后，页面会加载对应的 WebSocket 事件处理函数，客户端 JavaScript 代码如下所示：

初始化客户端 WebSocket 对象的代码

 function ToggleConnectionClicked() {
           if (SocketCreated && (ws.readyState == 0 || ws.readyState == 1)) {
                 ws.close();
             } else {
                 Log("准备连接到聊天服务器 ...");
                 try {
                  ws =
                  new WebSocket("ws://" + document.getElementById("Connection").value);
                   SocketCreated = true;
                 } catch (ex) {
                   Log(ex, "ERROR");
                   return;
                 }
                 document.getElementById("ToggleConnection").innerHTML = "断开";
                 ws.onopen = WSonOpen;
                 ws.onmessage = WSonMessage;
                 ws.onclose = WSonClose;
                 ws.onerror = WSonError;
             }
         };

         function WSonOpen() {
             Log("连接已经建立。", "OK");
             $("#SendDataContainer").show("slow");
         };

         function WSonMessage(event) {
             Log(event.data);
         };

         function WSonClose() {
             Log("连接关闭。", "ERROR");
             document.getElementById("ToggleConnection").innerHTML = "连接";
             $("#SendDataContainer").hide("slow");
         };

         function WSonError() {
             Log("WebSocket错误。", "ERROR");
         };

当用户按下发送按钮，客户端会调用WebSocket对象向服务器发送信息，并且这个消息会广播给所有的用户，实现代码如下所示：

 function SendDataClicked()
  {
             if (document.getElementById("DataToSend").value != "") {
                 ws.send(document.getElementById("txtName").value + "说 :\"" +
 document.getElementById("DataToSend").value + "\"");
                 document.getElementById("DataToSend").value = "";
             }
         };

如果有多个用户登录到聊天服务器，客户端页面的运行效果如下所示：

聊天客户端运行页面

aaarticlea/png;base64,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" alt="" width="530" height="371" />

至此我们已经完成了一个完整的 WebSocket 客户端实现，用户可以体验一下这个聊天室的简单和快捷，完全不用考虑页面的刷新和繁琐的 Ajax 调用，享受桌面程序的用户体验。WebSocket 的强大和易用可见一斑，您完全可以在这个基础上加入更多的功能，设计更加漂亮的用户界面，切身体验 WebSocket 的震撼力。完整的客户端代码请参阅附件提供的源代码。

WebSocket 的局限性

WebSocket 的优点已经列举得很多了，但是作为一个正在演变中的 Web 规范，我们也要看到目前用 Websocket 构建应用程序的一些风险。首先，WebSocket 规范目前还处于草案阶段，也就是它的规范和 API 还是有变动的可能，另外的一个风险就是微软的 IE 作为占市场份额最大的浏览器，和其他的主流浏览器相比，对 HTML5 的支持是比较差的，这是我们在构建企业级的 Web 应用的时候必须要考虑的一个问题。

总结

本文介绍了 HTML5 WebSocket 的横空出世以及它尝试解决的的问题，然后介绍了 WebSocket 规范和 WebSocket 接口，以及和传统的实时技术相比在性能上的优势，并且演示了怎样使用 WebSocket 构建一个实时的 Web 应用，最后我们介绍了当前的主流浏览器对 HTML5 的支持情况和 WebSocket 的局限性。不过，我们应该看到，尽管 HTML5 WebSocket 目前还有一些局限性，但是已经是大势所趋，微软也明确表达了未来对 HTML5 的支持，而且这些支持我们可以在 Windows 8 和 IE10 里看到，我们也在各种移动设备，平板电脑上看到了 HTML5 和 WebSocket 的身影。WebSocket 将会成为未来开发实时 Web 应用的生力军应该是毫无悬念的了，作为 Web 开发人员，关注 HTML5，关注 WebSocket 也应该提上日程了，否则我们在新一轮的软件革新的浪潮中只能做壁上观了。