Node.js+Socket.IO实现的WebSocket群聊天室源码

首先上图上实例




聊天室地址：http://chat.52itstyle.com


WebSocket简介

谈到Web实时推送，就不得不说WebSocket。在WebSocket出现以前，不少网站为了实现实时推送技术，一般采用的方案是轮询 (Polling)和Comet技术，Comet又可细分为两种实现方式，一种是长轮询机制，一种称为流技术，这两种方式其实是对轮询技术的改进，这些 方案带来很明显的缺点，须要由浏览器对服务器发出HTTP request，大量消耗服务器带宽和资源。面对这种情况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并实现真正意义上的实 时推送。

WebSocket协议本质上是一个基于TCP的协议，它由通讯协议和编程API组成，WebSocket可以在浏览器和服务器之间创建双向链接， 以基于事件的方式，赋予浏览器实时通讯能力。既然是双向通讯，就意味着服务器端和客户端能够同时发送并响应请求，而再也不像HTTP的请求和响应。

为了创建一个WebSocket链接，客户端浏览器首先要向服务器发起一个HTTP请求，这个请求和一般的HTTP请求不一样，包含了一些附加头信 息，其中附加头信息”Upgrade: WebSocket”代表这是一个申请协议升级的HTTP请求，服务器端解析这些附加的头信息而后产生应答信息返回给客户端，客户端和服务器端的 WebSocket链接就创建起来了，双方就能够经过这个链接通道自由的传递信息，而且这个链接会持续存在直到客户端或者服务器端的某一方主动的关闭连 接。

项目功能分析：

一、兼容不支持WebSocket的低版本浏览器。
二、容许客户端有相同的用户名。
三、进入聊天室后能够看到当前在线的用户和在线人数。
四、用户上线或退出，全部在线的客户端应该实时更新。
五、用户发送消息，全部客户端实时收取。

在实际的开发过程当中，为了使用WebSocket接口构建Web应用，咱们首先须要构建一个实现了 WebSocket规范的服务端，服务端的实现不受平台和开发语言的限制，只须要听从WebSocket规范便可，目前已经出现了一些比较成熟的 WebSocket服务端实现，好比本文使用的Node.js+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的 成长的速度有目共睹，其发展前景得到了技术社区的充分确定。

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

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


如何安装Node.js

http://www.52itstyle.com/thread-21549-1-1.html

本实例采用nodejs-socketio-chat，地址为https://github.com/plhwin/nodejs-socketio-chat
解压后目录中会有一个服务端和客户端，如图：
 

搭建WebSocket服务端

服务器环境 centos6.5,Nginx,Node.js

1、首先下载文件并解压
2、切换到server目录下执行一下操做
npm install --save express
npm install --save socket.io

执行成功后，会在server目录下生成了一个名为node_modules的文件夹，里面分别是express和socket.io。
3、启动服务端
node index.js& 后台运行。

搭建WebSocket客户端

使用Ngin部署客户端并绑定域名

1. server {
2.         listen       80;
3.         server_name   chat.52itstyle.com;
4.         location / {
5.    index  index.html index.htm;
6.    root  /home/chat/52chat/client;
7.         }
8.         error_page   500 502 503 504  /50x.html;
9.         location = /50x.html {
10.     root   html;
11.         }
12.     }

复制代码

启动Nginx，如今就能够访问客户端了:http://chat.52itstyle.com