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 相关文章推荐
EXT中xtype的含义分析
Jan 07 Javascript
JS delegate与live浅析
Dec 21 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
Javascript函数式编程语言
Oct 11 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
vue实现数据控制视图的原理解析
Jan 07 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连接oracle数据库的核心步骤
2016/05/26 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python collections模块实例讲解
2014/04/07 Python
Python使用turtule画五角星的方法
2015/07/09 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
pymysql模块的操作实例
2019/12/17 Python
基于python图像处理API的使用示例
2020/04/03 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
年级组长自我鉴定
2014/02/22 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书