动态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/');
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

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

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

io.sockets.on('connection',function(socket){ console.log('User connected'); socket.on('disconnect',function(){ console.log('User disconnected'); }); });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

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

简单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'); }); });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

新建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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

新建package.json

新建package.json来引入模块。

{"name":"socketio_example","version":"4.13.2", "private":true, "dependencies":{ "socket.io":"1.4.5" } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

版本号大家可以输入自己的nodejs -V，或者socket.io -v来查看自己的版本号。

运行

如果大家没有安装Socket.IO，可以运行如下代码，如果安装了，自动跳过这一步。 
npm install socket.io 
从终端运行如下命令安装模块 
npm install 
运行如下命令启动服务器 
node app.js 
打开浏览器，输入http://127.0.0.1:3000/，多打开几个页签，都输入该网址，再任意关闭一个页签，然后看看我们的cmd命令窗口是不是如下： 
 
这里会详细的记录又多少个用于连接了，也有多少个用户断开连接了，这样就能统计我们网页的访问量了。

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

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

发送给单个用户

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

发给所有用户

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

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

客户端

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

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

通过这些功能，我们就在第一个例子的基础上，实现用户数量的统计。这里只需要在服务端设置一个变量，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}); }); });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

创建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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

创建package.json文件

{"name":"socketio_example","version":"4.13.2", "private":true, "dependencies":{ "socket.io":"1.4.5" } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

安装模块npm install 
启动服务器node app.js 
打开浏览器，输入http://127.0.0.1:3000,可以看到如下图片： 
 
再打开一个连接http://127.0.0.1:3000，可以看到如下结果： 
 
可以看到如果我们打开两个连接，那么两个页签都会显示当前又两个用户在线，如果关闭其中一个，我们可以看到又显示只有一个用户在线。

将数据广播给客户端

接下来我们来看看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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

实现的思想是,将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>'); })
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

实例实现

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

{"name":"socketio_example","version":"4.13.2", "private":true, "dependencies":{ "socket.io":"1.4.5" } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

创建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); }); });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

创建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 
可以看到我们再任何一个窗口输入内容，都会在其他的页面显示我们输入的内容，效果如下： 
 

小结

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

转载于:https://www.cnblogs.com/zrbfree/p/5445783.html

160429、nodejs--Socket.IO即时通讯相关推荐

  1. ios视频通话三方_iOS基于Socket.io即时通讯IM实现，WebRTC实现视频通话

    Socket.io-FLSocketIM-iOS 基于Socket.io iOS即时通讯客户端 iOS IM Client based on Socket.io 实现功能 文本发送 图片发送(从相册选 ...

  2. 微信小程序的socket.io即时通讯开发（基于E聊SDK）

    1.背景: 由于微信小程序需要开发轻量,跨平台,开发时间短等特点,许多公司将小程序作为了业务展示的第一个APP.E聊客户端核心SDK 通讯部分已适配了微信小程序平台,下面分享一下适配过程中的思路与方法 ...

  3. nodejs+socket.io即时聊天实例

    在这之前你应该先安装好 Node.js,安装过程不再讲解 首先在你的电脑上创建一个新目录,姑且命名为 chat,然后在该目录创建两个文件,分别是 app.js 和 index.html. app.js ...

  4. 【博客大赛】100行js代码实现网站在线用户数量统计 nodejs + socket.io方案

    需求提出 公司的在线培训平台,需要增加一个新功能:实时统计当前在线的用户数量并在终端界面上显示,需要的时候可以查询当前在线的用户的明细. 有3种技术方案可以选用: 1)改动后台代码,在用户登录和退出时 ...

  5. Nodejs+socket.io 搭建个人的网页聊天室

    Nodejs+socket.io 搭建个人的网页聊天室 最近看到别人搭建了自己的实时聊天室便产生了兴趣,于是乎自己也着手搭建了一个.在socket这里我选用了socket.io这个模块,在网上看了很多 ...

  6. winform中socket实现即时通讯（仿qq聊天）

    C# winform中使用socket实现即时通讯,仿照qq聊天,此为服务器端代码,亲测可行,代码如下 using System; using System.Collections.Generic; ...

  7. Nodejs+socket.io搭建WebRTC信令服务器

    前言 我们在学习 WebRTC 时,首先要把实验环境搭建好,这样我们就可以在上面做各种实验了. 对于 WebRTC 来说,它有一整套规范,如使它使用的接口.使用SDP进行媒体协商.通过ICE收集地址并 ...

  8. 简单的nodejs+socket.io给指定的人发送消息

    最近学习了一下socket.io,不太会用,所以做了一个小demo理一下思路. 主要目的是实现向某个指定的用户发送消息,也就是服务端单独推送信息给某个人.具体的思路就是每个在线的用户都对应一个sock ...

  9. nodejs socket.io 聊天室

    阅读目录 需求分析 Node.js Socket.IO 安装Node.js 搭建WebSocket服务端 服务端代码实现 客户端代码实现 Web领域的实时推送技术,也被称作Realtime技术.这种技 ...

  10. HTML5+NodeJs实现WebSocket即时通讯

    转自:https://www.cnblogs.com/axes/p/3586132.html 最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有W ...

最新文章

  1. php中怎样阻止网页进行跳转,阻止php页面跳转方法
  2. 【Ajax技术】使用XHR对象发送和接受数据
  3. django时间格式化加时区控制
  4. python(matplotlib3)——ticks（坐标刻度）能见度
  5. Ubuntu 屏幕亮度调整
  6. gridview获取当前行索引的方法
  7. 当包装类的要与基本类型进行比较时候 需要先将包装类降级为基本类型
  8. Calendar（显示日期）
  9. Xray配合awvs漏洞扫描
  10. 遍历Map集合的4种常用方法
  11. 收银系统连接不上数据服务器,收银系统服务器数据库
  12. PHP 对接阿里云短信接口
  13. 关于如何利用学生邮箱申请jetbrains免费全家桶
  14. payscale 美国计算机专业,2016PayScale美国大学排名：计算机专业
  15. 阿里巴巴java工程师应聘条件_【全国】—前端/Java工程师—阿里巴巴（长期招聘）...
  16. cv2.warpAffine 参数详解
  17. Android权限申请库——EasyPermissions使用详解和打开相册方法
  18. 公共DNS服务器——谷歌、阿里、百度
  19. National Day出行必备的中英文交通语句
  20. el-table表格无数据时，更改其自带的提示‘暂无数据’

热门文章

  1. MAC电脑Command键怎么调换为Control键
  2. js基础——function类型
  3. [JAVA]预面试笔记
  4. ***php调试总结
  5. PHP最全笔记（三）(值得收藏，不时翻看一下)
  6. iOS 处理后台返回的json(或NSDictionary)形式字符串
  7. ios App内评价问题
  8. 不用StringBuilder！Java8的StringJoiner，也很香！
  9. 我们公司不会用分布式事务！
  10. 支付宝架构师的总结：为什么他们能抗住万亿级流量的高并发？