使用node.js+socket.io搭建websocket实时应用

小小财经      2022-02-09     509

关键词:

Web领域的实时推送技术,也被称作Realtime技术。这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新。它有着广泛的应用场景,比如在线聊天室、在线客服系统、评论系统、WebIM等。

作者:潘良虎
链接:https://www.zhihu.com/question/20215561/answer/26419995
来源:知乎
原文地址:http://www.plhwin.com/2014/05/28/nodejs-socketio/

WebSocket简介

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


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


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

作者:潘良虎
链接:https://www.zhihu.com/question/20215561/answer/26419995
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

前面讲到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+。为什么选用这个方案呢?先来简单介绍下他们两。


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的成长的速度有目共睹,其发展前景获得了技术社区的充分肯定。


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


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


编码实现

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

作者:潘良虎
链接:https://www.zhihu.com/question/20215561/answer/26419995
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

安装Node.js

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

技术分享
搭建WebSocket服务端

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


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

技术分享

接下来使用npm命令安装express和

技术分享

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

技术分享

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


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

技术分享

完成以上步骤,的后端服务就正常搭建了。

技术分享
服务端代码实现

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

技术分享
客户端代码实现

进入客户端工作目录/workspace/wwwroot/plhwin/,新建一个index.html:

技术分享

上面的html内容本身没有什么好说的,我们主要看看里面的4个文件请求:
1、
2、style.css
3、json3.min.js
4、client.js


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

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

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

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

技术分享

至此所有的编码开发工作全部完成了,在浏览器中打开 就可以看到效果了。

上面所有的客户端和服务端的代码可以从Github上获得,地址:



技术分享

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


留给我们的思考

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


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


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


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


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



























































使用 socket.io/node.js 在网页上显示流式 Twitter

