node.js中的socket.io入门实例
关于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：
输入命令nodejs即可进入shell模式。
安装npm：
安装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端：
运行客户端并进行观察：打开浏览器，进入http://127.0.0.1访问index.php，并打开firebug查看信息。
上图来自firebug，表明了客户端index.php连接服务端test.js后收到了来自服务端test.js的数据{hello:"world"}。同时也能够看到index.php访问server的网址并非简单的http://localhost:8080。
上图显示了服务端test.js的处理过程。
上图是客户端index.php第一次向服务端test.js发送的http头。
上图是客户端index.php第2次向服务端test.js发送的http头。使用了websocket规范。
当关掉服务端test.js时候客户端index.php出现很多Aborted状态（红字部分）。
分析结束。
相关文章
精通JavaScript 纠正 cleanWhitespace函数
这个函数用在火狐(firefox)上面老是出错，今天仔细研究了下，改正了，希望别人不要遇到我这样的问题2010-03-03
FullCalendar是一款基于jQuery的日历插件，适用于各种日程安排、工作计划等场景，本文是fullCalendar官方文档的中文版，主要介绍了fullCalendar的具体属性与方法，大家可以参考一下2017-02-02
本篇将介绍基本材质以及两种基于光照模型的材质（Lamber与Phong），有需要的小伙伴们可以参考学习。2016-08-08
本篇主要介绍照相机中的正交投影照相机。学习Three.js的小伙伴们可以参考学习。2016-08-08
这篇文章主要介绍了如何使用可视化库gojs及使用时的小技巧，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2022-01-01
本文用实例演示如何用d3.js实现实时刷新的折线图,非常具有实用价值,需要的朋友可以参考下。2016-08-08
今天讲交互图表Highcharts的坐标轴，我们将对Highcharts图表的坐标轴组成、坐标轴类型等进行详细系统讲解。下面一起来看看。2016-08-08
数据列配置是 Highcharts 最复杂也是最灵活的配置，如果说 Highcharts 是灵活多变，细节可定制的话，那么数据列配置就是这个重要特性的核心。2016-08-08
以AngularJS为代表的MVVM结构框架或库这两年来在前端界真是火到不行,大有对抗传统jQuery绑定思想的趋势,这里我们结合传统的MVC结构,来浅谈JavaScript前端开发的MVC结构与MVVM结构2016-06-06
本文利用实例代码详细介绍了一些Three.js中的几何形状的实现过程，包括立方体、平面与球体，有需要的朋友们可以学习下。2016-08-08
最新评论