首页 / NODEJS / nodejs结合Socket.IO实现的即时通讯功能详解

nodejs结合Socket.IO实现的即时通讯功能详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了nodejs结合Socket.IO实现的即时通讯功能详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9307字，纯文字阅读大概需要14分钟。

内容图文

本文实例讲述了nodejs结合Socket.IO实现的即时通讯功能。分享给大家供大家参考，具体如下：

动态web

在html5以前，web的设计上并没有考虑过动态，他一直是围绕着文档设计的，我们看以前比较老的网站，基本上都是某一刻用来显示单一的文档的，用户请求一次web页面，获取一个页面，但是随着时间的推移，人们想要web做更多的事情了，而不是简单的要显示文档，而javaScript一直处于开发人员推动web页面功能的发展中心。

Ajax无疑是动态Web页面的一个重大发展，他不再需要我们即使更新一点内容，也需要刷新整个页面了，但是有些方面，又体现了他的不足。如果从服务器请求数据，他固然号，但是如果服务器想要将数据推送到浏览器呢。Ajax技术无法很容易的支持将数据推送到客户，虽然可以，但是需要跨国很多的障碍才行，而且不同的浏览器工作方式也不同，例如IE和FireBox他们的内核就不一样，从而工作方式也不一样。

WebSocket是在对服务器和客户端之间实现双向通信问题的相应。他的思想是，从头开始，设计一个开发人员可以使用的标准以便以一直的方式创建应用程序，而不是通过复杂的，并不总能设置所有浏览器的工作。他的思想是Web服务器和浏览器之间保持持久打开，这就使得不管是服务器还是浏览器都可以在想要的时候推送数据。因为连接是持久的，所以数据的交换非常的快，也就成了实时的了。

Socket.IO

说了那么多，我们介绍一下正主，Socket.IO是Node.js的一个模块，他提供通过WebSocket进行通信的一种简单方式，WebSocket协议很复杂，但是Socket.IO提供了服务器和客户端双方的组件，所以只需要一个模块就可以给应用程序加入对WebSocket的支持。而且还能支持不同的浏览器。

基础的Socket.IO

Socket.IO既能在服务端也能在客户端工作，要使用它，必须将其添加到服务器端的JavaScript(Node.js)和客户端的JavaScript(JQuery)中，这是以为内通信通常是双向的，所以Sokcet.IO需要能在两边工作。

var server = http.createServer(function (req,res){
  fs.readFile('./index.html',function(error,data){
    res.writeHead(200,{'Content-Type':'text/html'});
    res.end(data,'utf-8');
  });
}).listen(3000,"127.0.0.1");
console.log('Server running at http://127.0.0.1:3000/');

而且必须将Socket.IO库包含起来，才能加入Socket.IO的功能。

var io = require('socket.io').listen(server);

然后加入一个事件来响应客户端到底是连接了，还是断开了。事件如下：

io.sockets.on('connection',function(socket){
  console.log('User connected');
  socket.on('disconnect',function(){
    console.log('User disconnected');
  });
});

是不是觉得非常的简单，下面我们看一下完整的代码实现是如何实现的吧：

简单Socket.IO应用

新建app.js

新建文件夹socket.io，在该文件夹下新建app.js，写如下代码：

var http = require('http');
var fs = require('fs');
var server = http.createServer(function (req,res){
  fs.readFile('./index.html',function(error,data){
    res.writeHead(200,{'Content-Type':'text/html'});
    res.end(data,'utf-8');
  });
}).listen(3000,"127.0.0.1");
console.log('Server running at http://127.0.0.1:3000/');
var io = require('socket.io').listen(server);
io.sockets.on('connection',function(socket){
  console.log('User connected');
  socket.on('disconnect',function(){
    console.log('User disconnected');
  });
});

新建index.html

新建index.html文件，代码如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Socket.IO Example</title>
 </head>
 <body>
  <h1>Socket.IO Example</h1>
  <script src="/socket.io/socket.io.js"></script>
  <script>
   var socket = io.connect('http://127.0.0.1:3000');
  </script>
 </body>
</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来查看自己的版本号。

运行

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

npm install socket.io

从终端运行如下命令安装模块

npm install

运行如下命令启动服务器

node app.js

打开浏览器，输入http://127.0.0.1:3000/，多打开几个页签，都输入该网址，再任意关闭一个页签，然后看看我们的cmd命令窗口是不是如下：

nodejs结合Socket.IO实现的即时通讯功能详解 - 文章图片

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

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

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

发送给单个用户

io.sockets.on('connection',function(socket){
    socket.emit('message',{text:'你上线了'});
});

发给所有用户

io.sockets.on('connection',function(socket){
    socket.broadcast.emit('message',{'你的好某XXX上线了'});
});

