node.jsのsockete.io

4521 ワード

nodejs socketio

1 Install Node.js on Ubuntu
sudo ap-get install python-software-properties
sudo add-ap-repositoryppa:chris-lea/node.js
sudo ap-get udate
sudo ap-get install nodejs npm
npm install express sockete.io amqp logs 4 js
発生する可能性のあるエラーと解決方法:

sudo add-ap-repositoryppa:chris-lea/node.js —— 権限が足りません.

sudo ap-get install nodejs npm —— ソフトウェアパッケージの競合(それぞれsudo appt-get install nodejsと sudo ap-get install npm)

2簡単デモ
サーバー側: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 —— ポートが衝突しているのは、二つのサーバが同時に起動しているからかもしれません.ポートは他のプログラムに占有されているかもしれません.
クライアント: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.

<!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>

Afinalデータベースモジュール実装(一)_注記Annotationと反射はSQL文を生成します.