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 相关文章推荐
JavaScript 原型链学习总结
Oct 29 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
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
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
ant design实现圈选功能
2019/12/17 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Python使用爬虫猜密码
2016/02/19 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
大课间活动制度
2014/01/18 职场文书
疾病捐款倡议书
2014/05/13 职场文书
先进员工获奖感言
2014/08/14 职场文书
孔繁森观后感
2015/06/10 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
Redis实战高并发之扣减库存项目
2022/04/14 Redis
Redis Lua脚本实现ip限流示例
2022/07/15 Redis