node.js中的socket.io入门实例


Posted in Javascript onApril 26, 2014

关于websocket等反向ajax技术介绍

在实时web应用中,常见的方法是反向Ajax。反向Ajax的定义:

反向Ajax(Reverse Ajax)本质上则是这样的一种概念:能够从服务器端向客户端发送数据。在一个标准的HTTP Ajax请求中,数据是发送给服务器端的,反向Ajax可以某些特定的方式来模拟发出一个Ajax请求,这些方式本文都会论及,这样的话,服务器就可以尽可能快地向客户端发送事件(低延迟通信)。

反向Ajax技术主要有两点内容:一是服务器端保持住TCP连接直到其有数据发送给客户端(可以使用循环和睡眠实现),二是客户端js编程技巧。

websocket是html5的规范,也属于反ajax技术。

socket.io实现反向AJAX技术实例

socket.io官方介绍:

Socket.IO aims to make realtime apps possible in every browser and mobile device, blurring the differences between the different transport mechanisms. It's care-free realtime 100% in JavaScript. In order to provide realtime connectivity on every browser, Socket.IO selects the most capable transport at runtime, without it affecting the API. WebSocket Adobe® Flash® Socket AJAX long polling AJAX multipart streaming Forever Iframe JSONP Polling

简单来说socket.io是一个基于nodejs的库,其对多种反向ajax技术进行了包装并统一了接口。在运行时候socket.io自动根据浏览器的情况选择合适的反向ajax技术与socket.io服务器进行交互。如果说websocket等技术是规范的话,那么socket.io则属于应用。

下面说一下如何安装(作者使用Linux Mint 16):

安装node.js:

sudo apt-get install nodejs

输入命令nodejs即可进入shell模式。

安装npm:

sudo apt-get install npm

安装socket.io:
sudo npm install socket.io

安装包存放在~/node_modules目录下,客户端socket.io.js存放在~/node_modules/socket.io/node_modules/socket.io-client/dist目录下。

socket.io示例

以下示例来自官方网站并做了适当修改。

首先建立server端(服务端)代码(文件test.js):

var io = require('socket.io').listen(8080);
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});

服务端test.js绑定了8080端口,当一个客户端连接服务端test.js时候,服务端test.js向客户端发出news指令并传送数据{ hello: 'world' };而服务端test.js收到my other event指令时候会调用回调函数function (data) { console.log(data);}来处理接收到的数据data。

笔者搭建了nginx服务器,其使用的80端口,web根目录为/usr/share/nginx/html。将~/node_modules/socket.io/node_modules/socket.io-client/dist下的socket.io.min.js复制到web根目录,并在在web根目录下建立文件index.php(作为客户端),内容如下:

<html>
<head>
</head>
<script src="socket.io.min.js"></script>
<body>
<script>
  var socket = io.connect('http://localhost:8080');
  socket.on('news', function (data) {
    console.log(data);
    console.log(data["hello"]);
    socket.emit('my other event', { my: 'data' });
  });
</script>
</body>
</html>

上面代码中,socket绑定了8080端口,也就是绑定了server端。socket.on()指定了当收到news指令时候,应该如何处理收到的指令对应的数据,socket.emit()向server端发送指令和数据。

运行server端:

$ nodejs test.js

运行客户端并进行观察:打开浏览器,进入http://127.0.0.1访问index.php,并打开firebug查看信息。

node.js中的socket.io入门实例上图来自firebug,表明了客户端index.php连接服务端test.js后收到了来自服务端test.js的数据{hello:"world"}。同时也能够看到index.php访问server的网址并非简单的http://localhost:8080。
node.js中的socket.io入门实例
上图显示了服务端test.js的处理过程。
node.js中的socket.io入门实例上图是客户端index.php第一次向服务端test.js发送的http头。
node.js中的socket.io入门实例

上图是客户端index.php第2次向服务端test.js发送的http头。使用了websocket规范。
node.js中的socket.io入门实例当关掉服务端test.js时候客户端index.php出现很多Aborted状态(红字部分)。

分析结束。

Javascript 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
通用JS事件写法实现代码
Jan 07 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 #Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 #Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 #Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 #Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 #Javascript
jquery实现select选中行、列合计示例
Apr 25 #Javascript
js点击事件链接的问题解决
Apr 25 #Javascript
You might like
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
Python的条件语句与运算符优先级详解
2015/10/13 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
技术经理的自我评价范文
2013/12/03 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
求职简历中自我评价
2014/01/28 职场文书
教师求职自荐信
2014/03/09 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android