您的位置：首页 > Web前端 > Node.js

socket.io node.js实时消息信息展示

2017-04-21 16:11 477 查看
首先我们需要安装socket模块
安装命令: npm install socket.io编辑前台页面:index.html<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>统计在线人数</title>
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// 创建websocket连接
var socket = io.connect('http://localhost:3000');
// 把信息显示到div上
socket.on('onlinenums', function (data) {

$("#nums").html(data.nums);
});
</script>
</head>
<body>

当前在线人数:<span style="color: red;" id="nums">0</span>

</body>
</html> 

服务端的:index.js
volatile 意思大概是说，当服务器发送数据时，客户端因为各种原因不能正常接收，比如网络问题、或者正处于长连接的建立连接阶段。此时会让我们的应用变得 suffer，那就需要考虑发送 volatile
数据。
var app = require('http').createServer(handler),
io = require('socket.io').listen(app),
fs = require('fs');
//当前在线人数
var onlineCount = 0;

function handler (req, res) {

fs.readFile(__dirname + '/index.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}

res.writeHead(200);
res.end(data);
});
}
//连接事件
io.sockets.on('connection', function (socket) {

console.log('有新用户进入...');
//叠加当前在线人数
onlineCount++;

var tweets = setInterval(function () {

socket.volatile.emit('onlinenums', {nums : onlineCount});

}, 1000);

console.log('当前用户数量:'+onlineCount);
//客户端断开连接
socket.on('disconnect', function() {

if(onlineCount > 0 ){
//当前在线用户减一
onlineCount--;
console.log('当前用户数量:'+onlineCount);
}
});
});

//启动HTTP服务，绑定端口3000
app.listen(3000, function(){
console.log('listening on *:3000');
});
运行index.js:


 启动web服务器，访问index.html:



再打开一个窗口打开这个链接:



服务端打印日志信息:



node 的socket.io模块使用起来非常简单方便，把我们需要交互的实时信息推送到前端的页面。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                socket.io
                                                node.js
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航