nodejs结合Socket实现即时通讯功能的详细说明超正析象管(Image Orthicon)

时间：2021-09-01 来源：互联网编辑：宝哥软件园浏览：次

本文介绍了nodejs结合Socket实现的即时通讯功能。IO分享给大家，供大家参考，如下：

动态网页

在html5之前，网页的设计没有考虑动态。它总是围绕文档设计的。当我们看旧网站时，它们基本上是用来显示某个时刻的单个文档的。用户请求一个网页，得到了一个页面。但是随着时间的推移，人们希望web做更多的事情，而不是简单的显示文档，而javaScript一直是开发者推广网页功能的开发中心。

Ajax无疑是动态网页的一大发展。即使更新一点内容也不需要我们刷新整个页面，但在某些方面，却体现了他的不足。如果数据是从服务器请求的，它会被编号，但是如果服务器想将数据推送到浏览器呢？Ajax技术无法轻松支持向客户推送数据。虽然有可能，但是需要很多跨界障碍，不同的浏览器工作方式不同。比如IE和FireBox的内核不同，所以工作方式也不同。

WebSocket是实现服务器和客户端双向通信的对应问题。他的想法是，从零开始，设计一个标准，开发人员可以使用它以一致的方式创建应用程序，而不是通过复杂性，复杂性不能总是设置所有浏览器的工作。他的想法是让Web服务器和浏览器永久打开，这样服务器和浏览器都可以在需要的时候推送数据。因为连接是持久的，所以数据交换非常快，这变成了实时的。

插座。超正析象管(Image Orthicon)

说到这里，让我们来介绍一下朱正。插座。IO是Node.js的一个模块，它提供了一种通过WebSocket进行通信的简单方式。WebSocket协议非常复杂，但是Socket。IO提供了服务器和客户端的组件，所以它只需要一个模块就可以为应用程序添加WebSocket支持。而且还可以支持不同的浏览器。

底层套接字。超正析象管(Image Orthicon)

插座。IO可以在服务器和客户机上工作。要使用它，必须将其添加到服务器上的JavaScript(Node.js)和客户端上的JavaScript(JQuery)中。这是因为内部通信通常是双向的，所以Sokcet。IO需要在两方面都发挥作用。

var server=http . CreateServer(function(req，res){ fs.readFile(')。/index.html '，函数(错误，数据){ res.writeHead(200，{ ' Content-Type ' : ' text/html ' })；res.end(数据，' utf-8 ')；});}).听(3000，' 127 . 0 . 0 . 1 ')；console.log('运行于http://127.0.0.1:3000/'的服务器)；此外，插座。为了增加socket.io的功能，必须包含IO库。

var io=require('socket.io ')。监听(服务器)；然后添加一个事件来响应客户端是连接还是断开。事件如下：

io.sockets.on('connection '，function(socket){ console . log(' User connected ')；socket.on('disconnect '，function(){ console . log(' User disconnected '))；});});你觉得很简单吗？让我们看看完整的代码实现是如何实现的：

简单插座。输入输出应用

创建新的app.js

创建一个新的文件夹socket.io，在这个文件夹下创建一个新的app.js，并编写以下代码：

使用以下代码创建新的index.html文件：

！DOCTYPE html html head meta charset=' utf-8 '/TItle SOCKET .超正析象管(Image Orthicon)示例/标题/头体h1套接字.超正析象管(Image Orthicon)示例/h1脚本src=' http :/socket。输入输出/插座。IO。js /脚本脚本var socket=IO。连接(' http://127。0 .0 .1:3000 ');/脚本/正文/html新建package.json

新建package.json来引入模块。

{ 'name':'socketio_example '，' version':'4.13.2 '，' private':true，' dependencies ' : { ' socket。io ' : ' 1。4 .5 ' } }版本号大家可以输入自己的nodejs -V，或者socket.io -v来查看自己的版本号。

运行

如果大家没有安装插座IO，可以运行如下代码，如果安装了，自动跳过这一步。

新公共管理安装套接字。超正析象管从终端运行如下命令安装模块

新公共管理安装运行如下命令启动服务器

node app.js打开浏览器，输入http://127.0.0.1:3000/,多打开几个页签，都输入该网址，再任意关闭一个页签，然后看看我们的煤矿管理局命令窗口是不是如下：

这里会详细的记录又多少个用于连接了，也有多少个用户断开连接了，这样就能统计我们网页的访问量了。

从服务器发送数据到客户端

上边的实例我们已经实现了连接或者断开服务器做记录了，但是我们要是想要推送消息怎么办，例如我们好友的即时通信软件上线了，腾讯都会咳嗽一下来提醒我们有好友上线。下面我们来做一下这个功能功能。

发送给单个用户

io.sockets.on('connection '，function(socket){ socket。发出('消息'，{text: '你上线了'});});发给所有用户

io.sockets.on('connection '，function(socket){ socket。广播。发出(' message '，{ '你的好某XXX上线了'});});无论是发送给单个用户还是所有用户，这个消息是自己写的，但是要在客户端用，所以命名要注意。

