文档章节

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

小柒2012
 小柒2012
发布于 2016/07/13 21:04
字数 1380
阅读 266
收藏 3

首先上图上实例




聊天室地址: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

© 著作权归作者所有

共有 人打赏支持
小柒2012
粉丝 121
博文 28
码字总数 30355
作品 0
青岛
程序员
加载中

评论(1)

m
miaomiaogong1
web实时推送技术使用越来越广泛,但是自己开发又太麻烦了,我觉得没有那个必要,GoEasy就挺不错的,服务器稳定,代码简洁易懂;官网: https://goeasy.io/
SpringBoot | 第十九章:web应用开发之WebSocket

前言 也讲解了三章了,这章节开始讲解关于与前端通信相关知识。实现一个在线聊天室类似的功能或者后端推送消息到前端,在没有时,读大学那伙还有接触过,也使用过轮询的方式,当出来后,也有...

oKong
08/14
0
0
47.用Tornado打造WebSocket与Ajax Long-Polling自适应聊天室

这几天忙着研究Tornado,想着总得学以致用吧,于是就决定做个聊天室玩玩。 实际上在Tornado的源码里就有chat和websocket这2个聊天室的demo,分别采用Ajax Long-Polling和WebSocket技术构建。...

quanpower
2013/08/09
0
0
使用WebSocket制作简单的聊天室

使用WebSocket制作简单的聊天室 一、功能需求 ①第一次进入聊天室,输入用户的昵称,用于聊天消息显示名称 ②用户进入系统后,系统需要提示所有用户,有新用户进入系统了 ③用户发送消息时要...

JS_HCX
05/27
0
0
HTML5 WebSocket JavaWeb 实现简单的聊天室功能

本实例使用websocket实现了即时聊天系统,websocket技术可以在网页中使用js技术完成与后台的通讯, 而后台tomcat集成了websocket功能, 只需要很少的代码就可以完成很强大的功能, 基于此聊天系...

智慧点点
04/23
0
0
45.Tornado 搭建基于 WebSocket 的聊天服务

这年头 Python web 框架是有点泛滥了. 下面要介绍的是 facebook 的开源框架 tornado. 这东西比较简单, 而且自带 WebSocket 支持, 可以用它做个简单的聊天室. 读者最好已具备 Javascript 与 ...

quanpower
2013/08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 入门 - 进阶篇(4)- REST访问(RestTemplate)

经常需要发送一个GET/POST请求到其他系统(REST API),通过JDK自带的HttpURLConnection、Apache HttpClient、Netty 4、OkHTTP 2/3都可以实现。 HttpClient的使用:http://rensanning.iteye.c...

onedotdot
4分钟前
0
0
Wi-Fi也有版本号了!

据Solidot消息,行业组织 Wi-Fi 联盟宣布当前的版本 Wi-Fi 802.11ac 重命名为 Wi-Fi 5,而下一个版本 802.11ax 重命名为 Wi-Fi 6,之前的版本 802.11n 改名为 Wi-Fi 4。 Wi-Fi 标准之前使用单...

linux-tao
6分钟前
0
0
项目经验不丰富、技术不突出的程序员怎么打动面试官?

前言 相信不少的程序员都有过类似的困惑:如果我没有大型的项目经历,也不能靠技术征服面试官,那我要怎么才能给面试官留下一个好印象呢? 按照本人的面试经验来说,面试主要看几点:项目经验...

Mamba1
16分钟前
1
0
MyBatis 源码分析----MyBatis 整体架构概要说明

MyBatis整体架构 MyBatis的整体架构分为三层1:基础支持层,2:核心处理层,3:接口层 1:基础支持层: 1-1反射模块: 该模块对Java 原生的反射进行了良好的封装,提供了更加简洁易用的API ,...

西瓜1994
22分钟前
4
0
如何让 J2Cache 在多种编程语言环境中使用

现在的系统是越来越复杂了,不仅仅是功能复杂,系统结构也非常复杂,而且经常在一个系统里包含几种不同语言编写的子系统。例如用 JavaScript 做前端开发、用 Java/PHP 等等做后端,C/C++/Go ...

红薯
24分钟前
35
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部