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 相关文章推荐
js操作select控件的几种方法
Jun 02 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
javascript实现用户必须勾选协议实例讲解
Mar 24 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
关于PHP中的Class的几点个人看法
2006/10/09 PHP
php 随机生成10位字符代码
2009/03/26 PHP
php画图实例
2014/11/05 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
Python常用列表数据结构小结
2014/08/06 Python
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
解决Python使用列表副本的问题
2019/12/19 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
德购商城:德国进口直邮商城
2017/06/13 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
小学节能减排倡议书
2014/05/15 职场文书
先进人物事迹材料
2014/12/29 职场文书
导游欢迎词范文
2015/01/23 职场文书
工作失误检讨书范文
2015/01/26 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
python利用while求100内的整数和方式
2021/11/07 Python