node.js 之 socket.io
1 Install Node.js on Ubuntu
sudo apt-get install python-software-properties
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs npm
npm install express socket.io amqp log4js
可能出现的错误及解决方法：
sudo add-apt-repository ppa:chris-lea/node.js —— 权限不足（找超级管理员即可）
sudo apt-get install nodejs npm —— 软件包冲突（分开安装，即分别执行 sudo apt-get install nodejs 和 sudo apt-get install npm）
2 简单Demo
服务器端：server.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
// 以上三条语句是服务器端的基本配置
io.on('connection', function(socket){ // 当客户端连接服务器时，触发'connection'事件，服务器端开始执行该匿名函数
console.log('a user connected');
var data = [
{"lng":116.191031,"lat":39.988585,"count":10},
{"lng":116.389275,"lat":39.925818,"count":11},
]; // 服务器端发送给客户端的数据，无需格式转换，简单方便
var i;
setInterval(function(){
var timestamp = (new Date()).valueOf();
var randDiff = ( timestamp % 1000 ) / 5000;
for( i = 0; i < data.length; i++ ){
data[i].lng += randDiff;
}
console.log( data[0].lng );
io.emit('new data', data ); // 服务器端将数据发送给客户端，并通知客户端事件'new data'已发生
}, 5000);
});
http.listen(10008, function(){ // 监听10008端口
console.log('listening on *:10008');
});
服务器端代码完成后，执行以下命令启动服务器
node server.js
服务器端可能出现的错误及错误原因：
Error: listen EADDRINUSE —— 端口冲突，可能是因为同时启动了两个服务器（crtl + c 杀掉一个即可），也可能是端口已被其它程序占用（改用其它端口即可）
客户端：index.js
var socket = io.connect(' //连接服务器
{
var map = new BMap.Map("map-container");
var point = new BMap.Point(116.418261, 39.921984); // 北京
map.centerAndZoom(point,9);
map.enableScrollWheelZoom();
if(!isSupportCanvas()){
alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
}
function isSupportCanvas(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
function openHeatmap(){
heatmapOverlay.show();
}
function closeHeatmap(){
heatmapOverlay.hide();
}
var markers = [];
var heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":10, "visible":true, "opacity":60});
var markerCluster = new BMapLib.MarkerClusterer(map, {markers:markers});
map.addOverlay(heatmapOverlay);
socket.on('new data', function(data){ //当事件'new data'发生时，执行该匿名函数，并将服务器端发送过来的数据作为参数
heatmapOverlay.setDataSet({data:data,max:100});
markers =[];
for( var i = 0; i < data.length; i++ ) {
markers.push( new BMap.Marker( new BMap.Point( data[i].lng, data[i].lat ) ) );
}
markerCluster.clearMarkers();
markerCluster = new BMapLib.MarkerClusterer(map, {markers:markers});
});
}
index.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="veiwport" content="initial-scale=1.0, user-scalable=no"/> <title>智能电网</title> <link href="./assets/css/index.css" rel="stylesheet"/> </head> <body> <div id="wrap"> <div id="map-container"> </div> <div class="heatmap-control"> <input type="button" onclick="openHeatmap();" value="显示热力图"/> <input type="button" onclick="closeHeatmap();" value="关闭热力图"/> </div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=10Sr41tlwEwwU7DqdLgHVBmh"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script> <script type="text/javascript" src="socket.io.js"></script><!--重要：引用socket.io.js--> <script type="text/javascript" src="./assets/js/index.js"></script> </div> </body> </html>