创建一个socket服务实时统计在线人数

Post author:xfxia
Post published:2023年7月18日
Post category:其他

主要是两个文件，一个是后端文件，一个是前端文件：

后端文件：有人登录了，就通知所有的正在访问的页面，把总人数+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命令就可以在控制台上查看打印信息了

转载于:https://www.cnblogs.com/thing/p/10097517.html

你可能也喜欢