】使用socket.io/node.js在网页上显示流式Twitter【英文标题】:Displayingstreamingtwitteronwebpagewithsocket.io/node.js【发布时间】:2013-05-0121:05:07【问题描述】:我正在尝试使用node.jssocket.io和twit构建Twitter流式Web应用程序。varexpress=require(\'expr... 查看详情

如何将 Asterisk ARI 与 socket.io 和 Node.js 一起使用

】如何将AsteriskARI与socket.io和Node.js一起使用【英文标题】:HowtouseAsteriskARIwithsocket.io&Node.js【发布时间】:2016-01-0207:27:24【问题描述】:最近开始接触星号、Linux、node.js和最近的socket.io,以便我最终可以为星号制作实时Web应用... 查看详情

设计实时 Web 应用程序(Node.js 和 socket.io)

】设计实时Web应用程序(Node.js和socket.io)【英文标题】:Designingreal-timewebapplication(Node.jsandsocket.io)【发布时间】:2012-05-3008:35:40【问题描述】:我想问一些好的做法。我有一个Node.js(Express)Web服务器和socket.io推送服务器(以防技... 查看详情

带有 Node.js 和 socket.io 的 WebSockets

...ket.io【发布时间】:2011-12-2720:17:54【问题描述】:我已经使用画布和Javascript构建了一个游戏,我想使用WebSockets和Node.js实现多人游戏功能我是Node的新手,我已经设法使用以下代码启动并运行了一个基本的Web服务器:varhttp=require("... 查看详情

Node.js 使用 socket.io 进行重构

】Node.js使用socket.io进行重构【英文标题】:Node.jsrestifywithsocket.io【发布时间】:2012-10-1713:51:40【问题描述】:是否可以像express和socket.io一样在同一个端口上运行socket.io和restify?我就是这样做的,但是没有用#server.coffeerestify=requi... 查看详情

带有 Node.js 的 Socket.io

...ode.js【发布时间】:2020-01-2704:28:45【问题描述】:我正在使用带有express的Socket.io制作一个Web应用程序。我想向所有客户端发送数据,所有客户端都可以编辑/更新该数据,并且更新后的数据将实时更新(对于所有客户端)。这是... 查看详情

如何在 node.js 服务器上的 PHP Web 服务器和 Socket.io 之间创建握手?

...websocket在服务器10.0.4.18的8020端口上的node.js4.0上运行。我使用socket.iov1.3、expre 查看详情

Socket.io 使用 node.js,根本没有 express?

】Socket.io使用node.js,根本没有express?【英文标题】:Socket.iousingnode.jswithnoexpressatall?【发布时间】:2017-05-0118:07:29【问题描述】:所以我想使用socket.io创建一个node.js服务器,但我更像是一个初学者,并且发现express包在语法上相... 查看详情

socket.io入门

...一个表单和一个信息的列表,通过node.js进行框架的搭建使用node.js框架1.新建一个chat-example文件夹,并建立一个package.json文件{"name":"socket-chat-example","version":"0.0.1","description":"myfirstsocket.ioapp","dependencies":{}}2 查看详情

HTTP 状态代码 200 但页面未加载 Node.js Socket.io -- 使用 Socket.io 的 Node.js 教程,Daniel Nill,fs.readFile(),socket

】HTTP状态代码200但页面未加载Node.jsSocket.io--使用Socket.io的Node.js教程,DanielNill,fs.readFile(),socket.html【英文标题】:HTTPStatusCode200butpagedoesnotloadNode.jsSocket.io--Node.jsTutorialWithSocket.io,DanielNill,fs.readFile(),socket.html【 查看详情

node.js + socket.io:拍卖网站开发

...【发布时间】:2016-05-0119:00:48【问题描述】:我目前正在使用node.js和socket.io编写拍卖脚本。但是该网站是使用PHP和MySQL开发的。在这里,我仅将node.js+socket.io用于拍卖投标过程。该网站将有500-1000名登录用户在拍卖期间查看单个... 查看详情

使用 Node.js 在 Heroku 上使用 Socket.io 和 Redis

】使用Node.js在Heroku上使用Socket.io和Redis【英文标题】:UsingSocket.ioandRedisonHerokuwithNode.js【发布时间】:2012-06-1908:37:00【问题描述】:我正在尝试使用Node.js和带有Redis的Socket.io将应用程序部署到Heroku。我已经将Socket.io设置为使用XHR... 查看详情

使用 Socket.IO 将 Node.JS 服务器连接到另一个 Node.JS 服务器?

】使用Socket.IO将Node.JS服务器连接到另一个Node.JS服务器?【英文标题】:ConnectaNode.JSservertoanotherNode.JSserverwithSocket.IO?【发布时间】:2018-12-1514:14:21【问题描述】:我正在尝试使用Socket.IO在两个Node.JS服务器之间发送数据。我通常只... 查看详情

在没有 node.js 的情况下独立使用 socket.io

】在没有node.js的情况下独立使用socket.io【英文标题】:Usingsocket.iostandalonewithoutnode.js【发布时间】:2011-11-1812:45:53【问题描述】:(JavaScript新手)我正在尝试构建一个基于JavaScript的客户端应用程序,该应用程序通过套接字与服... 查看详情

Node.js 如何在快速路由中使用 socket.io

】Node.js如何在快速路由中使用socket.io【英文标题】:Node.jshowtousesocket.ioinexpressroute【发布时间】:2019-10-1716:43:27【问题描述】:在我的一个node.js脚本中,我尝试在快速路由中使用socket.io。我发现了许多类似的问题,并尝试按照... 查看详情

Node.js、多线程和 Socket.io

...3【问题描述】:我希望Socket.io在Node.jsv.0.6.0及更高版本中使用nativeloadbalancing(“集群”)进行多线程工作。据我了解,Socket.io使用Redis来存储其内部数据。我的理解是:我们不想为每个工作人员生成一个新的Red 查看详情

使用 node.JS 和 Socket.IO 的路径和其他问题

】使用node.JS和Socket.IO的路径和其他问题【英文标题】:path-andotherproblemsusingnode.JSandSocket.IO【发布时间】:2011-03-2705:13:38【问题描述】:我在由Windows托管的TurnkeyLinux上的VirtualBox中使用node.JS。我按照here的说明进行操作。node.JS位于... 查看详情

如何在 node.js 中以角度使用 socket.io?

】如何在node.js中以角度使用socket.io?【英文标题】:Howtousesocket.ioinangularwithnode.js?【发布时间】:2019-03-0502:44:39【问题描述】:客户端我使用Angular6,服务器端我使用node.js。在Angular6控制台中,它打印消息并socket.ioid(message:"He... 查看详情