无论是发送给单个用户还是所有用户，这个message是自己写的，但是要在客户端用，所以命名要注意。

客户端

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

var socket = io.connect('http://127.0.0.1:3000');
socket.on('message',function(data){
  alert(data.text);
})

通过这些功能，我们就在第一个例子的基础上，实现用户数量的统计。这里只需要在服务端设置一个变量，count,如果有一个上线，那么就数量+1，并通知所有用户，最新的在线人数。

新建app.js

var http = require('http');
var fs = require('fs');
var count = 0;
var server = http.createServer(function (req,res){
  fs.readFile('./index.html',function(error,data){
    res.writeHead(200,{'Content-Type':'text/html'});
    res.end(data,'utf-8');
  });
}).listen(3000,"127.0.0.1");
console.log('Server running at http://127.0.0.1:3000/');
var io = require('socket.io').listen(server);
io.sockets.on('connection',function(socket){
  count++;
  console.log('User connected' + count + 'user(s) present');
  socket.emit('users',{number:count});
  socket.broadcast.emit('users',{number:count});
  socket.on('disconnect',function(){
    count--;
    console.log('User disconnected');
    socket.broadcast.emit('users',{number:count});
  });
});

创建index.html文件

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Socket.IO Example</title>
 </head>
 <body>
  <h1>Socket.IO Example</h1>
  <h2>How many users are here?</h2>
  <p id="count"></p>
   <script src="http://***.***.**.***:9001/jquery.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script>
   var socket = io.connect('http://127.0.0.1:3000');
   var count = document.getElementById('count');
   socket.on('users',function(data){
    console.log('Got update from the server');
    console.log('There are ' + data.number + 'users');
    count.innerHTML = data.number
   });
  </script>
 </body>
</html>

创建package.json文件

{
  "name":"socketio_example",
  "version":"4.13.2",
  "private":true,
  "dependencies":{
    "socket.io":"1.4.5"
  }
}

安装模块npm install

启动服务器node app.js

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

nodejs结合Socket.IO实现的即时通讯功能详解 - 文章图片

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

nodejs结合Socket.IO实现的即时通讯功能详解 - 文章图片

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

将数据广播给客户端

接下来我们来看看Socket.IO是如何实现客户端与客户端的通信呢。
要想实现该功能，首先需要客户端将消息发送到服务端，·然后服务端发送给除自己之外的其他客户。服务器将消息发送给客户端的方法在上一个例子中我们已经实现了，那么我们需要的是客户端把接收到的消息发送给服务器。

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

<form id="message-form" action="#">
   <textarea id="message" rows="4" cols="30"></textarea>
   <input type="submit" value="Send message" />
</form>
<script src="http://***.***.***.**:9001/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
   var socket = io.connect('http://127.0.0.1:3000');
   var message = document.getElementById('message');
   $(message.form).submit(function() {
    socket.emit('message', { text: message.value });
    return false;
   });
   socket.on('push message', function (data) {
    $('form').after('<p>' + data.text + '</p>');
   });
</script>

实现的思想是,将JQuery和SocketIO库包含进来，只是浏览器拦截127.0.0.1:3000的服务，使用Jquery的submit方法加入侦听期，等候用户提交表单。

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

添加return false ，防止表单在浏览器窗口提交。

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

socket.on('push message', function (data) {
  $('form').after('<p>' + data.text + '</p>');
})

实例实现

创建messaging的新文件夹

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

{
  "name":"socketio_example",
  "version":"4.13.2",
  "private":true,
  "dependencies":{
    "socket.io":"1.4.5"
  }
}

创建app.js文件，代码如下：

var http = require('http');
var fs = require('fs');
var server = http.createServer(function (req,res){
  fs.readFile('./index.html',function(error,data){
    res.writeHead(200,{'Content-Type':'text/html'});
    res.end(data,'utf-8');
  });
}).listen(3000,"127.0.0.1");
console.log('Server running at http://127.0.0.1:3000/');
var io = require('socket.io').listen(server);
io.sockets.on('connection',function(socket){
  socket.on('message',function(data){
    socket.broadcast.emit('push message',data);
  });
});

创建index.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8" />
  <title>Socket.IO Example</title>
 </head>
 <body>
  <h1>Socket.IO Example</h1>
  <form id="message-form" action="#">
   <textarea id="message" rows="4" cols="30"></textarea>
   <input type="submit" value="Send message" />
  </form>
  <script src="http://222.222.124.77:9001/jquery.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script>
   var socket = io.connect('http://127.0.0.1:3000');
   var message = document.getElementById('message');
   $(message.form).submit(function() {
    socket.emit('message', { text: message.value });
    return false;
   });
   socket.on('push message', function (data) {
    $('form').after('<p>' + data.text + '</p>');
   });
  </script>
 </body>
