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 相关文章推荐
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 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获取当前url路径的函数以及服务器变量
2013/06/29 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
ionic3 懒加载
2017/08/16 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
Python时间获取及转换知识汇总
2017/01/11 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
Python grpc超时机制代码示例
2020/09/14 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
奶茶专卖店创业计划书
2014/01/18 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android