前面讲到WebSocket是HTML5中新增的一种通信协议，这意味着一部分老版本浏览器（主要是IE10以下版本）并不具备这个功能， 通过百度统计的公开数据显示，IE8目前仍以33%的市场份额占据榜首，好在chrome浏览器市场份额逐年上升，现在以超过26%的市场份额位居第二，同时微软前不久宣布停止对IE6的技术支持并提示用户更新到新版本浏览器，这个曾经让无数前端工程师为之头疼的浏览器有望退出历史舞台，再加上几乎所有的智能手机浏览器都支持HTML5，所以使得WebSocket的实战意义大增，但是无论如何，我们实际的项目中，仍然要考虑低版本浏览器的兼容方案：在支持WebSocket的浏览器中采用新技术，而在不支持WebSocket的浏览器里启用Comet来接收发送消息。

WebSocket实战

本文将以多人在线聊天应用作为实例场景，我们先来确定这个聊天应用的基本需求。

需求分析

1、兼容不支持WebSocket的低版本浏览器。
2、允许客户端有相同的用户名。
3、进入聊天室后可以看到当前在线的用户和在线人数。
4、用户上线或退出，所有在线的客户端应该实时更新。
5、用户发送消息，所有客户端实时收取。

在实际的开发过程中，为了使用WebSocket接口构建Web应用，我们首先需要构建一个实现了 WebSocket规范的服务端，服务端的实现不受平台和开发语言的限制，只需要遵从WebSocket规范即可，目前已经出现了一些比较成熟的WebSocket服务端实现，比如本文使用的Node.js+http://Socket.IO。为什么选用这个方案呢？先来简单介绍下他们两。

Node.js

Node.js采用C++语言编写而成，它不是Javascript应用，而是一个Javascript的运行环境，据Node.js创始人Ryan Dahl回忆，他最初希望采用Ruby来写Node.js，但是后来发现Ruby虚拟机的性能不能满足他的要求，后来他尝试采用V8引擎，所以选择了C++语言。

Node.js支持的系统包括*nux、Windows，这意味着程序员可以编写系统级或者服务器端的Javascript代码，交给Node.js来解释执行。Node.js的Web开发框架Express，可以帮助程序员快速建立web站点，从2009年诞生至今，Node.js的成长的速度有目共睹，其发展前景获得了技术社区的充分肯定。

http://Socket.IO

http://Socket.IO是一个开源的WebSocket库，它通过Node.js实现WebSocket服务端，同时也提供客户端JS库。http://Socket.IO支持以事件为基础的实时双向通讯，它可以工作在任何平台、浏览器或移动设备。

http://Socket.IO支持4种协议：WebSocket、htmlfile、xhr-polling、jsonp-polling，它会自动根据浏览器选择适合的通讯方式，从而让开发者可以聚焦到功能的实现而不是平台的兼容性，同时http://Socket.IO具有不错的稳定性和性能。

编码实现

本文一开始的的插图就是效果演示图：可以点击这里查看在线演示，整个开发过程非常简单，下面简单记录了开发步骤：

根据自己的操作系统，去Node.js官网下载安装即可。如果成功安装。在命令行输入node -v和npm -v应该能看到相应的版本号。

<img src="https://pic4.zhimg.com/9bae01a50a77c4f238d7afe632873343_b.jpg" data-rawwidth="278" data-rawheight="79" class="content_image" width="278">
搭建WebSocket服务端

这个环节我们尽可能的考虑真实生产环境，把WebSocket后端服务搭建成一个线上可以用域名访问的服务，如果你是在本地开发环境，可以换成本地ip地址，或者使用一个虚拟域名指向本地ip。

先进入到你的工作目录，比如 /workspace/wwwroot/plhwin/http://realtime.plhwin.com，新建一个名为package.json的文件，内容如下：

<img src="https://pic1.zhimg.com/3d487b79444ca0d1e69004ba8aa1ac54_b.jpg" data-rawwidth="372" data-rawheight="105" class="content_image" width="372">

接下来使用npm命令安装express和http://socket.io

<img src="https://pic1.zhimg.com/e2177bce610448a115a9716219448878_b.jpg" data-rawwidth="268" data-rawheight="45" class="content_image" width="268">

安装成功后，应该可以看到工作目录下生成了一个名为node_modules的文件夹，里面分别是express和http://socket.io，接下来可以开始编写服务端的代码了，新建一个文件：index.js

<img src="https://pic1.zhimg.com/e636acfe7577ee8511dc4840cdd92198_b.jpg" data-rawwidth="437" data-rawheight="180" class="origin_image zh-lightbox-thumb" width="437" data-original="https://pic1.zhimg.com/e636acfe7577ee8511dc4840cdd92198_r.jpg">

