node.js 之 socket.io

2019独角兽企业重金招聘Python工程师标准>>>

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>

转载于:https://my.oschina.net/u/2255071/blog/377978

node.js 之 socket.io相关推荐

Node.js 和Socket.IO 实现chat
使用 Node.js 和 Socket.IO 构建简单的聊天程序在node.js根目录下创建文件夹chat,里面添加两个文件:app.js和index.html app.js var fs = re ...
TWaver HTML5 + Node.js + express + socket.io + redis（六）
接上一篇TWaver HTML5 + Node.js + express + socket.io + redis(五), 这一篇将讲解如何用模版生成html页面, 如何验证用户登录, 您将了解到: 1 ...
TWaver HTML5 + Node.js + express + socket.io + redis（五）
接上一回TWaver HTML5 + Node.js + express + socket.io + redis(四), 这一篇您将了解到 1. 如何保存更改后的拓扑数据 (包括新增的, 修改的, 删 ...
Node.js + Web Socket 打造即时聊天程序嗨聊（上）
前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前 ...
[前端] Node.js + Web Socket 打造即时聊天程序嗨聊
前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前 ...
使用node.js和Socket创建实时通讯聊天室。
长连接:客户端向服务器段发请求建立链接,一旦建立成功,客户端就可以向服务器发送数据,服务器接受并处理,返回相应后连接不断开. 优点:实时通讯, 短连接:客户端向服务器发送建立连接,一旦建立成功,客户端 ...
js ftpclient linux server,Node.JS用Socket实现FTP Server服务器和Client客户端
通信过程 FTP协议其实就是主机和服务通过Socket进行固定格式的通信过程,当某客户端连接到FTP 服务器后,客户端发送指令: [参数] 服务会按以下格式返回: [参数或说明] 例如以下是FileZ ...
node.js异步式IO与事件式编程
Node.js最大的特性就是异步式I/O与事件紧密结合的编程模式.这种模式与传统的同步式IO线性的编程思路有很大的不同,因为控制流很大程度上要靠事件和回调函数来组织,一个逻辑要拆分为若干个单元格. 内 ...
Node.js + Web Socket 打造即时聊天程序嗨聊(1)
2019独角兽企业重金招聘Python工程师标准>>> 本文将使用Node.js加web socket协议打造一个网页即时聊天程序,取名为HiChat,中文翻过来就是'嗨聊',听中文 ...

node.js 之 socket.io

node.js 之 socket.io相关推荐

最新文章

热门文章