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连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连 接。

项目功能分析：

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

在实际的开发过程中，为了使用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

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

执行成功后，会在server目录下生成了一个名为node_modules的文件夹，里面分别是express和socket.io。
三、启动服务端
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