[Openfire]使用WebSocket建立Openfire的客户端

近日工作闲暇之余，对IM系统产生了兴趣，转而研究了IM的内容。找了半天，知道比较流行的是Openfire的系统，Openfire有许多平台实现，由于我是做Web的，所以当然是希望寻找Web的实现。Openfire的以前的Web实现，是基于Http-bind的一种长轮询机制，当然也没什么不好，只是我现在HTML5都开始了，当然希望能够来个基于Websocket的机制了。然而Google&百度了好久，也没有找到什么教程，发现这个东西并不是很火热的样子，那只好自己开始研究了。于是有了这一篇文章。

对了，我知道xmpp的JS框架有几个，但那些框架似乎都是按照原本的长轮询的机制来做的，并不是使用Websocket来做的。

另外，做软件2年了，当我刚涉足这个行业时，我被告知：“不要重复造轮子！”，曾经我对此深信不疑，但这两年的工作让我越发认识，不要重复造轮子，仅仅是在于做项目当中，做一个商业产品的时候，考虑到开发速度和产品后期的稳定性及维护性，确实需要采用成熟的技术，但！这不代表作为一个程序员，不应该抱着一种从0开始的研究精神，如果真的热爱这个行业，这个领域，就应该尝试着，根据RCF文档协议，从基础协议的层次开始做软件。

好了，废话不多说。恩，开始正文吧。

肯定是去 Openfire 的官网下载最新的Openfire服务端程序啦，Openfire的是开源的，可以免费下载。如图：

1. Openfire 的主程序，主程序是服务端程序，这个主程序不是一个框架，不是一个半成品，而是一个很完整的项目，怎么个很完整？就是你下载下来，直接双击运行（Windows），或到其程序的根目录下bin文件夹，然后执行 openfire start 命令（Linux），Mac就更简单了，直接在“设置”当中会有一个专门的管理窗口。然后它有一个Web版的管理后台，所有设置都可以在这个后台完成，包括安装插件之类的。
2. 这个火花（Spark）是Openfire搭配的客户端，也是多平台支持的。
3. 这个地方可以下载Openfire的源代码，你可以把他放到你的IDE中，然后简单配置一下，就可以run起来，这个教程网上很多，我就不多废话了。

这就不说了。

安装了WebSocket插件之后，有两个原本用于http-bind的端口，就被WebSocket占用了（有了WebSocket，还需要Http-bind做啥= =）。这两个接口分别是7443和7070，前者是用于HTTPS安全连接，后者是非安全连接。

建立链接：

1   var connectionState = ["正在连接..", "连接已建立", "正在关闭..", "已经关闭"];
2     var host = "ws://127.0.0.1:7070/ws/";
3     if (window.WebSocket != 'undefined') {
4         //OpenFire是实现了WebSocket的子协议
5         var connection = new WebSocket(host, "xmpp");
6 console.log(connectionState[connection.readyState]);
7         //注册连接建立时的方法
8         connection.onopen =wsOpen;
9         //注册连接关闭时的方法
10         connection.onclose =wsClose;
11         //注册收到消息时的方法
12         connection.onmessage =wsMsg;
13     }

如果要使用Https加密信道，就把Host改成：

var host="wss://127.0.0.1:7443/ws/

恩，建立安全连接还需要添加安全证书到Keystore，这个在Openfire的根目录下，有一个resource/security文件夹，里面有keyStore文件，当然，这部分我还不是很懂，关于Https的加密信道，TSL/SSl证书的概念，还没完全弄明白，不过这也不是这篇文章的重点。暂时我就先用非加密的方式来做，至于加密的连接，除了host的区别，其他也没有区别。

当Websocket握手之后，我们要做的第一件事，就是发起一个建立流的请求，

1 functionwsOpen(event) {
2         //打印链接状态
3 console.log(connectionState[connection.readyState]);
4         //发送建立流请求
5         var steam = "<open to='127.0.0.1' from='wuxinzhe@127.0.0.1'  xmlns='urn:ietf:params:xml:ns:xmpp-framing' xml:lang='zh' version='1.0'/>";
6 connection.send(steam);
7     }

Websocket下，建立流不像其他平台那样，使用<stream:stream/>标签，而是使用<open/>标签，其中to属性是域名，from是你的JID。

发出请求之后，会立刻收到服务器的响应：

第一条响应式服务器同意建立流，第二条是告诉你，安全验证的几种方式，其中最简单的方式是PLAIN方式，这种方式仅仅是将你的账号密码进行BASE64加密后传输，可以说是很不安全。当然，你也可以选择SCRAM-SHA-1的安全加密方式，只不过你的js库要支持SHA-1加密，我因为是刚开始探路，所以一切从简，SHA-1的加密方式请求流程跟PLAIN会有一点区别，回头咱们再说。

另外我这边写了一个当收到来自服务端信息的方法：

  functionwsMsg(event) {
        console.log("Server: " +event.data);
    }

打印出来而已。就像上面console面板中的信息一样。那个是chrome的调试器，其他浏览器也有对应的。

刚才说了，我先用最基本的PLAIN的方式登录：

   functionauth() {
        //Base64编码
        var token = window.btoa("wuxinzhe@127.0.0.1