命令行运行node index.js，如果一切顺利，你应该会看到返回的listening on *:3000字样，这说明服务已经成功搭建了。此时浏览器中打开 http://localhost:3000 应该可以看到正常的欢迎页面。

如果你想要让服务运行在线上服务器，并且可以通过域名访问的话，可以使用Nginx做代理，在nginx.conf中添加如下配置，然后将域名（比如：http://realtime.plhwin.com）解析到服务器IP即可。

<img src="https://pic3.zhimg.com/f3614ed8bd74aa69f74f10aa7a52f2c2_b.jpg" data-rawwidth="326" data-rawheight="131" class="content_image" width="326">

完成以上步骤，http://realtime.plhwin.com:3000的后端服务就正常搭建了。

<img src="https://pic1.zhimg.com/3defa7f8c03ac8a9edcd56ec9faac8d0_b.jpg" data-rawwidth="424" data-rawheight="114" class="origin_image zh-lightbox-thumb" width="424" data-original="https://pic1.zhimg.com/3defa7f8c03ac8a9edcd56ec9faac8d0_r.jpg">
服务端代码实现

前面讲到的index.js运行在服务端，之前的代码只是一个简单的WebServer欢迎内容，让我们把WebSocket服务端完整的实现代码加入进去，整个服务端就可以处理客户端的请求了。完整的index.js代码如下：

<img src="https://pic3.zhimg.com/9f83d36396cf25fc5c26c28e48027482_b.jpg" data-rawwidth="785" data-rawheight="901" class="origin_image zh-lightbox-thumb" width="785" data-original="https://pic3.zhimg.com/9f83d36396cf25fc5c26c28e48027482_r.jpg">
客户端代码实现

进入客户端工作目录/workspace/wwwroot/plhwin/http://demo.plhwin.com/chat，新建一个index.html:

<img src="https://pic2.zhimg.com/443f426e187102685e738c18e127b879_b.jpg" data-rawwidth="930" data-rawheight="719" class="origin_image zh-lightbox-thumb" width="930" data-original="https://pic2.zhimg.com/443f426e187102685e738c18e127b879_r.jpg">

上面的html内容本身没有什么好说的，我们主要看看里面的4个文件请求：
1、http://realtime.plhwin.com:3000/socket.io/socket.io.js
2、style.css
3、json3.min.js
4、client.js

第1个JS是http://Socket.IO提供的客户端JS文件，在前面安装服务端的步骤中，当npm安装完http://socket.io并搭建起WebServer后，这个JS文件就可以正常访问了。

第2个style.css文件没什么好说的，就是样式文件而已。

第3个JS只在IE8以下版本的IE浏览器中加载，目的是让这些低版本的IE浏览器也能处理json，这是一个开源的JS，详见：JSON 3

第4个client.js是完整的客户端的业务逻辑实现代码，它的内容如下：

<img src="https://pic1.zhimg.com/a1589ae83cf934578d4b1832cabe9c44_b.jpg" data-rawwidth="929" data-rawheight="2094" class="origin_image zh-lightbox-thumb" width="929" data-original="https://pic1.zhimg.com/a1589ae83cf934578d4b1832cabe9c44_r.jpg">

至此所有的编码开发工作全部完成了，在浏览器中打开 http://demo.plhwin.com/chat/ 就可以看到效果了。

上面所有的客户端和服务端的代码可以从Github上获得，地址：https://github.com/plhwin/nodejs-socketio-chat

<img src="https://pic2.zhimg.com/6841cebd770b3ec0cc850356eff9d185_b.jpg" data-rawwidth="620" data-rawheight="45" class="origin_image zh-lightbox-thumb" width="620" data-original="https://pic2.zhimg.com/6841cebd770b3ec0cc850356eff9d185_r.jpg">

下载本地后有两个文件夹 client 和 server，client文件夹是客户端源码，可以放在Nginx/Apache的WebServer中，也可以放在Node.js的WebServer中。后面的server文件夹里的代码是websocket服务端代码，放在Node.js环境中，使用npm安装完 express 和 http://socket.io 后，node index.js 启动后端服务就可以了。

留给我们的思考

1、假设是一个在线客服系统，里面有许多的公司使用你的服务，每个公司自己的用户可以通过一个专属URL地址进入该公司的聊天室，聊天是一对一的，每个公司可以新建多个客服人员，每个客服人员可以同时和客户端的多个用户聊天。

2、又假设是一个在线WebIM系统，实现类似微信，qq的功能，客户端可以看到好友在线状态，在线列表，添加好友，删除好友，新建群组等，消息的发送除了支持基本的文字外，还能支持表情、图片和文件。

有兴趣的同学可以继续深入研究。

--------------------------

上面是我前段时间写的一篇与WebSocket这个主题相关的文档，就直接贴过来了，原文请见：使用Node.js+Socket.IO搭建WebSocket实时应用