</html>

加载模块npm install

启动服务器node app.js

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

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

nodejs结合Socket.IO实现的即时通讯功能详解 - 文章图片

小结

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

希望本文所述对大家nodejs程序设计有所帮助。

内容总结

以上是互联网集市为您收集整理的nodejs结合Socket.IO实现的即时通讯功能详解全部内容，希望文章能够帮你解决nodejs结合Socket.IO实现的即时通讯功能详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/338848.html

来源：【匿名】

【上一篇】nodejs基于WS模块实现WebSocket聊天功能的方法【下一篇】node.js和php的区别有哪些？

更多 ►

【nodejs结合Socket.IO实现的即时通讯功能详解】教程文章相关的互联网学习教程文章

nodejs开发实战详解

博客论坛或微博适合吗不适合PHP在这个方面已经很成熟解决的是长连接和多请求引发的成本问题实时在线game 实时在线聊天室实时消息推送 SNS实时交流实时监控系统股票系统运行状态等《程序员如何说服老板采用Nodejs》建立原型原文：https://www.cnblogs.com/yizhixuepython/p/9461925.html

在Debian（Raspberry Pi）树莓派上安装NodeJS的教程详解

在树莓派上运行NodeJS并不需要特别的配置，你只需要确保可以用openssh远程连接到你的树莓派。安装并配置Open SSH服务器它可以确保你能远程连接到树莓派，它应该已经被安装了，但是这个过程可以确保安装最新版和生成加密密钥。如果Raspberry Pi运行在headerlesss模式。没有显示器，键盘或鼠标的情况下，就需要通过网线连接到树莓派。 sudo apt-get install openssh-server sudo rm -rf /etc/ssh/ssh_host_* sudo dpkg-reconfigur...

详解Nodejs基于LRU算法实现的缓存处理操作方法

这篇文章主要介绍了Nodejs基于LRU算法实现的缓存处理操作,结合具体实例形式分析了LRU算法的原理、功能以及nodejs使用LRU算法实现缓存处理操作的相关实现技巧,需要的朋友可以参考下本文实例讲述了Nodejs基于LRU算法实现的缓存处理操作。分享给大家供大家参考，具体如下：LRU是Least Recently Used的缩写，即最近最少使用页面置换算法，是为虚拟页式存储管理服务的，是根据页面调入内存后的使用情况进行决策了。由于无法预测各页面将...

Node.js log4js日志管理详解【图】

前言在Nodejs中使用express框架并没有自带的日志模块，我们可以选择log4js来完成日志记录的功能。如果用过JAVA中log4j的同学，肯定对日志并不陌生，学习log4js会更得心应手的。项目要用log4js记录日志，网上找的教程都是很久以前的，新版本log4js跟旧版本有一些不同，看文档结合旧版本配置了能用的log4js，记录一下，当前log4js版本2.3.12，采用按天分片的方式，同时输出到控制台和文件。 log4js单独配置到一个文件，其他要使用的...

Node.js使用console输出日志文件步骤详解

这次给大家带来Node.js使用console输出日志文件步骤详解，Node.js使用console输出日志文件的注意事项有哪些，下面就是实战案例，一起来看一下。我们首先创建如下文件：// index.js let fs = require(fs); let options = {flags: a, // append模式encoding: utf8, // utf8编码 }; let stdout = fs.createWriteStream(./stdout.log, options); let stderr = fs.createWriteStream(./stderr.log, options); // 创建logger let lo...

NodeJS中Buffer模块详解【图】

一，开篇分析所谓缓冲区Buffer，就是 "临时存贮区" 的意思，是暂时存放输入输出数据的一段内存。 JS语言自身只有字符串数据类型，没有二进制数据类型，因此NodeJS提供了一个与String对等的全局构造函数Buffer来提供对二进制数据的操作。除了可以读取文件得到Buffer的实例外，还能够直接构造，例如：代码如下:var buffer = new Buffer([ 0x68, 0x65, 0x6c, 0x6c, 0x6f ]) ; Buffer与字符串类似，除了可以用.length属性得到字节长度...

Typescript开发node.js项目实例详解【图】

本文主要介绍了详解使用Typescript开发node.js项目（简单的环境配置），非常具有实用价值，需要的朋友可以参考下，希望能帮助到大家。最近在学习typescript的过程中，想到也许可以使用ts来开发node.js项目。在网上搜了一下，其实已经有很多开发者实践了这方面的内容。这里，我记录一下自己搭建开发环境的简单过程。使用Typescript开发的好处:较严格的类型检查和语法检查。对ES6/ES2015/ES7(部分)支持比较好。编译后的js文件很干净，...

详解Nodejs 通过 fs.createWriteStream 保存文件

