动态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，例如淘宝的抢购，都是可以通过这种方式实现的，这样我们就能实时的实现动态的功能了。

160429、nodejs--Socket.IO即时通讯的更多相关文章

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

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

  2. nodejs + socket.io + redis 新手上路

    最近要更新网站架构了,决定转入 nodejs + socket.io + redis 方式. 战斗刚开始: 网上的文章太松散,我根据各个网友的分享进行整理 ,让大家可以方便上手. 进入node.js之 ...

  3. NodeJS + Socket.io搭建聊天服务器

    第一步:安装node git clone https://github.com/joyent/node.git cd node git checkout v0.10.33-release ./conf ...

  4. nodeJs+socket.io

    1.先安装npm和node 2.安装socket.io npm install socket.io 3.html <!DOCTYPE html> <html lang="e ...

  5. nodejs socket.io初探

    1.安装socket.io npm install socket.io 2.创建服务端代码server.js var app = require('http').createServer(handle ...

  6. nodeJS+socket.io传递消息

    服务器端 安装express,socket.io npm install express --save-dev npm install socket.io --save app.js const ex ...

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

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有WebSocket也很值得注意.可 ...

  8. NodeJS + Socket.io聊天服务器连接数达到1024后就连不上了

    如果是亚马逊的Engine Yard服务器,解决办法为: 1.查看端口占用情况,找到nodejs进程号,例如我这里是8000端口 lsof -i:8000  找到pid 例如为 8213 2.设置no ...

  9. NodeJs 实现 WebSocket 即时通讯（版本二）

    服务端代码 websocket.js 'use strict' const WebSocket = require('ws'); const connections = new Map(); cons ...

随机推荐

  1. 安装配置PhoneGap开发环境（二）——使用Cordova取代PhoneGap创建项目

    1 Cordova是谁 PhoneGap的官方文档说的非常清楚.Cordova是PhoneGap的引擎,这两者的关系类似于WebKit与Chrome浏览器的关系.所以一些核心的基础操作对于Cordov ...

  2. Atitit.struts2体系结构大总结

    Atitit.struts2体系结构大总结 1. 国际化与异常处理 2 2. 第5章 拦截器 2 3. 第7章 输入校验 2 4. 避免表单重复提交与等待页面 2 5. Struts 2对Ajax的支 ...

  3. atitit,it人怎么样才容易事业成功？？ 有以下五种性格的人容易成功

    atitit,it人怎么样才容易事业成功?? 有以下五种性格的人容易成功 有以下五种性格的人容易成功 一.不撞南墙不回头的人:由于这种人有脚踏实地,做事拼命.不撞南墙不回头的性格特点, 势有不到黄河心 ...

  4. Java Main如何被执行？

    java应用程序的启动在在/hotspot/src/share/tools/launcher/java.c的main()函数中,而在虚拟机初始化过程中,将创建并启动Java的Main线程.最后将调用J ...

  5. nodeJs should+mocha+istanbul 测试 遇到的坑

    .istanbul 和 mocha 结合进行nodejs测试的时候最后执行 istanbul cover _mocha test.sqrt.js的时候报错 如图: 用 ../node_modules/ ...

  6. UIImageView只显示一半

    本来正常的话,UIImageView会在UIScrollView内占满的,但是第一个UIImageView只占了高度的一半左右.如下图,红色的是UIScrollView的背景色,还有那么多没有填充,但 ...

  7. hdu6149 Valley Numer II 分组背包+状态压缩

    /** 题目:hdu6149 Valley Numer II 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6149 题意: 众所周知,度度熊非常喜欢图. ...

  8. hdu6143 Killer Names 容斥+排列组合

    /** 题目:hdu6143 Killer Names 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6143 题意:有m种字符(可以不用完),组成两个长度 ...

  9. [转]基于Storm的实时数据处理方案

    1 文档说明 该文档描述的是以storm为主体的实时处理架构,该架构包括了数据收集部分,实时处理部分,及数据落地部分. 关于不同部分的技术选型与业务需求及个人对相关技术的熟悉度有关,会一一进行分析. ...

  10. 重启php

    注意这是重启php,不是重启apache service php-fpm restart