zoukankan      html  css  js  c++  java
  • 创建一个socket服务实时统计在线人数

    主要是两个文件,一个是后端文件,一个是前端文件:
    后端文件:有人登录了,就通知所有的正在访问的页面,把总人数+1;反之-1;
    前端文件:有人登录了,通知后端,页面关闭了,通知后端,同时接收后端派发来的消息;

    首先,我们来写后端文件-app.js:

    var express = require('express');
    var app = require('express')();
    var server = require('http').createServer(app);
    var io = require('socket.io').listen(server);
    app.use('/', express.static(__dirname+'/'));
    var users = [];
    console.log('服务器运行于:localhost:3004');
    io.on('connection', function(socket){
         console.log('a user connected');
    
        
    	socket.on('login',function(data){
    		
    		  socket.username = data.username;
    		  users.push(data.username);
    		  // 统计连接数
    		  socket.emit('users',{number:users.length});  // 发送给自己
    		  socket.broadcast.emit('users',{number:users.length}); // 发送给其他人
    		
    
    	});
    	socket.on('logout',function(data){
    		
    		  socket.username = data.username;
    		  users=users.slice(0,users.length-1);
    		  console.log()
    		   统计连接数
    		  socket.emit('users',{number:users.length});  // 发送给自己
    		  socket.broadcast.emit('users',{number:users.length}); // 发送给其他人
    		
    
    	});
    });
    //开启端口监听socket
    server.listen(3004);
    

    然后,前端html:

       <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8" />
        <title>Socket.IO Example</title>
      </head>
      <body>
        <h1>Socket.IO及时通讯</h1>
        <p id="count"></p>
    	
    	<span class="logoutBtn">退出</sapn>
       
           <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
          <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
        <script>
          
        //建立连接
        socket = io.connect('http://你的服务器地址:3004');
         
    	socket.emit("login", {username:'defaultName'}); 
    	
    	//接收服务端推送的信息
        socket.on("users", function(obj) {
            //var curContent = contentNode.html();
            //contentNode.html(curContent+obj.msg);
    		console.log('当前在线:'+obj.number)
        });
    	
    	
    	$('.logoutBtn').click(function(){
    	    socket.emit("logout", {username:'defaultName'});
    	});
    	
    	
        </script>
    
      </body>
    </html>
    

    后端文件写好后,要发布到我们自己的服务器上运行才会生效,

    后端文件要用到express和socket.io,所以我再创建一个package.json文件:

    {
      "name": "socketServer",
      "version": "0.0.0",
      "private": true,
      "scripts": {
        "start": "node ./bin/www"
      },
      "dependencies": {
        "express": "~4.16.0"
      },
      "devDependencies": {
        "socket.io": "^2.2.0"
      }
    }
    

    如图,app.js和package.json在一个叫socketServer文件夹中,通过ftp传到服务器:

    在服务器命令行进入socketServer目录下,运行npm install命令,安装好依赖,安装好后就多了一个node_modules文件:

    最后,我们运行我们的app.js:
    一般我们都是通过npm start启动应用,其实就是调用node ./var/www/socketServer。
    换成pm2就是:pm2 start ./var/www/socketServer

    如果一切顺利的话,我们的在线人数统计就完成了。

    如果你有使用pm2的话,使用:pm2 logs命令就可以在控制台上查看打印信息了

  • 相关阅读:
    Java ClassLoader
    Java Hashcode
    Java 装箱 拆箱
    Java 深拷贝,浅拷贝
    Java IO流
    JVM内存模型
    C语言中的__FILE__、__LINE__和#line
    OpenMP和MPI的区别
    visual studio代码备份精减
    MVVM设计模式在WPF中的应用
  • 原文地址:https://www.cnblogs.com/thing/p/10097517.html
Copyright © 2011-2022 走看看