工作中难免会遇到处理大文件的时候，有这种stream的处理方式，就不需要一次处理太大的文件，从而导致内存不够用，或者内存占用太多。 fs.createWriteStream 似乎不会自己创建不存在的文件夹，所以在使用之前需要注意，保存文件的文件夹一定要提前创建。 const path = /xxxxxx/ddd/;if (!fs.existsSync(path)) {fs.mkdirSync(path); } 创建完文件夹，我们就可以进行文件添加操作了。我们希望在使用文件添加操作的时候是通过saveFile...

Node.jsStreams文件读写操作详解

Node.js 天生异步和事件驱动，非常适合处理 I/O 相关的任务。如果你在处理应用中 I/O 相关的操作，你可以利用 Node.js 中的流(stream)。因此，我们先具体看看流，理解一下它们是怎么简化 I/O 操作的吧。流是什么流是 unix 管道，让你可以很容易地从数据源读取数据，然后流向另一个目的地。简单来说，流不是什么特别的东西，它只是一个实现了一些方法的 EventEmitter 。根据它实现的方法，流可以变成可读流(Readable)，可写流(Writ...

nodeJS实现路由功能实例详解【图】

前面的话　　本文将使用NodeJS实现较复杂应用的路由功能结构　　项目结构如下　　代码如下功能【router.js】// 加载所需模块var http = require(http);var url = require(url);var fs = require(fs);var host = 127.0.0.1;var port = 8080;http.createServer(function(req,res){var pathname = url.parse(req.url).pathname;console.log(Request for + pathname + received.);function showPaper(path,status){var content = f...

卸载安装Node.js与npm过程详解

下面记录一下在本地 Windwos 环境用 vagrant 搭建的虚拟机（Homestaead）和生产环境阿里云 CentOS 系统安装 Node.js 的步骤，以及 npm 安装依赖的不同之处。使用源码编译的方式安装 node.js.首先将机子上的 Node.js 卸载，我直接贴上 Stack Overflow 上提供的步骤： 1.卸载 npm 和 Node.js 先卸载 npm，命令是：sudo npm uninstall npm -g，然后卸载 Node.js. Running which node will return something like /path/bin/node...

Node.js中路径处理模块path详解

前言在node.js中，提供了一个path某块，在这个模块中，提供了许多使用的，可被用来处理与转换路径的方法与属性，将path的接口按照用途归类，仔细琢磨琢磨，也就没那么费解了。下面我们就来详细介绍下关于Node.js中的路径处理模块path。获取路径/文件名/扩展名获取路径：path.dirname(filepath) 获取文件名：path.basename(filepath) 获取扩展名：path.extname(filepath)获取所在路径例子如下：var path = require(pat...

Node.js如何响应Ajax的POST请求并且保存为JSON文件详解

实现目的使用D3.js开发的前端应用，用户与图交互更改图的内容后，如何在下一次加载的显示上一次最后交互的内容？本文提供通过后端的Node.js程序提供一种最小化方案，作为参考。开发环境后端：Node.jsNode.js模块：Express、body-parser、fs前端：JQuery后端 1、安装nodejs，装好后用显示版本号确认是否安装好 node --version2、新建一工程目录（文件夹），安装模块。 npm install express npm install body-parserExpress 是一...

Node.js 事件循环详解及实例

Node.js 事件循环详解及实例 Node.js 是单进程单线程应用程序，但是通过事件和回调支持并发，所以性能非常高。Node.js 的每一个 API 都是异步的，并作为一个独立线程运行，使用异步函数调用，并处理并发。Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现。Node.js 单线程类似进入一个while(true)的事件循环，直到没有事件观察者退出，每个异步事件都生成一个事件观察者，如果有事件发生就调用该回调函数.Node.js 有多...

详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据

最近使用了protobuf进行数据交互，发送在node.js接收前端的二进制数据出现了数据错误等问题。后来发现思路上面的问题，在req.on(data,()=>{})事件中的处理不适当才引发数据错乱。借此发我先直接贴正确接收二进制数据代码 const server = http.createServer((req, res) => {if(req.method===OPTIONS){res.setHeader("Access-Control-Allow-Origin", "*");res.statusCode=200;}if(req.method===POST){// 存储数组空间let msg=[];// 接...

首页 / NODEJS / nodejs结合Socket.IO实现的即时通讯功能详解

nodejs结合Socket.IO实现的即时通讯功能详解

内容导读

内容图文

内容总结

内容备注

内容手机端

【nodejs结合Socket.IO实现的即时通讯功能详解】教程文章相关的互联网学习教程文章

NODEJS - 相关标签

功能 - 相关标签

通讯 - 相关标签

NODEJS - 技术教程分类

NODEJS - 最新教程

NODEJS - 最热教程