客户端

在客户端我们可以添加侦听事件来接收数据。

var socket=io。连接(' http://127。0 .0 .1:3000 ');socket.on('message '，function(data){ alert(data。文本)；})通过这些功能，我们就在第一个例子的基础上，实现用户数量的统计。这里只需要在服务端设置一个变量，计数，如果有一个上线，那么就数量1,并通知所有用户，最新的在线人数。

新建app.js

！DOCTYPE html html head meta charset=' utf-8 '/TItle SOCKET .超正析象管(Image Orthicon)示例/标题/头体h1套接字.超正析象管(Image Orthicon)示例/h1 H2这里有多少用户？/h2 p id='count'/p脚本src='http:http://*** .***.**.* * * :9001/jquery。量滴js '/script script src=' http :/socket。io/套接字。io。js '/script脚本var socket=io。连接'(http://127。0 .0 .1:3000 ');var count=文档。getelementbyid(' count ')；socket.on('users '，function(data){ console.log('从服务器获取更新');console.log('有“data.number”个用户');数数。innerhtml=数据。number })；/脚本/正文/html创建package.json文件

{ 'name':'socketio_example '，' version':'4.13.2 '，' private':true，' dependencies ' : { ' socket。io ' : ' 1。4 .5 ' } }安装模块新公共管理安装

启动服务器node app.js

打开浏览器，输入http://127.0.0.1:3000,可以看到如下图片：

再打开一个连接http://127.0.0.1:3000,可以看到如下结果：

可以看到如果我们打开两个连接，那么两个页签都会显示当前又两个用户在线，如果关闭其中一个，我们可以看到又显示只有一个用户在线。

将数据广播给客户端

接下来我们来看看插座。超正析象管(图像或图标)是如何实现客户端与客户端的通信呢。要想实现该功能，首先需要客户端将消息发送到服务端，然后服务端发送给除自己之外的其他客户。服务器将消息发送给客户端的方法在上一个例子中我们已经实现了，那么我们需要的是客户端把接收到的消息发送给服务器。

下边的代码思想是利用表单来实现的。

表单id='消息表单'操作=' # '文本区域id=' message ' rows=' 4 ' cols=' 30 '/文本区域输入类型='提交'值='发送消息'/formscript src=' http :http://* * * .***.***.* * :9001/jquery。量滴js '/script script src=' http :/socket。io/套接字。io。js '/script脚本var socket=io。连接'(http://127。0 .0 .1:3000 ');var消息=文档。getelementbyid(' message ')；$(message.form).submit()函数(){ socket。发出('消息'，{ text :消息。value })；返回false })；socket.on('推送消息'，函数（数据){ $(“form”).在(“p”data . text/“p”之后；});/script实现的思想是，将框架和SocketIO库包含进来，只是浏览器拦截127.0.0.1:3000的服务，使用框架的使服从方法加入侦听期，等候用户提交表单。

发送消息给SocketIO服务器，文本区域的内容位消息发送。

添加返回假的，防止表单在浏览器窗口提交。

在上边已经说过服务器如何广播消息，下边我们说一下客户端如何显示客户端发送的消息。

socket.on('推送消息'，函数（数据){ $(“form”).在(“p”data . text/“p”之后；})实例实现

创建信息发送的新文件夹

在文件夹下创建package.json文件，代码如下：

{ 'name':'socketio_example '，' version':'4.13.2 '，' private':true，' dependencies ' : { ' socket。io ' : ' 1。4 .5 ' } }创建app.js文件，代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' utf-8 '/TitleSocket .超正析象管(Image Orthicon)示例/标题/头体h1套接字.超正析象管(Image Orthicon)示例/h1表单id=' message-form ' action=' # ' text area id=' message ' rows=' 4 ' cols=' 30 '/text area输入类型=“提交”值=“发送消息”表单脚本src=' http :3358222。222 .124 .77:9001/jquery。量滴js /脚本脚本src=' http 3360/socket。输入输出/插座。IO。js ' 'var消息=文档。getelementbyid(' message ')；$(message.form).submit()函数(){ socket。发出('消息'，{ text :消息。value })；返回false })；socket.on('推送消息'，函数（数据){ $(“form”).在(“p”data . text/“p”之后；});/脚本/正文/html加载模块新公共管理安装

启动服务器node app.js

然后打开浏览器的多个页签，都输入http://127.0.0.1:3000

可以看到我们再任何一个窗口输入内容，都会在其他的页面显示我们输入的内容，效果如下：

小结

这个博客这么长，其实还有很多话没说，但是我们还是讨论了如何实现Socket。IO动态，可以通过服务器显示用户的连接，统计链接数量，实现最后一条消息的通知和聊天功能。在我们的生活中，这类例子是可以解释的，比如说QQ，比如说淘宝抢购，就可以这样实现，这样就可以实时实现动态功能。尤其是12306网站，我得和他们谈谈，哈哈。

希望本文对nodejs程序的设计有所帮助。