websocket

聊天室原理

我们经常用到的社交软件，qq，微信，以及一些网站的聊天室，就比方说群聊，他们的模式大都是，所有的客户端请求都发送到同一个服务器上，服务器统一处理，将收到的信息再广播到这个聊天室的用户的客户端界面上，也就是当A发了一条消息，凡是进入聊天室的人都可以看到，而此时其他人是不需要去请求服务器查看这些消息，是服务器自动发送给客户端的

http无法轻松实现实时应用

我们知道，http是无状态协议，服务器只会响应来自客户端的请求，无法和客户端进行持续连接

比如说，我们可以非常轻松的捕获浏览器上发生的事件（比如用户点击了盒子），这个事件可以轻松产生与服务器的数据交互（比如Ajax）。但是，反过来却是不可能的：服务器端发生了一个事件，服务器无法将这个事件的信息实时主动通知它的客户端。只有在客户端查询服务器的当前状态的时候，所发生事件的信息才会从服务器传递到客户端。
那么像我们经常见到的聊天室，就像群聊一样，服务器必须自己像客户端响应，解决办法也不是没有，如果继续使用http协议就要这样做不过代价有点大。

（1）长轮询：客户端每隔很短的时间，都会对服务器发出请求，查看是否有新的消息，只要轮询速度足够快，例如1秒，就能给人造成交互是实时进行的印象。这种做法是无奈之举，实际上对服务器、客户端双方都造成了大量的性能浪费。

（2）长连接：客户端只请求一次，但是服务器会将连接保持，不会返回结果（想象一下我们没有写res.end()时，浏览器一直转小菊花）。服务器有了新数据，就将数据发回来，又有了新数据，就将数据发回来，而一直保持挂起状态。这种做法的也造成了大量的性能浪费。

websocket 是什么

WebSocket协议能够让浏览器和服务器全双工实时通信，互相的，服务器也能主动通知客户端了

WebSocket的原理非常的简单：利用HTTP请求产生握手，HTTP头部中含有WebSocket协议的请求，所以握手之后，二者转用TCP协议进行交流（QQ的协议）。现在的浏览器和服务器之间，就是QQ和QQ服务器的关系了。

所以WebSocket协议，需要浏览器支持，更需要服务器支持。
● 支持WebSocket协议的浏览器有：Chrome 4、火狐4、IE10、Safari5
● 支持WebSocket协议的服务器有：Node 0、Apach7.0.2、Nginx1.3

websock如何使用

网址：http://socket.io/
可以使用原生node，也可以使用express框架。
接下来以聊天室为案例说一说如何使用websocket

聊天室案例

这个案例实现的功能是，用户在首页登录后可以进入聊天室，开始发文字聊天，可以看到同聊天室的聊天内容，没有登录的用户不能进入聊天室

前端：

这里使用模板引擎，有两个页面一个是首页也就是登录页面，另一个是聊天室页面。
着重讲聊天室页面 chat.ejs，其实在前台后台都有一个socket对象，可监听也可以上传聊天内容。

<!--必须要引用这个脚本文件/socket.io/socket.io.js-->    <script type="text/javascript" src="/socket.io/socket.io.js"></script>    <script type="text/javascript" src="/jquery-1.11.3.min.js"></script>    <script type="text/javascript">        var socket = io();//实例化io对象        $("#neirong").keydown(function(e){//监听内容文本框的键盘输入            if(e.keyCode == 13){//表示如果按下回车键                //把文本框的内容上传：                socket.emit("liaotian",{//上传聊天文字到服务器                    "neirong" : $("#neirong").val(),                    "ren" : $("#yonghu").html()                });                console.log(this);                $(this).val("");            }        });        socket.on("liaotian",function(msg){//接收服务器发送过来的聊天内容并用列表罗列出来            //prepend 最新的内容插在页面顶端            //append 最新的内容插在页面底端            $(".liebiao").prepend("<li><b>" + msg.ren + "：</b>"+ msg.neirong + "</li>");        });    </script>

app.js：

//注意这没有包含在req闭包里面，因为这不是http协议io.on("connection",function(socket){    socket.on("liaotian",function(msg){        console.log(msg)        //把接收到的msg原样广播         io.emit("liaotian",msg);    });});

效果图：

代码提取连接：
链接：http://pan.baidu.com/s/1eSnHIGM 密码：8ya5