HTML5之WebSocket（仅介绍客户端的实现）

一、传统http连接以及存在的问题

        对于传统的http连接有如下优缺点

        优点：连接比较简单

        缺点：每次都要重新发起连接请求并建立新的连接（Http1.1才有了keepalive），并且需要依赖session和cookie实现用户状态的跟踪。

二、websockets介绍

        websockets是html5引入的JavaScriptAPI，因为之前的Flash、Serverlight都具有socket功能，所以HTML5也就引入了WebSockets的功能。

       

        websockets的优势：

        持续连接的数据流、全双工的工作方式、http的补充而非代替。对于持续连接的数据流这个特点，就适合做一些例如实时性要求高的工作，例如游戏、视频、股票等。

如果使用http来做游戏的数据连接和传输，有很容易被外挂所模拟，例如模拟发送人物所做动作的数据，以及http的数据容易被外挂等监听到，而且http格式的数据容器被分析和修改，所以出现了websocket。socket的数据包即使被监听和抓取到也不容易分析其中的数据结构。

        并且http每次连接都要发送和接受一些http本身的元数据，对于需要的具体数据是比较少的，因此对于应用本身来说就相当于说了一些“废话”，而核心的只有那么一句。而socket是只发送需要的数据，对于附加的数据比较少，并且连接一旦建立就可以持续的在这个连接上通信。

        socket的通信性能和效率都比http要好。

      

        websockets核心就是2byte的通信，1byte定义开始，1byte定义字长。要使用socket，那么服务端就必须支持TCP的监听和连接，而不仅仅支持http的连接。

三、使用websockets

        创建客户端socket的代码如下：

window.onload = function() {

    //其中ws或wss是node.js服务端对websockets支持所使用的协议（？）

        ws = new WebSocket("ws://myserver:8887");

        ws.onopen =function() {   //连接建立成功onopen事件会被调用

          $("status").innerHTML ='online';

           $("status").style.color ='green';

        };

       

        ws.onmessage =function(e) {  //消息接受成功会唤起消息

          var msg;

            try{

                msg = JSON.parse(e.data);

            } catch (SyntaxError) {

                $("debug").innerHTML ="invalid message";

                return false;

            }

        }

   };

 

    //发送消息

   functionsendmsg() {

       ws.send($("ta").value);

   }

  

   //（服务端）连接断开时触发

   ws.onclose =function(e){

        $("status").innerHTML ='offline';

       $("status").style.color ='red';

   };

  

   //关闭页面时记得一定要关闭连接，否则服务端可能不会释放

   window.onunload =function(){

       ws.close();

   };

        在服务端同样需要监听客户端的连接、发送消息、关闭等事件。

      服务端的代码这里就不介绍了，可以使用Node.js实现也可以实现Java或PHP实现。

四、websockets深入介绍

        HTTP也是基于TCP协议的，websockets是网页上的socket应用，但是它不是基于HTTP的，也是直接基于TCP协议。

        http长连接：

        在以前 HTTP 协议中所谓的 keep-aliveconnection 是指在一次 TCP 连接中完成多个 HTTP 请求，但是对每个请求仍然要单独发 header；所谓的 polling 是指从客户端（一般就是浏览器）不断主动的向服务器发 HTTP 请求查询是否有新数据。这两种模式有一个共同的缺点，就是除了真正的数据部分外，服务器和客户端还要大量交换 HTTP header，信息交换效率很低。它们建立的“长连接”都是伪.长连接，只不过好处是不需要对现有的 HTTP server 和浏览器架构做修改就能实现。

        websockets：

        WebSocket解决的第一个问题是，通过第一个HTTP request 建立了TCP 连接之后，之后的交换数据都不需要再发HTTP request了，使得这个长连接变成了一个真的长连接。但是不需要发送HTTP header就能交换数据显然和原有的HTTP 协议是有区别的，所以它需要对服务器和客户端都进行升级才能实现。在此基础上WebSocket 还是一个双通道的连接，在同一个TCP 连接上既可以发也可以收信息。此外还有multiplexing 功能，几个不同的URI 可以复用同一个WebSocket 连接。这些都是原来的HTTP 不能做到的。

        websockets还存在的问题

        websockets虽然是实现了长连接，但是如果客户端与服务端长时间没有发送数据，那么网络链路就会认为这个连接已经失效，会自作主张的将其断开。而解决方案，WebSocket 的设计者们也早已想过。就是让服务器和客户端能够发送 Ping/Pong Frame（RFC 6455 - TheWebSocket Protocol）。这种 Frame 是一种特殊的数据包，它只包含一些元数据而不需要真正的 Data Payload，可以在不影响 Application 的情况下维持住中间网络的连接状态。

        注：更完整的介绍在知乎上：http://www.zhihu.com/question/20215561

        补充：oninput事件

        HTML5引入了oninput事件，即<input>或<textarea>的oninput事件，例如：<inputtype=”text” oninput=”myFn()” /> 当用户在该文本框中输入的时候会触发该事件，并调用myFn()函数。该事件类似onchange事件，但是onchange是在文本框失去焦点的时候才会触发的，而oninput是只要有输入就触发。

        包括IE9的主流浏览器都支持了，对于不支持的浏览器可以使用onkeydown或onkeyup来优雅降级。

 

        补充：跨站脚本攻击

        对于用户提交的文本内容，并且之后要在浏览器页面现实的，一定要注意不能让其输入可执行的脚本，例如js脚本，否则现实该内容的时候脚本会被执行从而获取网站保存的cookie等信息或执行其他的提交操作。例如cookie中保存了用户登录信息那么会获取到每个用户所登录的用户名。可以通过替换输入内容中的例如<等实现一定程度的防止其被执行。例如微博曾经发送的跨站脚本攻击导致连环效应。